NavigationView – A nova view para criar o Navigation Drawer

Posted by rlecheta on novembro 23, 2015
Android, Livro Android

Olá pessoal

No livro Google Android 4ª edição mostrei como fazer o Navigation Drawer (menu lateral) usando um fragment, que foi baseado no próprio fragment que o Android Studio gerava como template ao criar um projeto.

10.002-parte1

No Google I/O 2015 o Google lançou a lib do Material Design e dentre os novos componentes, foi criada a classe NavigationView, que facilita justamente criar este menu lateral.

Usar esta classe não requer prática nem habilidade, e você verá como é simples neste post.

Caso queira ver a explicação direta do Google, no canal do Android Developpent Patterns foi disponibilizado um vídeo explicando como utilizar o NavigationView, recomendo assistir, este canal é show!

Mas vamos explicar passo a passo aqui. Bom, algo simples que você pode fazer é utilizar o próprio wizard do Android Studio e escolher o template do Navigation Drawer conforme esta figura.

Screen Shot 11-23-15 at 04.00 PM

Ao gerar o wizard, você verá que tudo continua como expliquei no livro. É usado o DrawerLayout na raiz do layout e dentro dele o NavigationView (que substitui o fragment que mostrei no livro 4ª edição).

A seguir um exemplo do NavigationView.

Screen Shot 11-23-15 at 04.12 PM

O Navigation view possui 2 propriedades simples para configurar o menu lateral.

A 1ª propriedade é a app:headerLayout=”@layout/nav_header_hello_nav_drawer”, é utilizada para definir o layout do cabeçalho do menu. É possível criar o layout que você quiser aqui, e um bom exemplo é o layout que o próprio Android Studio gera. Na figura abaixo este header é aquela parte verde.

Screen Shot 11-23-15 at 04.17 PM

A 2ª propriedade do NavigationView é o app:menu=”@menu/activity_hello_nav_drawer_drawer”, que define um arquivo de menu (formato XML) para compor as opções do menu lateral.

Ficou tudo muito simples, pois este arquivo de menu possui o mesmo formato do arquivo de menu que usamos para a action bar / toolbar.

Faça os seus testes, e confira o wizard do Android Studio!

Mas e o projeto dos Carros do livro Google Android 4ª edição é possível atualizar para utilizar o Navigation View?

Claro que sim, demora uns 5 minutos se você seguir este tutorial.

1) Altere o arquivo de layout activity_main.xml para declarar o NavigationView. Ele vai entrar exatamente no lugar daquele fragment que mostrei no livro.

Sabemos que o NavigationView vai usar um arquivo de header e menu.

O arquivo de header é o mesmo nas 4ª e 5ª edições:

Já o arquivo com as opções de menu é este aqui aqui. Simples não é?

No código da BaseActivity, é só mudar a implementação do método setupNavDrawer() para usar o NavigationView, segue código-fonte atualizado.

Veja que a forma de tratar eventos é simples, pois é só implementar o método onNavDrawerItemSelected().

	private void onNavDrawerItemSelected(MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.nav_item_carros_todos:
                // tratar os eventos aqui
                break;
            case R.id.nav_item_carros_classicos:
                // tratar os eventos aqui
                break;
            case R.id.nav_item_carros_esportivos:
                // tratar os eventos aqui
                break;
            case R.id.nav_item_carros_luxo:
                // tratar os eventos aqui
                break;
            case R.id.nav_item_site_livro:
                // tratar os eventos aqui
                break;
            case R.id.nav_item_settings:
                // tratar os eventos aqui
                break;
        }
    }

É só isso, usar o NavigationView para criar o menu lateral é bem simples, espero que este post tenha ajudado quem quiser entender um pouco mais sobre este componente, e também os leitores do livro Google Android 4ª edição.

Lembre-se que o código-fonte do livro 5ª edição está no github, então é só consultar o app dos Carros sempre atualizado :-).

https://github.com/livroandroid/5ed

