Material Goodies – Utilizando o CoordinatorLayout com o Toolbar

Standard

Hello Devs,  sejam todos muito bem vindos a mais um post sobre desenvolvimento para android. Com este post, vamos começar uma serie chamada Material Goodies, em que iremos implementar aqueles pequenos detalhes do material design que tornam apps incríveis e que os utilizadores não terão outra opção senao amar:).

Durante o IO15, foi anunciada e lançada a android design support library com o intuito de facilitar a vida dos desenvolvedores ao oferecer formas simples, rápidas e práticas de implementar o material design para que sejam compatíveis as versões anteriores ao Lolipop.  Esta biblioteca veio cheia de novidades como o NavigationView  que é uma forma fácil de implementar o NavigationDrawer( Usaremos no próximo post para actualizar o post anterior sobre a support library), a SnackBar, FAB(Floating Action Button), CoordinatorLayout o componente que utilizaremos neste post dentre outros.

Começaremos o material utilizando o CoordinatorLayout, pois foi um dos primeiros componentes da design support library que utilizei no momento em que ia implementar o Details screen da segunda fase da app do nanodegree do android e o resultado foi  o seguinte:

Screenshot_20150715-203246

Screenshot_20150715-203231

Entrando ja para os detalhes de implementação irei começar por falar sobre o CoordinatorLayout. O CoordinatorLayout  é um componente introduzido no android design support library e é um layout que permite maior controle dos eventos de cliques e animações na UI isto significa que podemos controlar como cada componente na UI ira se comportar ao receber um evento de click ou scroll em relação a todos os outros componentes  na UI. Este componente pode ser usado de diferentes formas fazendo com que o limite esteja apenas na cabeça do desenvolvedor.

O primeiro passo antes de passar para o código e garantir que temos as dependências bem especificadas no nosso build.gradle do module app como vem abaixo:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:cardview-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

Para atingir o objectivo super cool das imagens acima, neste post iremos utilizar o CoordinatorLayout e a AppBar que era antigamente conhecida como ActionBar e agora é composta pela statusBar, Toolbar, Tab/Search Bar e Um Flexible Space como mostra a imagem abaixo tirada das especificações no GUIDE criado pela google(Aconselho que se de uma vista de olhos).

O link acima e as imagens não são referentes a um guide do AppBar mas sim a scrolling techniques  que explica como cada parte do AppBar se deve comportar ao fazer o scroll de forma a oferecer uma boa experiência de utilizador. Volto a aconselhar que entrem para o link e vejam os vídeos associados a cada possível técnica :).

Dado isto, o primeiro passo para criar este efeito incrivel é definir o layout como mostra abaixo:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/details_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:padding="8dp"/>

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:id="@+id/collapsingToolbar"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <include layout="@layout/layout_movie_details_header" android:id="@+id/headerLayout"
                app:layout_scrollFlags="scroll"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseParallaxMultiplier="0.7"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>


</android.support.design.widget.CoordinatorLayout>

Entrando em detalhes para o layout nesta imagem, encontramos o CoordinatorLayout como o layout mais alto da hierarquia(parent) e dentro dele temos os seguintes componentes que são de extrema importância:

  • AppBarLayout: AppBarLayout e o layout onde encontramos o toolbar e todos outros componentes bem explicados acima e referenciados ao guide de scrolling techniques. Dentro do AppBar, encontramos um CollapsingToolbarLayout que é responsável por ajudar a criar transições e animações fixes dos componentes que colocamos dentro delas quando a activity recebem eventos de scroll.

Ao CollapsingToolbarLayout e todos os componentes que queremos que se movam ao receber um evento de scroll, devemos definir o atributo layout_scrollFlags  que ira especificar como determinada view ira se comportar. As flags existentes são:

scroll: flag definida a todas as views que queremos que movam-se ao mover ao fazer scroll do conteúdo da activity.

enterAlways: flag que garante que ao fazer o scroll para baixo, a view voltara a ficar visível.

enterAlwaysCollapsed: flag que indica que a view sempre ira ser apresentada com o valor definida pelo atributo minHeight que representa a mínima altura que esta pode ter.

exitUntilCollapsed: flag que indica que ao fazer scroll do conteúdo no sentido que a view ira desaparecer, ela diminua o tamanho ate ao mínimo predefinido.

