Material Design: Como aprimorar seus Aplicativos Android

Este artigo demonstra como utilizar a biblioteca de suporte Design para criar uma aplicaç�o com uma apar�ncia moderna e que segue as recomendaç�es do Material Design. Começamos com uma explicaç�o do que � o Material Design e os principais componentes que a biblioteca de design prov�. Voc� tamb�m aprender� como integrar essa biblioteca em seu projeto, como adicionar um Navigation Drawer, Floating Action Button ou Collapsing Toolbar em sua app e, finalmente, como integrar esses componentes para ter uma aplicaç�o que salte aos olhos de seus usu�rios.

A biblioteca de suporte denominada Design faz parte de um conjunto de recursos disponibilizado pelo Google para o Android que objetiva facilitar o uso de elementos introduzidos na vers�o Lollipop baseados no Material Design. Ela prov� implementaç�es de elementos como a Snackbar e o Floating Action Button (FAB).

Saiba mais: Curso - Iniciando o desenvolvimento com Android

Material Design � um conjunto de recomendaç�es e especificaç�es para guiar o design de seu produto para que ele tenha uma linguagem visual com elementos que simulam um �material�. O �material� � uma met�fora para algo que possui uma superf�cie, bordas e profundidade, mas tamb�m � flex�vel sem quebrar as leis da f�sica. Os fundamentos do design �impresso�, como tipografia, espaço, escala, cor e imagens, devem guiar o aspecto visual do produto. Esses elementos devem criar uma hierarquia, ter um sentido e atrair o foco do usu�rio para o que � importante.

A movimentaç�o dos objetos, a forma como eles se movimentam e as animaç�es s�o aspectos muito importantes no material design. O movimento deve ser flu�do e cont�nuo, sem mudanças s�bitas e de uma forma coordenada com os outros objetos da tela. Objetos n�o devem aparecer ou desaparecer subitamente e devem sempre reagir �s aç�es do usu�rio.

Material Design no Android

Apesar do Material Design ser gen�rico e se aplicar a qualquer tecnologia, ele teve sua origem e se popularizou no Android. Com o lançamento da vers�o Lollipop, a Google remodelou a interface gr�fica de sua plataforma para implementar os conceitos do Material Design e tamb�m atualizou suas principais aplicaç�es para seguir essa nova linguagem de design.

Novos elementos e animaç�es foram introduzidos na API do Android para facilitar a implementaç�o, por�m eles s� estavam dispon�veis no Lollipop, sem uma implementaç�o compat�vel com vers�es anteriores do sistema operacional. Devido � dificuldade de implementar os novos elementos de uma forma retrocompat�vel, a ades�o ao Material Design foi muito lenta no in�cio. Para acelerar esse processo e tornar a implementaç�o consistente entre as vers�es do Android, o Google lançou em 2015 a biblioteca de suporte Design.

Aprenda mais sobre Android

A biblioteca de suporte

A biblioteca de suporte Design foi criada para facilitar a criaç�o de aplicaç�es que utilizam componentes e comportamentos caracter�sticos do Material Design de uma forma compat�vel com vers�es do Android 2.1 e superiores (API 7+). Com ela podemos usar componentes como Snackbar ou FAB sem precisar se preocupar (muito) com usu�rios em vers�es mais antigas do Android pois todo o trabalho j� foi feito pela Google.

A seguir iremos apresentar quais componentes s�o disponibilizados e quando utilizar cada um deles. Depois dessa apresentaç�o iremos colocar a m�o na massa e criar uma aplicaç�o de exemplo que demonstra e integra todos os componentes.

Floating Action Button

O famoso FAB (Figura 1) � um dos elementos mais caracter�sticos do Lollipop e do Material Design. Ele deve ser utilizado quando h� uma aç�o prim�ria com alta chance de ser utilizada em uma tela. � um bot�o redondo �flutuante� que faz uma sombra no �material� abaixo.

Figura 1. Floating Action Button

Snackbar

A Snackbar (Figura 2) � uma evoluç�o do Toast e tem algumas funç�es a mais. Al�m de mostrar uma notificaç�o rapidamente na tela sobre os outros componentes, ela pode ser dispensada com um swipe e pode tamb�m ter at� dois bot�es com aç�es.

Figura 2. Snackbar

Label flutuante para caixa de texto

O TextInputLayout (Figura 3) � usado em conjunto com um EditText para mostrar um hint quando a caixa de texto n�o cont�m o foco e um label acima da caixa de texto quando ela ganha o foco. Isso faz com que o usu�rio sempre veja para que serve aquela caixa de texto e n�o perca o contexto quando ela � ativada. A transiç�o de hint para label acontece com uma animaç�o.

