Android Design Support Library – FAB e Snackbar (Parte 2)

Aqui estamos novamente com mais um tutorial da biblioteca Android Design Support, dessa vez para apresentar dois outros componentes: Floating Action Button [1] (popularmente conhecido como FAB) e Snackbar [2]. Com o uso desses dois novos componentes, mais a Navigation Drawer (apresentado no post anterior [3]), você caminha para um aplicativo cada vez mais próximo de uma identidade visual voltada para o padrão Material Design [4] estabelecido pela Google.

Para os ansiosos, segue abaixo o resultado

Figura 1 - FAB e Snackbar em ação
Figura 1 – FAB e Snackbar em ação

Pré-requisito

  • Android Studio
  • Um Smartphone Android ou um AVD (Android Virtual Device) para testar o projeto.

O código deste projeto já está compartilhado no GitHub [5]. Dentro do projeto há inúmeros arquivos. Não vou entrar no mérito de explicar todos os arquivos, pois o foco é apenas no FAB e na Snackbar.

Adicionar dependência

Bem, se você possui alguma experiência com desenvolvimento, sabe que quando precisamos utilizar uma biblioteca em um projeto, é necessário adicionar uma nova dependência ao projeto. O Android utiliza o Gradle [6] para gerenciar as dependências. Sem mais delongas, altere o arquivo build.gradle (do módulo) incluindo a linha abaixo em dependencies

compile 'com.android.support:design:23.2.1'

Floating Action Button (FAB)

O FAB é um componente oriundo do Material Design que tem como objetivo fornecer um acesso rápido a principal funcionalidade do aplicativo. É fácil reconhecer um FAB em uma interface: um botão circular com um ícone dentro representando a ação, comumente localizado no canto inferior direito da tela, visivelmente sobressaindo à interface. Do Material Design, esse é um dos componentes mais utilizado. Na figura 2 podemos ver 3 exemplos.

Aplicativos Inbox, Sheets e Google+ utilizando FAB (canto inferior direito)
Figura 2 – Aplicativos Inbox, Sheets e Google+ utilizando FAB (canto inferior direito)

A implementação é bastante simples, uma vez que a biblioteca esteja importada, é só incluir no XML o trecho abaixo:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_input_add"
    android:tint="@android:color/white"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin" />

Entendendo o código acima

  • O componente está sendo buscando da biblioteca, como podemos ver com o código android.support.design.widget.FloatingActionButton.
  • Logo em seguida, definimos um id, que mais pra frente utilizaremos no Java.
  • O valor do width e do height vai como wrap content para utilizar apenas o espaço necessário pelos componentes internos.
  • Em src estamos colocando a imagem que irá dentro do FAB, no caso, um botão de soma (que está localizado nas imagens nativas do Android).
  • A propriedade tint define a cor do botão dentro da FAB, que neste caso, é a cor branca.
  • Estamos também definindo que a posição do botão é no canto inferior direito ao incluir os valores bottom e end na propriedade layout gravity.
  • Para finalizar, estamos definindo a margem do FAB com uma variável que está definida no arquivo /values/dimens.xml com o valor 16p.

Com o uso da biblioteca, o comportamento da interação entre FAB e Snackbar (próximo tópico) já vem implementado nativamente. É possível incluir mais comportamentos no FAB, mas vamos deixar isso para um futuro post.

Snackbar

Snackbar é outro componente do Material Design que veio para ser uma alternativa mais completa às mensagens Toast  [7]. Em suma, Snackbar é um componente para apresentar feedback para usuário sobre determinada operação que ele realizou. Caso não se lembre das mensagens Toast, segue abaixo na Figura 3 um exemplo.

Figura 2 - Mensagem Toast
Figura 3 – Mensagem Toast

A implementação básica é praticamente idêntica, porém o Snackbar pode conter um “botão” na mensagem, como por exemplo, um botão que desfaz a ação que usuário acabou de realizar. Fica a cargo do desenvolvedor escolher qual ação que o botão da Snackbar irá realizar. Na figura 4 podemos ver um exemplo da Snackbar no Android.

Figura 3 - Snackbar
Figura 4 – Snackbar

Abaixo segue uma utilização básica do Snackbar. Lembrando que, como o Toast, a Snackbar também não possui implementação no XML, apenas no código Java.

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Esta é uma Snackbar", Snackbar.LENGTH_LONG).setAction("Mostrar um Toast", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Este é um Toast", Toast.LENGTH_LONG).show();
            }
        }).show();
    }
});

Entendendo o código acima

  • A Snackbar irá aparecer na tela quando o usuário clicar na FAB que criamos no tópico anterior.
  • Para isso, estamos instanciando um objeto do tipo FloatinActionButton com a referencia do componente XML (lembra que criamos o componente no XML com o id fab?)
  • Com o objeto em mãos, estamos definindo um comportamento para quando o botão FAB for clicado, sobrescrevendo o método onClick.
  • Dentro do onClick, eis que aparece a tão esperada Snackbar. Implementação bastante simples: chamamos o método make da Snackbar passando o layout a qual a mesma será desenhada, no caso, o drawer_layout, a mensagem que irá dentro da Snackbar e por fim passamos a duração que o Snackbar vai ter, que no caso, é uma duração curta.
  • Depois, temos algo que é opcional: definir a ação de um “botão” na Snackbar. Através do método setAction, passando o nome do “botão” e logo em seguida sobrescrevendo o método onClick deste.
  • Dentro do método onClick, estamos criando uma mensagem Toast com o texto “Snackbar Action” e uma duração longa.

Por fim, é necessário chamar o método show, tanto para o Snackbar quanto para a mensagem Toast, se não eles não aparecem na tela.

REFERENCIAS

[1] http://developer.android.com/intl/pt-br/reference/android/support/design/widget/FloatingActionButton.html

[2] http://developer.android.com/reference/android/support/design/widget/Snackbar.html

[3] http://www.matera.com/br/2016/01/21/android-design-support-library-navigation-drawer-parte-1/

[4] https://www.google.com/design/spec/material-design/introduction.html

[5] https://github.com/materasystems/fab-snackbar-tutorial

[6] http://gradle.org/getting-started-android/

[7] http://developer.android.com/intl/pt-br/reference/android/widget/Toast.html

 

Por GUILHERME LIMA PEREIRA

Postado em: 15 de março de 2016

Confira outros artigos do nosso blog

O que é Design Emocional?

24 de julho de 2018

Mariane Moreira

Gamification: engajamento e mudança cultural

16 de julho de 2018

Jaqueline de Jesus Zamboni

Ferramentas de prototipação: qual a melhor escolha?

25 de junho de 2018

Larissa Ferreira

Passo-a-passo: Design centrado no usuário

21 de junho de 2018

Larissa Ferreira

Deixe seu comentário