Design Support Library e CollapsingToolbarLayout, Material Design Android - Parte 11

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Android /Design Support Library e CollapsingToolbarLayout, Material Design Android - Parte 11

Design Support Library e CollapsingToolbarLayout, Material Design Android - Parte 11

Vinícius Thiengo
(7820) (24)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Opa, blz?

Dando continuidade e série de vídeos sobre o Material Design no Android, dessa vez apresentando a lib de suporte do Material Design no Android, Android Design Support Library. No vídeo mostro três das várias entidades que é possível implementar com essa lib. Realizei a troca do script de FloatingActionMenu pelo script do FloatingActionButton da lib de suporte que já inicia com o suporte a paritr da API 7, consequentemente perddemos um pouco em customização, digo, um layout já mais robusto e pronto que a FloatingActionMenu tinha, porém nada que não podemos implementar com a nova FloatingActionButton de suporte. Os scripts de Snackbar foram também alterados pelos scripts de Snackbar da nova lib de suporte. A implementação do Snackbar de suporte ficou bem mais simples e tão eficiente quanto, somente não temos mais a opção de deixar ativa por tempo indeterminado a Snackbar, no big deal!

Finalmente, ante a implementação de libs que nos permitem criar o hide / show toolbar de maneira não muito trivial, as entidades CoordinatorLayout, AppBarLayout e CollapsingToolbarLayout, juntamente com o Toolbar, nos permitem criar um hide / show toolbar simples e somente utilizando o XML, além de ser possível a implementação de um parallax collapse mode, nada mais nada menos que aquela estilosa Toolbar que contém uma imagem e os botões de menu e StatusBar sobre um fundo transparente onde temos a imagem de baixo deles. Apesar da série de bugs encontrados (até mesmo a APP de amostra criada por um dos membros do time de developers do Android está com uma série de bugs, apresentados no vídeo - APP link) ainda sim vale a pena a migração, tendo em que as atualizações podem começar logo trazendo mais entidades tendo suporte e a correção das entidades já com suporte e bugadas.

Note que como já tinha implementado uma série das entidades que agora têm suporte e que tenho de limitar algumas abordagens durante o vídeo, optei por apresentar principalmente o Toolbar com CollapsingToolbarLayout, CoordinatorLayout e AppBarLayout e como implementação a parte o FloatingActionButton e Snackbar de suporte, as entidades DrawerNavigation e SlidingTabs vou implementando com o decorrer dos próximos vídeos devido a essas entidades já estarem implementadas (porém utilizando libs de suporte não nativas). No mais é somente isso, o vídeo ficou um pouco longo, porém acredito que vale a pena assistí-lo até o final.