Figura 3. TextInputLayout

Navigation View

Esse componente (Figura 4) facilita muito a implementaç�o da interface de navegaç�o, que � acessada atrav�s do bot�o no canto esquerdo da action bar. Os itens de navegaç�o s�o declarados usando o mesmo formato de um menu e podem conter grupos e um cabeçalho.

Figura 4. Navigation View

Abas

Abas (Figura 5) n�o s�o novas no Android, mas esse componente da biblioteca de Design torna muito simples a implementaç�o de um layout com abas que possuem um tamanho fixo ou indeterminado com rolagem horizontal.

Figura 5. Abas

Coordinator layout

O CoordinatorLayout � um ViewGroup que prov� um maior controle e coordenaç�o das views em um layout. Ele � utilizado por outros componentes da biblioteca para coordenar a movimentaç�o de componentes. Por exemplo, um FAB que est� inserido em um CoordinatorLayout ir� se movimentar para cima quando um Snackbar for exibido na tela para que um n�o sobreponha o outro (Figura 6).

Figura 6. Coordinator layout

AppBarLayout

Esse componente � um LinearLayout vertical que implementa comportamentos de scrolling em conjunto com a toolbar. Ele depende do CoordinatorLayout para a maioria de suas funç�es e deve ser utilizado como um filho direto dele. Os filhos desse layout devem definir o comportamento do scroll com a propriedade app:layout_scrollFlags.

Collapsing toolbar

Esse componente � utilizado em conjunto com o AppBarLayout e uma toolbar e implementa um cabeçalho, normalmente contendo uma imagem (Figura 7), que diminui de tamanho quando o usu�rio faz scroll at� sobrar somente uma toolbar.

Figura 7. Collapsing toolbar

Construindo uma aplicaç�o com a biblioteca de Design

Para demonstrar a capacidade da biblioteca de Design em simplificar a implementaç�o de uma app que utiliza o Material Design e � retrocompat�vel, vamos criar uma aplicaç�o �bloco de notas�, onde voc� poder� adicionar notas com um t�tulo, uma imagem e um texto livre. Voc� tamb�m poder� marcar suas notas preferidas como favoritas e elas ser�o exibidas em uma lista de favoritos.

Nosso layout ir� incluir uma tela principal com duas abas, a primeira com uma lista de notas em ordem de criaç�o e a segunda com as notas marcadas como favoritas. Tamb�m teremos um FAB no canto inferior direito para criar novas notas. Ao tocar uma nota, a tela de detalhes dessa nota ser� aberta, onde ser� exibida a imagem da nota em uma Collapsing Toolbar, o t�tulo e o corpo da nota. Tamb�m teremos um FAB para marcar essa nota como favorita.

Ao tocar o FAB na tela principal, o usu�rio ser� levado para a tela de criaç�o de notas onde ser�o exibidos TextInputLayouts para a entrada dos dados. Um bot�o para salvar a nota ser� exibido embaixo dos campos para entrada de dados e, quando tocado, ir� salvar a nota e retornar para a tela principal. Ao fazer isso, ser� exibida uma Snackbar confirmando o salvamento e contendo uma aç�o �Favoritar�, que poder� ser utilizada para adicionar a nota rapidamente aos favoritos. A exibiç�o da Snackbar dever� �empurrar� o FAB para cima, pois ele estar� inserido em um CoordinatorLayout.

Al�m disso, o usu�rio poder� acessar o menu de navegaç�o atrav�s do bot�o home no canto esquerdo da toolbar na tela principal. Esse menu de navegaç�o ir� exibir um cabeçalho com o nome do usu�rio e duas opç�es de navegaç�o: Principal e Prefer�ncias. Confira na Figura 8 o layout final das telas.

Figura 8. Telas da aplicaç�o

Criando o projeto

Vamos começar nossa aplicaç�o criando um novo projeto com uma Activity vazia no Android Studio. Isso ir� criar o esqueleto de nossa aplicaç�o. A primeira alteraç�o que faremos ser� adicionar a biblioteca de design como uma depend�ncia no arquivo de build do projeto, como na Listagem 1.

Nota: Existem outras opç�es no menu de criaç�o de projeto onde podem ser criadas aplicaç�es que j� incluem automaticamente um menu de navegaç�o e um FAB. N�s vamos utilizar uma aplicaç�o vazia para fins did�ticos e para que voc� saiba como adicionar os componentes em uma aplicaç�o j� existente.


