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

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

Relacionado

Material Dialog, Correção Bug StatusBar e Ações nos Fragments. Material Design Android - Parte 7Android

Sliding Tabs Toolbar, Material Design Android - Parte 8Android

SwipeRefreshLayout e Snackbar, Material Design Android - Parte 9Android

Utilizando Transitions, Material Design Android - Parte 10Android

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.

Enviar

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

Lucas (1) (0)

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

Bruno Massa (0) (0)

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