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.

Deixe uma resposta