[...]
  dependencies {
      compile "com.android.support:appcompat-v7:23.1.1"
      compile "com.android.support:design:23.1.1"
      compile "com.android.support:support-v4:23.1.1"
      [...]
  }

Listagem 1. Adicionando a depend�ncia no arquivo de build

A segunda coisa que faremos ser� criar um arquivo de estilos onde definiremos o tema e as cores principais de nossa aplicaç�o. Essas propriedades fazem parte da biblioteca appcompate s�o essenciais para que nossa aplicaç�o tenha uma boa apar�ncia. A biblioteca appcompat faz parte do conjunto de bibliotecas de suporte e prov� funcionalidades e componentes adicionados nas vers�es Ice Cream Sandwich e superiores para vers�es anteriores do Android. Uma das principais funcionalidades que ela prov� � colorir automaticamente os componentes do Android com as cores de sua aplicaç�o. Para que a biblioteca consiga fazer isso, iremos alterar o arquivo styles.xml dentro da pasta res/values para definir essas cores, conforme apresentado na Listagem 2.


<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>

  <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
  <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Listagem 2. Definindo o tema da aplicaç�o

Com esse arquivo de estilos definimos o tema principal de nossa aplicaç�o (Theme.AppCompat.Light.DarkActionBar), suas cores principais (colorPrimary, colorPrimaryDark e colorAccent), que n�o usaremos a action bar do sistema (windowActionBar) e que n�o usaremos um t�tulo do sistema (windowNoTitle). Os estilos AppTheme.AppBarOverlay e AppTheme.PopupOverlay ser�o utilizados nos passos futuros para definir as cores de nossa toolbar e do menu de overlay.

Criando a tela principal com o menu de navegaç�o

Agora podemos começar a utilizar os componentes da biblioteca, e o primeiro que vamos adicionar � o menu de navegaç�o. Iremos substituir o conte�do do arquivo de layout activity_main.xml criado juntamente com o projeto por um DrawerLayout contendo um NavigationView, como pode ser visto na Listagem 3. O DrawerLayout ter� a funç�o de "esconder" a NavigationView no canto esquerdo e permitir que ela seja exibida com um swipe a partir da borda esquerda.


<android.support.v4.widget.DrawerLayout xmlns:android="
http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/drawer_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:openDrawer="start">
   <!-- incluiremos aqui o layout com toolbar no futuro -->
   <include
       layout="@layout/app_bar_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   <android.support.design.widget.NavigationView
       android:id="@+id/nav_view"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       android:fitsSystemWindows="true"
       app:headerLayout="@layout/nav_header_main"
       app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

Listagem 3. Tela principal com menu de navegaç�o

Configuramos o DrawerLayout com a flag fitsSystemWindows="true", que far� com que esse componente n�o entre em conflito com a status bar ou a navigation bar, ajustando seu padding automaticamente. Tamb�m configuramos a posiç�o do nosso menu com tools:openDrawer="start", que o colocar� no canto esquerdo para l�nguas escritas da esquerda para direita e no canto direto caso contr�rio.

Tamb�m inclu�mos o app_bar_layout,que conter� nossa toolbar e ser� definido nas pr�ximas etapas, e o componente NavigationView, que possui as propriedades fitsSystemWindows="true", explicada anteriormente,e android:layout_gravity="start",que posicionar� os itens do menu da mesma maneira que o DrawerLayout. Al�m disso, temos duas propriedades que precisamos configurar: app:headerLayout, onde definiremos o layout do cabeçalho, e app:menu, onde definiremos os itens de navegaç�o.

Vamos começar pelo mais simples, o menu. Para isso, criamos um novo diret�rio na pasta res chamado menu e, dentro desse diret�rio, criamos nosso arquivo activity_main_drawer.xml. Dentro desse arquivo teremos um grupo, em que somente um dos itens poder� estar selecionado, e nossos dois itens de navegaç�o. O resultado final pode ser visto na Listagem 4.


<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_principal"
        android:icon="@android:drawable/ic_menu_agenda"
        android:title="@string/nav_principal" />
    <item
        android:id="@+id/nav_preferencias"
        android:icon="@android:drawable/ic_menu_preferences"
        android:title="@string/nav_preferencias" />
  </group>
</menu>

Listagem 4. Menu de navegaç�o