O link para download do projeto se encontra logo abaixo no post, no Blog (https://www.thiengo.com.br/)

Para acompanhar a série Material Design no Android siga a PlayList:

Material Design PlayList - Blog Thiengo Calopsita

Segue os links das páginas apresentadas no vídeo:

Post sobre a Android Design Support Library no Android Developers Blog

Página no GitHub da APP de apresentação das entidades suportadas no lib de suporte Android Design Support Library

Página da classe CoordinatorLayout

Página da classe abstrata CoordinatorLayout.Behavior

Página da classe AppBarLayout

Página da classe CollapsingToolbarLayout

Página da classe NestedScrollView

Página que contém explicação do atributo fitSystemWindow

Vlw

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

Material Dialog, Correção Bug StatusBar e Ações nos Fragments. Material Design Android - Parte 7Material Dialog, Correção Bug StatusBar e Ações nos Fragments. Material Design Android - Parte 7Android
Sliding Tabs Toolbar, Material Design Android - Parte 8Sliding Tabs Toolbar, Material Design Android - Parte 8Android
SwipeRefreshLayout e Snackbar, Material Design Android - Parte 9SwipeRefreshLayout e Snackbar, Material Design Android - Parte 9Android
Utilizando Transitions, Material Design Android - Parte 10Utilizando Transitions, Material Design Android - Parte 10Android

Compartilhar

Comentários Facebook

Comentários Blog (24)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
john lima (0) (0)
04/06/2016
Bom dia Thiengo, você poderia me dizer como faço para alterar um toolbar em tempo de execução ? Como o gmail faz quando é realizado um click longo em um email da lista. Obrigado.
Responder
18/11/2015
Eai Thiengo blz?

Eu tenho um SlidingTabs no meu app, mas só quero o floatingActionButton no primeiro fragment, mas chamando só no fragment que quero, quando setei o viewPager para o Collapsing como match_parent, o meu floatingButton ele ficou pra baixo da tela, só aparece metade... o viewPager na verdade ele ultrapassa o tamanho da tela fazendo com que o fab do meu fragment saia também...

o que posso fazer?
Responder
Vinícius Thiengo (0) (0)
29/11/2015
Fala Lucas, blz?
Veja a pergunta e resposta desse post (http://stackoverflow.com/questions/31269958/floatingactionbutton-doesnt-hide ). Desvincule o FAB e então esconda-o, quando voltar a ABA que ele deve aparecer, vincule-o e então o mostre. Abraço
Responder
Vinícius Thiengo (0) (0)
29/11/2015
Veja se assim vai funcionar para ti. Abraço
Responder
Paulo Miranda (1) (0)
28/09/2015
Fala Thiengo blz? nos teste que fiz notei que o scroll na toolbar só funciona quando é feito sobre o RecyclerView por causa dessa linha(app:layout_behavior="@string/appbar_scrolling_view_behavior") tem como funcionar também sobre a imagem que está contida no CollapsingToolbarLayout? como é feito semelhante ao WhatsApp.
Responder
Vinícius Thiengo (0) (0)
03/10/2015
Fala Paulo, blz?
Na verdade não há limitação quanto ao uso do scroll do toolbar ao uso do RecyclerView em conjunto, o vídeo acima não utiliza o RecyclerView na Activity de detalhes do carro. Esse atributo (layout_behavior) é para permitir que o APPBar trabalhe com o scroll de acordo com a View que está vinculada (utilizando o referido atributo) e que tem tb a feature de scroll. Se não me engano o que perguntou é exatamente o que eu faço no vídeo. De qualquer forma, tem como sim colocar a toolbar (CoordinatorLayout, AppBar, ... e cia) para se comportar de acordo com o scroll do container da imagem. Abraço
Responder
Aricelio de Souza (1) (0)
27/07/2015
Fala Thiengo blz? Parabéns pelos vídeos! Deu tudo certo aqui. Só que em minha app tenho uma view com o AdMob, tentei colocar ela abaixo  do ViewPager, mas ao rodar a app, o AdMob fica sobreposto ao ViewPager, então coloquei um paddingBottom na ViewPager, mas feito isso a ToolBar não esconde ao rolar o Scrow pra baixo. Alguma dica que possa me ajudar? Abraços!
Responder
Vinícius Thiengo (1) (0)
28/07/2015
Fala Aricelio, blz sim.
Utilize no android:layout_height do ViewPager o valor "0dp" e então ainda no ViewPager acrescente o atributo android:layout_weight="1", provavelmente vai funcionar sem problemas, veja e diga depois. Abraço
Responder
Aricelio de Souza (1) (0)
28/07/2015
Fala Thiengo, blz? Infelizmente não funcionou :/ Será que tem alguma maneira de eu especificar, para o ViewPager ficar acima do AdMob? Uso bastante isso  com o RelativeLayout, mas com o CoordinatorLayout não da certo pois ele é um FrameLayout. Segue meu código abaixo, desde já agradeço. Abraços.
http://schemas.android.com/apk/res/android "
    xmlns:ads="http://schemas.android.com/apk/res-auto "
    xmlns:app="http://schemas.android.com/apk/res-auto "
    xmlns:tools="http://schemas.android.com/tools "
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/md_white_1000"
    tools:context="br.com.teampo.projectolympics.Presentation.ProgramacaoActivity">

    

        

        
        

        

    


    

    
    



Responder
Vinícius Thiengo (1) (0)
30/07/2015
Fala Aricelio, blz sim.
Vc pode colocar o tag do AdMob dentro dos layouts dos fragments que serão carregados no ViewPager. Outra opção é utilizar um LinearLayout orientation="vertical" como sendo o container do ViewPager e do AdMob, dessa forma apenas acerte o android:layout_height do ViewPager para ter valor 0dp ao invés de match_parent, pois está utilizando o android:layout_weight="1". Essa ultima forma vc terá de fazer testes com o atributo app:layout_behavior="@string/appbar_scrolling_view_behavior" alternando entre o LinearLayout e o ViewpAger para ver em qual o layout vai responder corretamente. Se mesmo com essas opções não funcionar volte ae. Abraço
Responder
Aricelio de Souza (1) (0)
30/07/2015
Fala Thiengo blz?
Então, tentei colocar o AdMob em uma das Fragments, mas não deu certo. Dessa maneira o efeito de esconder a Toolbar só funcionava nas outras Fragments e o AdMob só aparecia se eu escondesse a Toolbar em uma das outras Fragments e voltasse para a fragment que continha o AdMob. Também tentei colocar o ViewPager e o AdMob dentro de um LinearLayout, mas dessa forma   só o conteúdo do ViewPager e o AdMob eram mostrados, a ToolBar a SlidingTab não eram mostradas. Tentei também, dividir a tela colocando a Toolbar e a SlidingTab em um LinearLayout e o ViewPager e o AdMob em outro LinearLayout, mas também não obtive sucesso.  Alguma dica de como posso resolver esse problema? Desde já agradeço! Abraços
Responder
Vinícius Thiengo (0) (0)
31/07/2015
Aricelio, o fragment tem o layout dele que é carregado no ViewPager, esse que está no mesmo layout que o Toolbar, digo, o layout do Coordinator, correto. O AdMob deve vir dentro do layout do Fragment, na verdade vc terá de coloca-lo, o tag do AdMob, dentro de um XML separado para depois apenas dar apenas um include nos layouts dos fragments. Dessa forma não deveria afetar nem o toolbar nem o Viewpager, pois seria como se estivesse apenas acrescentando uma nova View. Lembrando que o código Java do AdMob ainda teria de ser carregado em algum método do ciclo de vida dos fragments (até o onResumo). Fez assim com o teste com os fragments? Abraço
Responder
Dario Mahalambe (1) (0)
19/06/2015
Oi thiengo  , estou tendo um erro, quando eu ponho
    compile 'com.android.support:design:22.2.0' no gradle da um erro
Error:(1) Attribute "rippleColor" has already been defined

e nao reconhece a classe R em tadas minha sclasse como
posso resolver?
Responder
Vinícius Thiengo (0) (0)
19/06/2015
Fala Dario, blz?
Quando vc remove a linha do design support ele roda ok? Se possível atualize seu Android Studio se houver alguma atualização pendente e comente a linha:

compile 'com.android.support:support-v4:22.2.0'

de seu gradle, pois com o design support adicionado o support-v4 já vem junto. Se mesmo assim não rodar volte ae. Abraço
Responder
Alessandro Ceron (1) (0)
12/06/2015
Blz Thiengo, Parabéns pelo vídeo. Cara, tu tem alguma implementação do search na toolbar que possa me indicar? Estou migrando da action bar pra toolbar, encontrei algumas, mas queria algo mais simples pra mudar o menos possível. Parabéns novamente, abraço
Responder
Vinícius Thiengo (1) (0)
13/06/2015
Fala Alessandro, blz
Tutorial completo com Toolbar e SearchView não tenho para indicar, mas encontrei essa discussão no Stack (http://stackoverflow.com/questions/27378981/how-to-use-searchview-in-toolbar-android ), ve se lhe ajuda. Quando implementei a da APP do Blog utilizei mt a implementação da documentação para me guiar (http://developer.android.com/guide/topics/search/index.html ). Abraço
Responder
Alessandro Ceron (2) (0)
13/06/2015
Obrigado pela ajuda, vou dar uma olhada. Abraço
Responder
Wellington Gomes (4) (0)
10/06/2015
O único cara no Brasil q fala de material design com qualidade.
vlw pela força
Responder
Bruno Massa (3) (0)
09/06/2015
Thiengo da para fazer isso com fragments? é que não estou conseguir fazer isso na minha app obrigado.
Responder
Vinícius Thiengo (1) (0)
09/06/2015
Fala Bruno, blz?
Não testei, mas tendo em mente que é possível acessar as entidades da necessárias Activity dentro do fragment, não vejo pq não, porém vc precisará colocar o layout do fragment dentro de algum container do layout da Activity, ai que não sei se ficaria legal esse aninhamento tendo ainda o CoordinatorLayout dentro de algum outro layout, mas é aquilo, não fiz esses testes, teste ai e ve se vai sem problemas. Abraço
Responder
Bruno Massa (1) (0)
09/06/2015
Valeu obrigado.
Responder
Levi Saturnino (1) (0)
14/06/2015
Bruno, é bom passar o erro do motivo que você não esta conseguindo, pq nunca tive problema em converter activity em fragment.
Responder
15/06/2015
não é converter activity em fragment mas sim fazer a toolbar desaparecer quando faço scroll no fragment.
Responder
Marcelo Marim (1) (0)
08/06/2015
Thiengo, parabens! Essa serie sobre Material Design esta simplesmente sensacional
Responder