Criando e Customizando um Navigation Drawer no Android

Quem nunca usou um aplicativo com aquele menu lateral que aparece quando arrastamos a tela da esquerda para direita? A esse menu deslizante é dado o nome de Navigation Drawer. O Navigation Drawer é usado para facilitar a navegação no aplicativo e evitar que o usuário fique perdido na troca entre uma tela e outra. Aplicativos como o YouTube e o Google Plus fazem uso desse componente. A imagem abaixo mostra um exemplo de Navigation Drawer.

drawer

Muitos desenvolvedores já conhecem o Navigation Drawer então, hoje, eu vou fazer um tutorial sobre como implementá-lo de uma forma mais rápida através da biblioteca criada pelo Mike Penz. Então, vamos lá!

O primeiro passo é adicionar ao gradle a dependência abaixo:

Com a dependência adicionada e o gradle sincronizado, já é possível partir para a codificação. Sendo assim, criamos a MainActivity, em seguida, podemos implementar um método chamado createDrawer, o qual irá conter o código de criação do nosso Navigation Drawer.

No código acima é possível notar que, inicialmente, foram definidos três itens, sendo todos da classe PrimaryDrawerItem. A classe PrimaryDrawerItem representa um item principal. Na criação dos itens PrimaryDrawerItem, o método withIdentifier defini um identificador para o item e o withName serve para atribuir um nome para a opção criada.

Com os itens já definidos, na linha 9 do código, é possível ver como o Navigation Drawer é implementado. Primeiramente, ele deve ser vinculado à Activity e a Toolbar. Além disso, através do método addDrawerItems, seus itens são adicionados.

No método addDrawerItems, além dos itens anteriormente criados, existem mais dois tipos de item, o DividerDrawerItem e o SectionDrawerItem. O DividerDrawerItem é usado para criar um divisor entre os itens. Por sua vez, o SectionDrawerItem serve para criar uma nova seção de itens, a qual pode conter um nome.

No código da implementação do Navigation Drawer também existe o método withOnDrawerItemClickListener. Esse método tem como objetivo capturar o evento de clique nos itens. Sendo assim, o desenvolvedor pode especificar o que será feito quando um item for clicado. No caso do código exemplo, o nome do item será exibido no TextView, mas o comportamento poderia ser o de abrir um Fragment, por exemplo.

Para inicializar o Navigation Drawer em um determinado item, o método withSelectedItemByPosition precisa ser utilizado. Esse método recebe como parâmetro o identificador do item a ser usado como inicial.

Com o método createDrawer devidamente implementado, podemos chamá-lo no onCreate da nossa Activity como mostra o código abaixo:

A imagem abaixo mostra como o Navigation Drawer ficou ao final da implementação.

Screenshot_20160731-114038

Na imagem é possível notar que os itens possuem apenas nomes. Para colocar imagens junto a eles, basta acrescentar o método withIcon e apontar para a imagem desejada como mostra o código abaixo. Nessa etapa, também é possível fazer uso de fontes alternativas de ícones como a FontAwesome.

A imagem a seguir mostra o Navigation Drawer com os ícones nos itens.

navigation drawer com ícones

Pronto, agora você já pode usar a sua criatividade e criar um Navigation Drawer rapidamente e sem muito esforço. =)

Para quem quiser ver o código fonte completo deste tutorial é só acessar: Exemplo Navigation Drawer.

Qualquer dúvida, deixa um comentário.

8 comentários em “Criando e Customizando um Navigation Drawer no Android”

    • Olá, Isabelle!

      Se você estiver usando a biblioteca MaterialDrawer, você pode fazer da seguinte forma:

      Drawer drawer = new DrawerBuilder()...(outros parâmetros)....build();
      drawer.getActionBarDrawerToggle().setDrawerIndicatorEnabled(false);
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
      drawer.getActionBarDrawerToggle().setHomeAsUpIndicator(android.R.drawable.ic_delete); <-- Substitua pelo drawable do ícone que você deseja

      Dessa forma, deve funcionar.

      Espero ter ajudado.

      Responder
  1. Boa Tarde Vinicius. Primeiramente, gostaria de parabenizar seu blog. Disparado o melhor portal voltado para android que eu ja tive contato. Sua didatica tambem e fora de serie. Me surgiu uma duvida meio cruel, e acho que ela surgira em outros programadores que estao tendo um contato de inicial para medio com android. Para trabalhar com Navigator Drawer e obrigatorio utilizar somente Fragments ou podemos fazer o mesmo funcionamento com Activity ? Obrigado pela atencao, e novamente, parabens pelo blog

    Responder
    • Olá, Valeria. Obrigado pelos elogios. =)

      No caso do Navigation Drawer, o recomendado é utilizá-lo associado à uma Activity e cada menu, ao ser clicado, abre um Fragment, visando para garantir uma melhor navegação para o usuário. Nada te impede de abrir uma Activity quando o usuário clicar no menu do Navigation Drawer, mas tome cuidado para a navegação não ficar confusa.

      Espero ter ajudado.

      Responder
  2. Olá, muito obrigado por disponibilizar esse código, de fato me ajudou muito. Só tem um problema: na parte da definição do drawer o .withToolbar(toolbar) está dando erro e ele não diz qual é. Poderia me ajudar?

    Responder
    • Olá, Gybson!

      Tenta abrir o projeto no Android Studio e ir em File => Invalidate Caches / Restart.. => Invalidate and Restart.
      Quando o Android Studio reiniciar, vai em Build => Rebuild Project.
      Fazendo isso, você estará recriando o projeto com todo o cache limpo. Isso deve resolver o problema.

      Espero ter ajudado.

      Responder

Deixe um comentário