A seguir faremos com que nossa Activity receba os eventos de navegaç�o. Para isso, faremos com que ela implemente a interface NavigationView.OnNavigationItemSelectedListener e, quando receber um evento de navegaç�o, crie e exiba na tela o Fragment correspondente �quele item. Tamb�m iremos inicializar a Toolbar como nossa ActionBar e ligar o bot�o de home ao componente NavigationView. A Listagem 5 cont�m o c�digo atual da MainActivity.


public class MainActivity extends AppCompatActivity
      implements NavigationView.OnNavigationItemSelectedListener {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
      navigationView.setNavigationItemSelectedListener(this);
  }
  @Override
  public boolean onNavigationItemSelected(MenuItem item) {
      // Trate os eventos de navegaç�o aqui

      DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
      drawer.closeDrawer(GravityCompat.START);

      return true;
  }
}

Listagem 5. MainActivity implementando OnNavigationItemSelectedListener

O m�todo setNavigationItemSelectedListener do componente NavigationView far� com que a MainActivity receba um evento quando o usu�rio selecionar um dos itens do menu. Esse evento chamar� o m�todo onNavigationItemSelected onde devemos tratar esse evento e fechar o menu de navegaç�o com o m�todo closeDrawer(GravityCompat.START). A constante GravityCompat.START � necess�ria para indicar qual das posiç�es do DrawerLayout dever� ser fechada pois � poss�vel adicionar um menu em mais de uma posiç�o.

Para completar nossa implementaç�o do menu de navegaç�o, iremos criar o layout do cabeçalho. Para isso criamos um novo arquivo no diret�rio layout dentro de res/layout com o nome nav_header_main.xml. Esse arquivo definir� um layout simples com a cor prim�ria da app como background, uma imagem de perfil e o nome do usu�rio, conforme apresentado na Listagem 6.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="160dp"
  android:background="@color/colorPrimary"
  android:padding="16dp"
  android:gravity="bottom"
  android:orientation="vertical">
  <ImageView
      android:id="@+id/imageView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/sym_def_app_icon" />
  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingTop="16dp"
      android:text="@string/nome_usuario" />
</LinearLayout>

Listagem 6. Cabeçalho do menu de navegaç�o

Agora temos um menu de navegaç�o que pode ser acessado com um swipe da borda esquerda da tela. Para adicionar mais itens ao menu, precisamos somente adicionar mais um item ao arquivo activity_main_drawer.xml e ele ser� automaticamente exibido. Por�m, ainda precisamos definir o app_bar_layout que inclu�mos no layout principal da MainActivity, que ter� uma toolbar com um bot�o para acessar o menu.

AppBarLayout

Para que possamos adicionar efeitos de scrolling � nossa toolbar, vamos cri�-la dentro de um AppBarLayout no arquivo app_bar_layout.xml que inclu�mos no layout da activity. Como falamos anteriormente, o AppBarLayout deve estar contido em um CoordinatorLayout, como podemos ver na Listagem 7.


<android.support.design.widget.CoordinatorLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/AppTheme.AppBarOverlay">
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
  </android.support.design.widget.AppBarLayout>

  <!-- aqui ser� inserido nossos fragments do menu -->
  <FrameLayout
      android:id="@+id/activity_main_conteudo"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Listagem 7. Toolbar dentro de AppBarLayout dentro de CoordinatorLayout

Al�m do AppBarLayout, temos um FrameLayout no qual nos pr�ximos passos incluiremos o fragmento principal da aplicaç�o. Agora que temos uma toolbar, podemos exibir o bot�o do menu de navegaç�o utilizando um ActionBarDrawerToggle,que ser� exibido na Toolbar e acionar� o menu de navegaç�o quando tocado. As alteraç�es na MainActivity est�o destacadas na Listagem 8. Isso tornar� nosso menu mais vis�vel e de f�cil acesso na tela principal. A seguir criaremos a tela principal com as abas de Notas e Favoritos.

Saiba mais: Activity Android: Criando e Registrando Acivitys


protected void onCreate(Bundle savedInstanceState) {
[...]
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
    this, drawer, toolbar, R.string.navigation_drawer_open, 
    R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
}

Listagem 8. Exibindo o bot�o do menu na toolbar

Nota: Fique atento aos imports dos componentes da biblioteca de suporte, pois alguns deles possuem o mesmo nome que os componentes nativos. Por exemplo, devemos importar a classe android.support.v7.widget.Toolbar da biblioteca de suporte ao inv�s da classe android.widget.Toolbar nativa do Android.

Abas

