Android Design Support Library – Navigation Drawer (Parte 1)

Se você é um usuário do Android, deve ter percebido umas mudanças no visual dos aplicativos em geral, mas principalmente, nos aplicativos do Google. Se você for um observador, pode até mesmo ter notado que há um padrão neste visual. Este padrão não é a nova moda (mas espero que torne-se!) para criar aplicativos, mas sim a nova diretriz de design descrita pela Google: Material Design. O objetivo deste post não é explicar sobre Material Design, para isto, recomendo fortemente a leitura da documentação oficial do Material Design [1]. A documentação é bem rica e, até mesmo para quem não entende nada de design, pode se surpreender com alguns conceitos apresentados em forma de animações para melhor entendimento.

Dentro da documentação do Material Design, há uma seção exclusiva para componentes. Essa seção aborda os componentes do Material Design e como criar eles. Apesar da documentação ser bem rica, é bastante trabalhoso criar componentes na mão. Em vista desse problema, a Google lançou recentemente a biblioteca Android Design Support Library que tem como objetivo facilitar o uso dos componentes do Material Design em aplicativos Android.

Fazendo um paralelo com a parte Web, essa biblioteca seria o equivalente ao Twitter Bootstrap para desenvolvedores Web. Uma total revolução: sem muito trabalho, é possível ter uma aplicação bonita. Bem, chega de papo! Vamos a parte interessante: código!

Para não ficar cansativo, irei criar uma série com 4 posts aqui no Blog da MATERA, sendo este o primeiro. Nesta primeira parte, será abordado o componente Navigation Drawer.

Para os ansiosos, segue abaixo como irá ficar:

Figura 1 - Navigation Drawer em ação
Figura 1 – Navigation Drawer 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 [2]. Dentro do projeto há inúmeros arquivos. Não vou entrar no mérito de explicar todos os arquivos, pois o foco é apenas no Navigation Drawer.

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 [3] 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.0.0'

Navigation Drawer

Provavelmente você já deve ter visto aqueles três tracinhos no canto superior esquerdo de um aplicativo, o qual se você clicar (ou deslizar da esquerda para a direita) aparece um menu lateral. Pois bem, este menu é o famoso Navigation Drawer [4]!

Em res/layout tem o arquivo activity_main.xml com o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <!-- Você pode incluir qualquer componente aqui -->
    <include
        layout="@layout/app_bar_main"
        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>

Entendendo o código acima

Temos um Drawer Layout [5] envolvendo todo o código. O Drawer Layout é um Layout que permite que views surjam das bordas da tela (comumente da esquerda para direita).

Logo em seguida, há um espaço em que você pode colocar qualquer componente de Layout (botão, campo de texto, etc). Neste exemplo, estamos apenas incluindo (include) do arquivo app_bar_main.

Por fim, há um Navigation View [6], o componente responsável por desenhar um menu, nos padrões do Android. Nele, há duas propriedades importantes: headerLayout e menu. A propriedade headerLayout é responsável por obter, de um XML de layout, o cabeçalho do menu. A propriedade menu é responsável por obter, de um xml de menu, uma lista de opções.

Unindo toda a informação, nós temos um Layout que permite que um menu apareça da borda da tela e logo em seguida temos o componente menu que irá surgir da borda da tela.

Em res/layout, tem o arquivo nav_header_main.xml com o conteúdo abaixo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@drawable/logo_matera" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="MATERA Systems"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="comercial@www.matera.com" />

</LinearLayout>

Entendendo o código acima

Temos um LinearLayout [7] com orientação vertical, logo, os componentes serão dispostos um sob o outro. Os componentes que compõe esse Linear Layout são: 1 ImageView e 2 TextView. Como podemos ver na Figura 2, o ImageView representa o logo da MATERA Systems, o primeiro TextView representa o texto “MATERA Systems” e o segundo o e-mail “comercial@www.matera.com”.

Figura 2 - Header do Navigation Drawer
Figura 2 – Header do Navigation Drawer

Em res/menu tem o arquivo drawer_menu.xml com o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_solucoes"
            android:icon="@drawable/ic_weekend_black_24dp"
            android:title="Soluções" />
        <item
            android:id="@+id/nav_servicos"
            android:icon="@drawable/ic_business_center_black_24dp"
            android:title="Serviços" />
        <item
            android:id="@+id/nav_empresa"
            android:icon="@drawable/ic_business_black_24dp"
            android:title="Empresa" />
        <item
            android:id="@+id/nav_carreira"
            android:icon="@drawable/ic_bookmark_black_24dp"
            android:title="Carreira" />
        <item
            android:id="@+id/nav_blog"
            android:icon="@drawable/ic_web_black_24dp"
            android:title="Blog" />
        <item
            android:id="@+id/nav_webinars"
            android:icon="@drawable/ic_personal_video_black_24dp"
            android:title="Webinars" />
        <item
            android:id="@+id/nav_contato"
            android:icon="@drawable/ic_settings_phone_black_24dp"
            android:title="Contato" />
    </group>
</menu>

Entendendo o código acima

Esse arquivo possui 7 itens, cada qual com o seu id, ícone e título. O id irá servir para quando estivermos no Java, verificando se o item foi clicado. O ícone é apresentado antes do título. Abaixo como ficou:

Figura 3 - Opções do Navigation Drawer
Figura 3 – Opções do Navigation Drawer

Com isso, nós já temos o Navigation Drawer feito, porém, sem ações. Agora, é tratar os eventos de clique nas opções do menu através do Java. É simples! No MainActivity.java, há o código abaixo:

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        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();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.nav_solucoes) {
        } else if (id == R.id.nav_servicos) {

        } else if (id == R.id.nav_empresa) {

        } else if (id == R.id.nav_carreira) {

        } else if (id == R.id.nav_blog) {

        } else if (id == R.id.nav_webinars) {

        } else if (id == R.id.nav_contato) {

        }

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

Entendendo o código acima

A classe MainActivity está implementando a interface OnNavigationItemSelectedListener da classe NavigationView permitindo-nos sobrescrever os métodos onBackPressed e onNavigationItemSelected, ou seja, métodos que definem o comportamento de quando o usuário clicar no botão voltar do android e o comportamento de quando o usuário selecionar uma das opções do navigation drawer (Soluções, Serviços, Empresa, etc).

No onBackPressed, ele simplesmente verifica se o Navigation Drawer está aberto e, caso estiver, fecha-o. No onNavigationItemSelected, é verificado o id do item clicado (que definimos lá no drawer_menu, lembra?) e definido um comportamento ao clicar em determinado item. No caso dessa classe, não há nenhum comportamento, mas é comum atribuir a inclusão de um fragment à activity ou abrir uma nova activity. E para finalizar, após clicar em uma das opções, o Navigation Drawer é fechado.

REFERÊNCIAS

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

[2] https://github.com/materasystems/navigation-drawer-tutorial

[3] http://gradle.org/

[4] http://www.google.com/design/spec/patterns/navigation-drawer.html

[5] http://developer.android.com/intl/pt-br/reference/android/support/v4/widget/DrawerLayout.html

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

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

Por GUILHERME LIMA PEREIRA

Postado em: 21 de janeiro de 2016

Confira outros artigos do nosso blog

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

Aplicando conceitos de UX em API REST

28 de abril de 2017

Monise Costa

Deixe seu comentário