29 Comments to NavigationView – A nova view para criar o Navigation Drawer

  • Parabéns pelo excelente livro!

    Criei projeto no Android Studio utilizando o template “Navigation Drawer Activity”. Não fiz qualquer alteração no projeto criado.

    Ao editar os arquivos activity_main.xml e nav_header_main.xml, o editor (em sua aba Design) apresenta a seguinte mensagem:

    “Rendering Problems”
    The following classes could not be found:
    – android.support.v7.internal.app.WindowDecorActionBar

    Já os arquivos app_bar_main.xml e content_main.xml não apresentam mensagem de erro e são renderizados corretamente.

    As seguintes dependências estão configuradas no arquivo build.gradle.

    compile ‘com.android.support:appcompat-v7:23.1.1’
    compile ‘com.android.support:support-v4:23.1.1’
    compile ‘com.android.support:design:23.1.1’

    Pode ajudar, por favor?

    Versão do Android Studio: 1.5 (atualizado)

    • Oi Sandro, você disse gerou o projeto pelo wizard do Android Studio, então deveria funcioar. Mas tem esses bugzinhos no editor ainda, é coisa que o pessoal do Google ainda precisa resolver. Volte e meia acontece comigo também, mas é coisa do editor sabe? Mas isso não impede que você faça funcionar o código no emulador para testar o app. Qualquer coisa avise.

      • O projeto executa corretamente no emulador e também no smarthphone. Vamos aguardar as próximas atualizações do Android Studio.

        Muito obrigado.

  • Oi Ricardo, comprei seu livro e sigo vários ensinamentos que você passa.

    Porem estou tentando chamar outro Layout através do método onNavDrawerItemSelected.. Mas utilizando setContentView ele da erro..

    O que eu posso fazer para chamar outro layout ? Qual método ou algo que execute outro layout ?

    • Oi Gabriel, para trocar de layout vc deve usar fragments. Ou trocar de tela com uma activity. setContentView deve ser chamado alenas uma vez na activity, ele nao serve para trocar o layout da tela. Veja no livro android como fiz.

  • Ricardo, já comprei duas versões do seu livro (a primeira eu dei de presente para um amigo), obrigado pelos ensinamentos.

    Eu já tenho aplicativos prontos, como faço para passar a usar o Navigation Drawer sem ter que iniciar com o template inicial?

    • Oi Daniel. Um jeito fácil é vc criar um projeto com o template inicial, e copiar a MainActivity e activity_main.xml, pois é nela que está toda a lógica do Navigation Drawer. Você vai ver que precisa colocar o DrawerLayout + NavigationView lá no XML. Esses caras que desenham o menu lateral.

  • Eu já tenho aplicativos prontos, como faço para passar a usar o Navigation Drawer sem ter que iniciar com o template inicial?

    • Oi Daniel. Um jeito fácil é vc criar um projeto com o template inicial, e copiar a MainActivity e activity_main.xml, pois é nela que está toda a lógica do Navigation Drawer. Você vai ver que precisa colocar o DrawerLayout + NavigationView lá no XML. Esses caras que desenham o menu lateral.

      • mas se a MainActivity e activity_main.xml já esta sendo usada com relativeLayout, o amigo ai perguntou o que estou passando hoje! n tem como ou usa o

        <android.support.v4.widget.DrawerLayout

        ou o RelativeLayout independente da programação.

        eu fiz isso criei um projeto do zero, copiei o que ele tinha criado e quando fui executa a aplicação o q eu já tinha feito sumiu..

  • Olá, estou utilizando uma tela de login com botão entrar setando o activity_Main que é o meu Navigation Drawer. Mas ao fazer isso não é possível navegar com os menus, parece que de alguma forma ele não carrega o menu corretamente. Inclusive as 3 barras ( – ) não aparecem no canto superior esquerdo da tela.

    • Oi Fabricio, creio que não esteja falando dos exemplos que mostro no livro certo? Pois não tem tela de login.. Neste caso veja se vc copiou todo o código que geralmente coloco no método setupNavDrawert() em meus exemplos. Talvez falta configurar algo no código da acticity.

  • Perfeito!
    Android é pra mim e de longe o melhor sistema operacional.
    Muito completo e permite fazer muita coisa nele.
    Já tive da Apple e nem de perto é tão bom quanto Android!

  • Oi Ricardo. Tudo bem? Primeiramente gostaria de parabenizá-lo por seus livros. Comprei a 4a edição e a versão resumida. Está me ajudando e muito a entender como desenvolver em Android. Gostaria de tirar uma dúvida contigo. Estou utilizando Navigationdrawer com os menus Sobre, Curso, Instrutores e Como chegar. Todos criados como fragments em xml (ex. fragment_sobre, etc…) com suas respectivas classes em java (ex. Sobre_Fragment, Cursos_Fragment, etc). Quando executo o projeto, ele roda sem nenhum erro, mas ao clicar como por exemplo em Sobre, ele abre a activity mas quando aperto a tecla voltar do celular, o aplicativo fecha. Como faço para retornar a tela anterior? Grato Carlos Augusto.

    • Oi Carlos, para voltar a tela anterior depende de como vc programou o seu código. Se ao clicar no menu vc abriu uma activity, você pode voltar pra tela anterior.. Se vc colocou um fragment, não vai voltar, pois o fragmnet permanece na mesma tela, entende? Cada activity é uma tela.. A não ser que vc chamou o finish() em algum lugar.

  • Lecheta, beleza.

    Como faço então se quiser fazer um item dentro de outro, que apareça quando clicar, tipo item menu mesmo.

    item1 ->
    subitem1
    subitem2
    subitem3
    subitem4

  • Olá. Boa noite. Não consegui fazer as modificações, todos os links do Github estão dando não encontrados.

  • Muito bom seu livro Ricardo, estou lendo ele e tentando desenvolver um app. Tenho uma dúvida, será que pode me ajudar?

    Bom fiz a navigationView e quando clico chama a activity corretamente, mas a navigationView some é como se abre uma ‘janela’ por cima. Se eu aperto voltar no celular ele fecha a activity e volta a que tem a navegação. Como eu faço pra navegação ficar lá? Exatamente como o app do gmail faz.

    Muito obrigado, abraço.

    • Angelo, ou vc faz como mostrei no.livro que ao clicar chama outra activity e ao voltar mostra o navigation de novo. Ou ao clicar mostra um fragment, sendo q esse vai substituir o conteúdo central.. foi o primeiro exemplo que fiz no livro no cap de navigation view

      • Perfeito, ainda não tinha chegado nesse capítulo do livro. Vou acompanhar pra fazer, obrigado pela resposta. Abração!!!

  • Oi Ricardo, boa tarde!
    Estou pensando em comprar 5ª edição do do seu livro, mas antes disso, gostaria de saber se a 6ª edição está próxima. Se estiver, eu pretendo esperar. A não ser que você julgue não serão mudanças significativas.
    Abraço,

    • Oi Jorge, obrigado pelo interesse no livro, espero que goste. Pretendo lançar a 6a ed apenas depois do Google I/O 2017, lá pela metade do ano que vem.

  • Prezado Ricardo, Boa Noite!

    Comprei em 02/2013 a 2° Edição e em 03/2017 a 5° Edição. Parabéns pelo conteúdo dos livros!

    Estou tentando utilizar um projeto com tabs com “ActionBar”(Deprecation) , porém no cap.13(5°)(Navigation Drawer) utiliza a “Toolbar” e o exemplo do Android Studio também utilizar.

    O projeto executa,porém o menu lateral ficar por baixo da “actionBar – 3 abas” e o clique dos itens do ML não responde.

    Pergunta:

    É possível utilizar “ActionBar” no Drawer Layout?

    • Oi Luiz, melhor usar a Toolbar como nesse exemplo que fiz. Na verdade a Toolbar é a nova ActionBar.