Nossas abas ficar�o no fragmento principal, que ser� ativado quando o usu�rio abrir a aplicaç�o ou quando selecionar o item �Principal� no menu de navegaç�o. Criaremos um layout simples para esse fragmento com um LinearLayout contendo o TabLayout e um FrameLayout que exibir� o fragmento selecionado nas abas (�Notas� ou �Favoritos�).

O c�digo Java para o fragmento tamb�m ser� muito simples, iremos criar as abas e adicionar um listener para quando elas forem selecionadas. As Listagens 9 e 10 mostram como fica o c�digo do layout (res/layout/fragment_principal.xml) e Java (PrincipalFragment.java) do fragmento principal. O TabLayout possui duas propriedades principais que podem ser ajustadas para que se tenha o visual e comportamento desejado. O tabMode pode ser fixed, para mostrar todas as abas ao mesmo tempo, ou scrollable, que mostra uma lista rol�vel de abas. A primeira opç�o � indicada para quando se tem poucas abas, e a segunda para quando se tem muitas ou uma quantidade indefinida de abas. O par�metro tabGravity define se as abas ocupar�o todo o espaço dispon�vel para elas (fill) ou se ser�o centralizadas (center).

Saiba mais: Cursos de Java


<LinearLayout 
  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"
  android:orientation="vertical">
  <android.support.design.widget.TabLayout
      android:id="@+id/fragment_principal_tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:theme="@style/ThemeOverlay.AppCompat.Dark"
      app:tabMode="fixed"
      app:tabGravity="fill"/>
  <FrameLayout
      android:id="@+id/fragment_principal_conteudo"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>

Listagem 9. Layout com abas

Note na Listagem 9 que, al�m do TabLayout, temos um FrameLayout (id/fragment_principal_conteudo) que deve conter o fragmento a ser exibido na aba selecionada. Com o fragmento principal criado, podemos alterar a MainActivity para exibi-lo quando a aplicaç�o for iniciada e quando o item do menu for acionado.

Na Listagem 10 s�o criadas duas abas utilizando o m�todo newTab da classe TabLayout e definimos o t�tulo de cada aba com o m�todo setText. Atrav�s do m�todo addTab as novas abas s�o adicionadas ao layout. Para que possamos exibir o fragmento que preencher� cada aba, adicionamos um listener para que esse fragmento seja criado e exibido quando o m�todo onTabSelected for chamado.


public class PrincipalFragment extends Fragment {
  public static PrincipalFragment newInstance() {
      return new PrincipalFragment();
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
                           Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_principal, container, false);
  }

  @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
      super.onViewCreated(view, savedInstanceState);

      TabLayout tabLayout = (TabLayout) view.findViewById(R.id.fragment_principal_tab_layout);
      tabLayout.addTab(tabLayout.newTab().setText(R.string.notas));
      tabLayout.addTab(tabLayout.newTab().setText(R.string.favoritos));

      tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
          @Override
          public void onTabSelected(TabLayout.Tab tab) {
              // TODO: criar e exibir o fragmento selecionado
          }

          @Override
          public void onTabUnselected(TabLayout.Tab tab) { }

          @Override
          public void onTabReselected(TabLayout.Tab tab) { }
      });
  }
}

Listagem 10. Criando abas e adicionando listener

A Listagem 11 destaca os pontos que precisam ser adicionados na MainActivity para que o fragmento principal seja exibido. O c�digo adicionado ao m�todo onCreate ir� exibir o fragmento quando a Activity for iniciada sem um estado pr�vio. J� o c�digo adicionado ao m�todo onNavigationItemSelected ir� exibir o fragmento quando o usu�rio o selecionar atrav�s do menu de navegaç�o. Com essas alteraç�es, nossa aplicaç�o deve exibir duas abas quando iniciada. O pr�ximo passo ser� exibir um FAB para que o usu�rio possa adicionar uma nota.


[...]

@Override 
protected void onCreate(Bundle savedInstanceState) {
    [...]

    if (savedInstanceState == null) {
        navigationView.setCheckedItem(R.id.nav_principal);
        exibirFragmentPrincipal();

    }
}

@Override
public boolean onNavigationItemSelected(MenuItem item) {
    [...]

    switch (item.getItemId()) {
        case R.id.nav_principal:
            exibirFragmentPrincipal();
            break;
        case R.id.nav_preferencias:
            // TODO: criar e exibir fragment de prefer�ncias
            break;
    }


    [...]
}

private void exibirFragmentPrincipal() {
    Fragment novoFragment = PrincipalFragment.newInstance();
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.activity_main_conteudo, novoFragment)
            .commit();
}