Seguindo o que esta acima, no ficheiro acima definimos as scroll flags para o CollapsibleToolbarLayout e o layout que representa o header(A imagem e o rating das figuras acima). Nota: E possivel escrever o layout do header directamente no ficheiro activity_main.xml mas por questões de performance especificamente falando da hierarquia profunda que isto causaria(possivel de ver no Hierarchy viewer) achei melhor fazer o include. A view do toolbar é a única que aparece sem o atributo do scrollFlag e por essa razão é o ultimo componente a ser colocado dentro desta hierarquia. Não temos o scroll no Toolbar porque não queremos que ele se mova e que esteja presente quando o header desaparecer no scroll. Para garantir que a toolbar fica sempre la, devemos definir o atributo layout_collapseMode=”pin”.

  • Content Container: Esta view, representada  no nosso exemplo pelo fragment, é que vai conter o conteudo que mandatoriamente deve estar dentro de um Layout com a possibilidade de fazer scroll como o RecyclerView e o NestedScrollView. Infelizmente utilizar o ListView ou GridView nao funciona para este caso e não é motivo de preocupação pois estes dois layouts podem ser implementados utilizando o RecyclerView e definindo o LayoutManager apropriado :). A este layout que ira receber o conteúdo, temos de sempre colocar a linha :
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    para informar que e desta view que estamos a espera e receber eventos de scroll.

chega a ser muito estranho ter de dizer que o essencial do post acaba aqui mas sim e exactamente isso para atingir o efeito das imagens acima não precisamos de mais código e nem mais configurações…SIMPLESMENTE SIMPLES :).

Para terminar o post e ter um exemplo funcional so nos restam duas coisas:

  1. Criar um fragment com um RecyclerView dentro a representar o conteúdo que um dia poderemos ter. gists : fragment_layout_dummy.xmlDummyFragmentlayout_dummy_card.xml
  2. Na classe da activity, preencher os dados do header(fotos e texto) e por fim colocar dinamicamente o fragment criado no FrameLayout da activity reservado ao conteúdo. Gist: MainActivity.java

Desta forma chegamos mesmo ao fim do primeiro post sobre Material Goodies e ficarei feliz em receber de voces requests de posts sobre alguma coisa incrivel do material design etc.

Espero por vocês no próximo post 🙂

Link : Código Completo

DM

Advertisements

Primeira impressão do Android LoliPop 5.0

Standard

Durante o último Google IO 2014, a google conseguiu deixar todos de olhos bem abertos com a apresentação do Material Design e do Android L. Logo após a este anúncio, tive a oportunidade de instalar o L developer Preview no Nexus 5 e utilizar ate a dias atrás. Fiquei muito entusiasmado com as novas funcionalidades do L na versão Preview mas não se comparam com a versão final Lolipop 5.0 lançada no ultimo dia 16 de Outubro juntamente com Motorola Nexus 6. Este post será em volta da impressão que tive ao utilizar o Lolipop e aqui vão os pontos que me chamaram atenção:

  • Material Design: O android Lolipop vem já com a interface seguindo os padrões do Material Design e devo dizer primeiramente que na minha opinião é a versão mais bonita e fluída que alguma vez foi lançada. O Material design no android caracteriza-se pelo seu enfoque na simplicidade, animações altamentes personalizadas que permitem as aplicações expressarem a sua marca e toque único.
  • Novo Sistema de Notifcações: O novo sistema de notificações do Lolipop é  simplesmente espantoso. Este sistema permite que as notificações sejam apresentadas no lock screeen(Foto abaixo) e  uma interacção directa sem precisar de desbloquear o Celular. Devem estar a pensar na privacidade do utilizador mas a plataforma permite mostrar só a interface publica da notificação caso o dispositivo esteja bloqueado e a outra caso o utilizador insira o PIN ou Pattern para desbloquear o celular. Outra funcionalidade muito interessante no sistema de notificações é o Heads-up notifications que apresentam as notificações de alta prioridades(chamadas) que necessitam de uma ação imediata por cima de qualquer aplicação aberta.
  • Criação de Diferentes Utilizadores: O Lolipop permite que o owner do dispositivo crie um novo utilizador que tera uma área de trabalho isolada e totalmente customizável. Quando descobri esta funcionalidade hoje fiquei boquiaberto pois a transição é bem suave e a possibilidade de poder separar áreas para trabalho e assuntos pessoais até no que diz respeitos a aplicações e todo o look and feel é simplesmente maravilhosa.
  • A Duração de Vida da Bateria: A google criou o Project Volta, um conjunto de ferramentas que permitem aos desenvolvedores monitorar o comportamento das suas apps no consumo da bateria e marcação de tarefas( como descarregar  dados da rede) de forma a utilizar de forma eficiente a carga da bateria. Ao que parece a google já está a utilizar estas ferramentas nas suas aplicações pois a performance da bateria melhorou muito.

Estas foram as minhas primeiras impressões sobre o android Lolipop e devo dizer que estou ansioso pelo que esta por vir e explorar mais as 5000 API´s novas anunciadas. 🙂
Deixe o seu comentário abaixo sobre a tua experiência ou sobre  expectativas em relação ao o que o Lolipop traz de novo.

 

Obrigado e até a próxima =)

Algumas imagens do Lolipop:

Android Lolipop

Android Lolipop

Tela de configuração de contas do dispositivo

Tela de configuração de contas do dispositivo

Aplicações recentes

Aplicações recentes