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.

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.

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.

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.

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.

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).

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.

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.

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.

Tecnologias:

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Isac Em 2016

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Marcos Sousa

N�vel 0

Fiquei com uma d�vida em rela��o a toolbar. Na aplica��o de exemplo voc� tem um arquivo toolbar.xml que � utilizado para renderizar a toolbar da activity_main.xml e da activity_adicionar_nota.xml.
Seguindo o seu exemplo estou tentando personalizar a toolbar em uma aplica��o, mais n�o estou conseguindo.
Se eu quiser fazer a toolbar semelhante a que � utilizada pelo whatsapp. Em que na tela principal aparece o nome do aplicativo e quando seleciono um contato aparece o nome do contato e outros �cones na toolbar ser� necess�rio criar uma outra toolbar ou posso utilizar a mesma toolbar?

há +1 ano

Ver coment�rio anterior

Julio Sampaio

N�vel 0

Fala Marcos!

Voc� pode recuperar os itens do toolbar.xml, por exemplo e alterar a visibilidade de acordo com a sua necessidade.

public boolean onPrepareOptionsMenu(Menu menu) { 
 MenuItem register = menu.findItem(R.id.umItemQueQueroManipular); 
 if (umaLogicaQualquer) { 
 register.setVisible(false); 
 } else { 
 register.setVisible(true); 
 } 
 return true; 
 }

De forma resumida, pode ser algo como:

 
 public boolean onPrepareOptionsMenu(Menu menu) { 
 MenuItem register = menu.findItem(R.id.umItemQueQueroManipular); 
 register.setVisible(!umaLogicaQualquer); 
 return true; 
 }

Abra�o!

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

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 ;)

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Perguntas frequentes

Nossos casos de sucesso