Listagem 11. Exibindo o fragmento principal na MainActivity

FAB

Adicionaremos o FAB no app_bar_layout pois queremos que ele seja um filho direto do CoordinatorLayout para que reaja � exibiç�o de uma Snackbar. Para isso, iremos alterar o layout e adicionar o FAB flutuando no canto inferior direito. No c�digo Java da activity iremos adicionar um listener para o bot�o que ir� iniciar a activity para adicionar uma nota. As alteraç�es podem ser vistas nas Listagens 12 e 13. O pr�ximo passo ser� implementar a activity para criaç�o de notas (AdicionarNotaActivity.java), onde utilizaremos o componente TextInputLayout.


<android.support.design.widget.CoordinatorLayout
  [...]
  
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:layout_gravity="bottom|end"
      android:src="@android:drawable/ic_menu_edit" />
</android.support.design.widget.CoordinatorLayout>

Listagem 12. FAB no app_bar_layout


[...]
protected void onCreate(Bundle savedInstanceState) {
    [...]
    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(MainActivity.this, AdicionarNotaActivity.class);
            startActivityForResult(intent, 0);

        }
    });
}

Listagem 13. Adicionando listener no FAB

Nota: Sempre teste o layout de sua aplicaç�o no maior n�mero de vers�es do Android que voc� tenha acesso. Apesar das bibliotecas de suporte facilitarem muito a integraç�o de funcionalidades antes restritas �s novas vers�es, ainda existem inconsist�ncias que precisam ser tratadas pelo desenvolvedor. No caso do FAB, as diferenças na implementaç�o entre as vers�es fazem com que as margens sejam tratadas de forma diferente. Voc� provavelmente precisar� definir um valor de margem para vers�es at� Lollipop e outro valor de Lollipop em diante.

Editando texto com TextInputLayout

A activity para adiç�o de notas � bem simples e consiste apenas de dois EditTexts envoltos por TextInputLayouts, para adicionar o t�tulo e o corpo da nota, e um bot�o para adicionar uma imagem, al�m de um AppBarLayout. Teremos tamb�m um bot�o para salvar e um para cancelar. O bot�o �Adicionar Imagem� foi adicionado somente para manter a l�gica do programa, contudo sua l�gica n�o foi implementada.

O c�digo Java ir� salvar os dados entrados pelo usu�rio e retornar � activity principal quando o usu�rio tocar o bot�o de salvar. Os detalhes de como armazenar as notas fogem do escopo desse artigo e n�o ser�o exibidos. As Listagens 14 e 15 mostram o arquivo de layout utilizando TextInputLayout e o c�digo Java, respectivamente.


<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"
  android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/AppTheme.AppBarOverlay">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:popupTheme="@style/AppTheme.PopupOverlay" />
  </android.support.design.widget.AppBarLayout>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:padding="16dp"
      android:orientation="vertical"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">
      <android.support.design.widget.TextInputLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
          <EditText
              android:id="@+id/activity_adicionar_nota_titulo"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="text|textCapSentences"
              android:maxLines="1"
              android:hint="@string/titulo"/>
      </android.support.design.widget.TextInputLayout>

      <android.support.design.widget.TextInputLayout
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:layout_marginTop="8dp">
          <EditText
              android:id="@+id/activity_adicionar_nota_texto"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="text|textCapSentences|textMultiLine"
              android:hint="@string/texto_da_nota"/>
      </android.support.design.widget.TextInputLayout>

      <Button
          android:id="@+id/button_adicionar_imagem"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="8dp"
          android:text="@string/adicionar_imagem"/>

      <Button
          android:id="@+id/button_salvar"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="8dp"
          android:text="@string/salvar"/>

      <Button
          android:id="@+id/button_adicionar_cancelar"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="8dp"
          android:text="@string/cancelar"/>
  </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Listagem 14. Layout da activity para adiç�o de notas com TextInputLayout (activity_adicionar_nota.xml)


public class AdicionarNotaActivity extends AppCompatActivity {
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_adicionar_nota);
          Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
          setSupportActionBar(toolbar);
   
          Button salvarButton = (Button) findViewById(R.id.button_salvar);
          Button cancelarButton = (Button) findViewById(R.id.button_adicionar_cancelar);
          salvarButton.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  salvarNota();
              }
          });
          cancelarButton.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  cancelarNota();
              }
          });
      }
   
      private void cancelarNota() {
          setResult(RESULT_CANCELED);
          finish();
      }
   
      private void salvarNota() {
          salvarNotaNoRepositorio();
   
          recolherTeclado();
   
          setResult(RESULT_OK);
          finish();
      }
   
      [...]
  }

Listagem 15. A classe AdicionarNotaActivity

Os EditTexts exibir�o o hint quando n�o tiverem o foco e passar�o a exibir um label acima da caixa de texto quando ganharem o foco. Caso sua l�gica de neg�cio necessite validar esses campos, voc� pode usar o m�todo setError() para adicionar uma mensagem de erro � caixa de texto. Quando o usu�rio tocar o bot�o de salvar, a activity principal receber� a notificaç�o do resultado da activity de adiç�o de notas e exibir� um Snackbar caso a nota tenha sido salva, como na Listagem 16.

O componente Snackbar tem uma interface similar ao Toast,utilizando o padr�o de projeto builder para construir e configurar uma snackbar e, finalmente, o m�todo show() para exibi-la. A principal diferença do Toast � a possibilidade de configurar uma aç�o com o m�todo setAction, como fizemos na Listagem 16. A seguir vamos implementar a tela de detalhe de uma nota.


@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  if (resultCode == RESULT_OK) {
      Snackbar.make(findViewById(R.id.activity_main_conteudo), 
      R.string.nota_salva, Snackbar.LENGTH_LONG)
      .setAction(R.string.favoritar, new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              // TODO: favoritar nota na base de dados
          }
      })
      .show();
  }
}

Listagem 16. Exibindo o Snackbar

Tela de detalhe

Em cada uma das abas da tela principal ser� exibida uma lista com as notas cadastradas no sistema. A implementaç�o dessas listas n�o utiliza os componentes da biblioteca de design e n�o ser� abordada neste artigo. Quando o usu�rio tocar em um dos itens dessa lista, a tela DetalheActivity ser� exibida com a imagem da nota de forma destacada na toolbar. Essa imagem ser� acompanhada do t�tulo e de um FAB para adicionar a nota aos favoritos. O texto preencher� o restante da tela.

Como podemos ver na Listagem 17, temos um CoordinatorLayout como raiz do layout. Temos tamb�m um CollapsingToolbarLayout dentro de um AppBarLayout, que ser� o recipiente da imagem e do t�tulo da nota. Para que nosso texto se desloque na tela, ele � envolto por uma NestedScrollView (que possibilita a definiç�o de um ScrollView dentro do outro). Por fim, temos um FAB ancorado no canto inferior direito do AppBarLayout.

Vamos analisar alguns dos par�metros interessantes desse layout, começando pelo layout_collapseMode presente na ImageView e na Toolbar. Esse par�metro define o que acontecer� com essa view quando a tela se movimentar. Nesse caso, definimos a imagem como parallax, o que far� com que ela se movimente junto com a tela com um efeito de paralaxe, permanecendo centralizada enquanto o tamanho do AppBarLayout diminui. A toolbar � definida como pin, para que ela permaneça fixa no topo da tela.

Outro par�metro interessante � o layout_scrollFlags presente no CollapsingToolbarLayout, que recebe duas flags: scroll e exitUntilCollapsed. A primeira simplesmente declara que esse componente ir� reagir aos eventos de scroll e precisa estar presente para as outras flags terem efeito. A segunda determina que a view role na tela at� o seu tamanho m�nimo, que nesse caso � o tamanho da toolbar. Existem mais tr�s flags poss�veis:

enterAlways: a view aparece sempre que houver uma rolagem para baixo;
enterAlwaysCollapsed: a view aparece sempre que houver uma rolagem para baixo, mas com seu tamanho m�nimo;
snap: se a view estiver parcialmente vis�vel quando a rolagem terminar, ela ser� rolada completamente at� sua posiç�o final.

Nota: N�o esqueça de incluir as activities AdicionarNotaActivity e DetalheActivity no arquivo de manifest do seu projeto.


<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"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

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

        <ImageView
            android:id="@+id/detalhe_imagem"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:id="@+id/detalhe_texto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        tools:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/btn_star_big_off"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

Listagem 17. A tela de detalhe (activity_detalhe.xml)

Na DetalheActivity iremos recuperar a nota de nosso reposit�rio de notas e aplicar seu conte�do ao layout. A imagem da nota ser� inserida na ImageView dentro da CollapsingToolbar e o texto ser� inserido como t�tulo. Tamb�m adicionamos um listener ao FAB para favoritar a nota. O c�digo da DetalheActivity pode ser visto na Listagem 18.


public class DetalheActivity extends AppCompatActivity {
  private static final String EXTRA_POSITION = "POSITION";

  public static Intent getIntent(Context context, int position) {
      Intent intent = new Intent(context, DetalheActivity.class);
      intent.putExtra(EXTRA_POSITION, position);

      return intent;
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_detalhe);
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);

      getSupportActionBar().setDisplayHomeAsUpEnabled(true);

      FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
      fab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              // TODO: favoritar nota na base de dados
              Snackbar.make(view, "Nota favoritada", Snackbar.LENGTH_LONG).show();
          }
      });

      preencherDetalhes(getIntent().getIntExtra(EXTRA_POSITION, 0));
  }

  private void preencherDetalhes(int position) {
      Nota nota = recuperarNotaDaBase(position);

      ImageView imagemImageView = (ImageView) findViewById(R.id.detalhe_imagem);
      TextView textoTextView = (TextView) findViewById(R.id.detalhe_texto);

      textoTextView.setText(nota.getTexto());
      imagemImageView.setImageDrawable(nota.getImagem());

      CollapsingToolbarLayout collapsingToolbar =
              (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
      collapsingToolbar.setTitle(nota.getTitulo());
  }

  [...]
}

Listagem 18. Exibindo os detalhes da nota

Houve um tempo em que criar aplicaç�es modernas que suportam vers�es ultrapassadas do Android (mas ainda com uma grande quantidade de usu�rios) era uma grande dor de cabeça. Problemas com mudança de comportamento e indisponibilidade de APIs tornavam muito dif�cil a implementaç�o de novas funcionalidades em vers�es antigas. As bibliotecas de suporte foram criadas para consertar � ou pelo menos aliviar � esse problema, e a biblioteca de Design torna poss�vel a utilizaç�o de componentes do material design de uma forma f�cil e retrocompat�vel.

Ainda � necess�rio tomar cuidado com algumas diferenças entre as v�rias vers�es suportadas, mas o esforço vale muito a pena, pois sua app poder� entregar ao usu�rio uma experi�ncia moderna mesmo em uma plataforma ultrapassada.

Links �teis

Android Design Support Library
Material Design Specification
Material Design for Android
Material Icons
Preparando o ambiente para programar para Android: Neste curso voc� aprender� a preparar seu ambiente para programar para Android. Veremos aqui o que � necess�rio instalar e como proceder para desenvolver aplicaç�es para essa plataforma.
Tecnologias web para o seu primeiro emprego: Chegamos ao final do ano, hora de comemorar o resultado das provas finais e planejar os seus pr�ximos passos. E pra dar uma força reunimos neste DevCast algumas dicas de tecnologias que n�o podem faltar no curr�culo de um programador web.
Android Toolbar: Criando um menu superior customizado: Aprenda neste curso como customizar a barra do aplicativo de uma aplicaç�o Android, tornando-a compat�vel com o Material Design e vers�es do Android anteriores a esta linguagem visual.

Saiba mais sobre Android ;)

Linguagem Java: Neste Guia de Refer�ncia voc� encontrar� todo o conte�do que precisa para começar a programar com a linguagem Java, a sua caixa de ferramentas base para criar aplicaç�es com Java.
Guia Completa de Android: O Android � a plataforma oficial para desenvolvimento de aplicativos mobile do Google. Neste guia voc� encontrar� artigos, v�deos e cursos para aprender tudo sobre esse SDK, que domina o mundo dos dispositivos m�veis.
Carreira Programador Java: Nesse Guia de Refer�ncia voc� encontrar� o conte�do que precisa para iniciar seus estudos sobre a tecnologia Java, base para o desenvolvimento de aplicaç�es desktop, web e mobile/embarcadas.

Material Design: Aprimorando seus aplicativos Android

Este artigo demonstra como utilizar a biblioteca de suporte Design para criar uma aplicação com uma aparência moderna e que segue as recomendações do Material Design.

Material Design no Android

Aprenda mais sobre Android

A biblioteca de suporte

Floating Action Button

Snackbar

Label flutuante para caixa de texto

Navigation View

Abas

Coordinator layout

AppBarLayout

Collapsing toolbar

Construindo uma aplicaç�o com a biblioteca de Design

Criando o projeto

Criando a tela principal com o menu de navegaç�o

AppBarLayout

Abas

FAB

Editando texto com TextInputLayout

Tela de detalhe

Links �teis

Saiba mais sobre Android ;)

Artigos relacionados