NavigationView: Navigation Drawer Con Material Design

¿Ya sabes que la nueva librería de soporte para el diseño en Android trae un nuevo elemento llamado NavigationView para crear un Navigation Drawer basado en Material Design?

Me imagino que aún estas implementando un Listview mas un adaptador para generar la lista de ítems dentro del DrawerLayout.

Incluso modificas el estilo y manipulas el contenido para añadir un header con imagen al navigation drawer de forma extensa.

Si quieres acelerar su implementación, entonces debes aprender a usar el NavigationView. Este hace que la construcción de un menú deslizante sea sencilla y aislada.

En este artículo veremos cómo añadir un navigation drawer, donde se variará el contenido principal basado en fragmentos. Además de ello añadiremos un header con un ImageView para construir un perfil. Adicionalmente setearemos los estilos y dimensiones necesarios para respetar el checklist del Navigation Drawer en el Material Design.

Material Design: Checklist Para Diseño Navigation Drawer

Descargar Proyecto Android Studio De “Janus Shop”

Si te preguntas que cuál será el ejemplo que verás en este tutorial, entonces el siguiente video ilustrativo te orientará:

Para desbloquear el link de descarga del código final, sigue estas instrucciones:

¿Cómo Añadir El NavigationView En Android?

En el apartado del NavigationView de la librería de soporte nos indica que el navigation drawer debe ser construido a partir de:

  • Un layout con un nodo DrawerLayout, el cual tendrá dos hijos. El contenido principal y un NavigationView.
  • Un layout para el header. Este elemento es opcional.
  • Un menú para inflar las opciones de la lista.

El primer elemento ya lo has creado antes, solo que en lugar de un navigation view, usábas una lista o creabas un recycler view:

<android.support.v4.widget.DrawerLayout 
    ...
    android:fitsSystemWindows="true">

    <!-- Contenido Principal -->

    <!-- Menú Deslizante -->
    <android.support.design.widget.NavigationView
        ...
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

</android.support.v4.widget.DrawerLayout>

La sintaxis anterior no es nada del otro mundo, solo recuerda tener en cuenta los siguientes puntos claves:

  • Usa el atributo fitsSystemWindows con el valor de true para ajustar el DrawerLayout y el NavigationView al padding de la status bar de android.
  • Asigna al atributo headerLayout el layout que ocupará el espacio del header, si es que usarás uno.
  • Asigna al atributo menu del NavigationView el menú con las opciones correspondientes.

El header puedes personalizarlo como desees. Por otro lado la estructura básica de un menú se vería así:

<?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_home"
            android:checked="true"
            android:icon="@drawable/ic_home"
            android:title="@string/home_item" />
        <item
            android:id="@+id/nav_productos"
            android:icon="@drawable/ic_store"
            android:title="@string/productos_item" />
        <item
            android:id="@+id/nav_carrito"
            android:icon="@drawable/ic_shopping_cart"
            android:title="@string/compras_item" />
        ...
    </group>

</menu>

En este caso cada ítem tendría un identificador, un titulo y un icono asignado. Donde se agrupan por una etiqueta <group> para mantener el control sobre la selección.

También puedes usar un menú anidado para crear una división visible entre los elementos:

<!-- Otra sección -->
<item
    android:id="@+id/otra_section"
    android:title="@string/subtitulo">
    <menu>
        <item
            android:id="@+id/nav_otro_item"
            android:icon="@android:drawable/otro_icono"
            android:title="@string/otro_item" />
    </menu>
</item>

En cuanto a control de eventos e interacción con el sistema ten en cuenta que:

  • Debes añadir la Toolbar a tu aplicación Android para que el navigation drawer aparezcan sobre la Action Bar como dice la regla #1.
  • Añade una escucha OnNavigationItemSelectedListener a tu NavigationView para manejar las selecciones de los ítems.
  • Sobrepón la status bar al navigation drawer como dice la regla #1. Para ello añade a res/values-21 los siguientes atributos:
<style name="TuTema" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Crear Proyecto En Android Studio

Paso #1. Entra a Android Studio, dirígete a File > New Project y nombra al proyecto como “Janus Shop”. Al momento de añadir la actividad, seleccionar Blank Activity y confirma.

Paso #2. Abre el archivo build.gradle y añade las siguientes dependencias:

build.gradle

dependencies {
    ...
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'de.hdodenhof:circleimageview:1.3.0'
}

Recuerda que la librería Circle Image View nos permite añadir imágenes circulares.

Paso #3. Agrega dentro del archivo res/values/strings.xml las siguientes cadenas:

strings.xml

<resources>
    <string name="app_name">Janus Shop</string>

    <string name="action_settings">Settings</string>

    <string name="home_item">Home</string>
    <string name="productos_item">Productos</string>
    <string name="compras_item">Carrito</string>
    <string name="ordenes_item">Ordenes</string>
    <string name="facturas_item">Facturas</string>
    <string name="log_out_item">Cerrar Sesión</string>
    <string name="configuracion_item">Configuración</string>
</resources>

Paso #4. El siguiente paso es definir los colores para el Material Design. Para ello crea un nuevo archivo xml dentro de res/values llamado colors.xml y añade los siguientes valores:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="window_background">#FFF5F5F5</color>

    <color name="primaryColor">#346D7D</color>
    <color name="primaryDarkColor">#1F515F</color>
    <color name="accentColor">#03A9F4</color>
</resources>

Paso #5. Abre tu archivo de estilos en res/values/styles.xml y añade los siguientes temas:

<resources>

    <style name="Theme.JanusShop" parent="Base.AppTheme"/>

    <style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/accentColor</item>

        <item name="android:windowBackground">@color/window_background</item>
    </style>

</resources>

Adicionalmente configura la transparencia de la status bar en el archivo res/values-21/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.JanusShop" parent="Base.AppTheme">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

Paso #6. Ahora define las dimensiones dentro de tu archivo res/values/dimens.xml. En esta parte debes tener en cuenta las especificaciones de un navigation drawer.

Material Design: Especificaciones De Un Navigation Drawer

 

El código de abajo contiene las medidas necesarias para la aplicación Janus Shop.

dimens.xml

<resources>
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="header_left_padding">16dp</dimen>
    <dimen name="header_height">192dp</dimen>

    <dimen name="perfil_image_size">64dp</dimen>
</resources>

Paso #7. Descarga los recursos gráficos de nuestra aplicación. Al descomprimir el archivo .rar, debes copiar todas las carpetas en tu directorio main/res.

Crear Navigation Drawer Con Imagen De Cabecera

Paso #8. A continuación abre el archivo res/layout/activity_main.xml y añade la definición del navigation drawer que se encuentra en el siguiente código:

activity_main.xml

<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:context=".MainActivity">

    <!-- Contenido Principal -->
    <include layout="@layout/main_content" />

    <!-- Menú Deslizante -->
    <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"
        app:menu="@menu/drawer_view" />

</android.support.v4.widget.DrawerLayout>

Paso #9. Crea un nuevo archivo dentro res/layout llamado nav_header.xml para definir el header del navigation drawer. La idea es crear un menú deslizante con una imagen de perfil circular.

Navigation Drawer Con Imagen De Perfil Circular

Copia la siguiente definición xml en el layout:

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/header_height"
    android:background="@drawable/material_background3"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="@dimen/header_left_padding"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <!-- Imagen de perfil -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_image"
        android:layout_width="@dimen/perfil_image_size"
        android:layout_height="@dimen/perfil_image_size"
        android:layout_marginBottom="16dp"
        android:scaleType="centerCrop"
        android:src="@drawable/perfil2"
        app:border_color="@android:color/white"
        app:border_width="1dp" />

    <!-- Nombre de Usuario -->
    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Juana Maria Perez"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textStyle="bold" />

    <!-- Correo de la cuenta -->
    <TextView
        android:id="@+id/email"
        style="@style/Widget.AppCompat.Spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="juanaperez01@gmail.com"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

Paso #10. Ahora crea un layout llamado main_content.xml con el código de abajo. Este diseño será para el contenido principal de la actividad, donde se decidió añadir la Toolbar más un RelativeLayout que contendrá el espacio para actualizar el contenido.

main_content.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <RelativeLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Paso #11. El siguiente paso es crear el menú para el navigation drawer. Ve a res/menu y añade un archivo llamado nav_menu.xml con la siguiente definición:

<?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_home"
            android:checked="true"
            android:icon="@drawable/ic_home"
            android:title="@string/home_item" />
        <item
            android:id="@+id/nav_productos"
            android:icon="@drawable/ic_store"
            android:title="@string/productos_item" />
        <item
            android:id="@+id/nav_carrito"
            android:icon="@drawable/ic_shopping_cart"
            android:title="@string/compras_item" />
        <item
            android:id="@+id/nav_ordenes"
            android:icon="@drawable/ic_truck"
            android:title="@string/ordenes_item" />
        <item
            android:id="@+id/nav_facturas"
            android:icon="@drawable/ic_file_document"
            android:title="@string/facturas_item" />

        <!-- Sección de configuración -->
        <item
            android:id="@+id/configuration_section"
            android:title="@string/configuracion_item">
            <menu>
                <item
                    android:id="@+id/nav_log_out"
                    android:icon="@android:drawable/ic_lock_power_off"
                    android:title="@string/log_out_item" />
            </menu>
        </item>
    </group>

</menu>

Con las definiciones anteriores, nuestro navigation drawer se vería como sigue:

NavigationView: Navigation Drawer Con Material Design

¿Quieres ahorrar montones de horas en el desarrollo de una app con Nav Drawer? Si es así, te recomiendo descargar Universal – Full Multi-Purpose Android App de CodeCanyon.

Paso #12. Lo siguiente es modificar el archivo MainActivity.java para implementar el navigation drawer. Añade el siguiente código:

MainActivity.java

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    /**
     * Instancia del drawer
     */
    private DrawerLayout drawerLayout;

    /**
     * Titulo inicial del drawer
     */
    private String drawerTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setToolbar(); // Setear Toolbar como action bar

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            // Añadir carácteristicas
        }

        drawerTitle = getResources().getString(R.string.home_item);
        if (savedInstanceState == null) {
            // Seleccionar item
        }

    }

    private void setToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final ActionBar ab = getSupportActionBar();
        if (ab != null) {
            // Poner ícono del drawer toggle
            ab.setHomeAsUpIndicator(R.drawable.ic_menu);
            ab.setDisplayHomeAsUpEnabled(true);
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!drawerLayout.isDrawerOpen(GravityCompat.START)) {
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

}

Si corres la aplicación podrás visualizar el navigation drawer, pero no se cerrará automáticamente, ni se actualizará el contenido.

Para ello debemos extender el comportamiento con fragmentos y algunos métodos especiales del DrawerLayout.

Usar Fragmentos Con El Navigation Drawer

Paso #13. Crea una nueva clase llamada PlaceHolderFragment.java para representar el fragmento que se añadirá al contenido principal. Copia y pega el código de abajo.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Fragmento para el contenido principal
 */
public class PlaceholderFragment extends Fragment {
    /**
     * Este argumento del fragmento representa el título de cada
     * sección
     */
    public static final String ARG_SECTION_TITLE = "section_number";


    /**
     * Crea una instancia prefabricada de {@link PlaceholderFragment}
     *
     * @param sectionTitle Título usado en el contenido
     * @return Instancia dle fragmento
     */
    public static PlaceholderFragment newInstance(String sectionTitle) {
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putString(ARG_SECTION_TITLE, sectionTitle);
        fragment.setArguments(args);
        return fragment;
    }

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.section_fragment, container, false);

        // Ubicar argumento en el text view de section_fragment.xml
        String title = getArguments().getString(ARG_SECTION_TITLE);
        TextView titulo = (TextView) view.findViewById(R.id.title);
        titulo.setText(title);
        return view;
    }

}

Como ves, el fragmento tiene un argumento que representa el título que se añadirá al contenido mediante un TextView.

Paso #14. Ve a res/layout y crea un nuevo fichero llamado section_fragment.xml con la definición de abajo. Este será el layout para nuestro fragmento.

section_fragment.xml

<?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="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textSize="50sp"
        android:textStyle="bold" />

</LinearLayout>

Paso #15. Finalmente dentro de MainActivity.java añade las modificaciones que se presentan abajo.

Se usará el método setupDrawerContent() para añadir la escucha al atributo navigationView. Lo que permitirá actuar según el ítem selecionado del navigation drawer con el método onNavigationItemSelected().

Lo ideal es marcar el ítem actual en el navigation drawer con el método setChecked().

El nuevo método selectItem() tiene como propósito para crear fragmentos dinámicamente basado en el ítem seleccionado.

MainActivity.java

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    /**
     * Instancia del drawer
     */
    private DrawerLayout drawerLayout;

    /**
     * Titulo inicial del drawer
     */
    private String drawerTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setToolbar(); // Setear Toolbar como action bar

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            setupDrawerContent(navigationView);
        }

        drawerTitle = getResources().getString(R.string.home_item);
        if (savedInstanceState == null) {
            selectItem(drawerTitle);
        }

    }

    private void setToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final ActionBar ab = getSupportActionBar();
        if (ab != null) {
            // Poner ícono del drawer toggle
            ab.setHomeAsUpIndicator(R.drawable.ic_menu);
            ab.setDisplayHomeAsUpEnabled(true);
        }

    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {

                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        // Marcar item presionado
                        menuItem.setChecked(true);
                        // Crear nuevo fragmento
                        String title = menuItem.getTitle().toString();
                        selectItem(title);
                        return true;
                    }
                }
        );
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!drawerLayout.isDrawerOpen(GravityCompat.START)) {
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    private void selectItem(String title) {
        // Enviar título como arguemento del fragmento
        Bundle args = new Bundle();
        args.putString(PlaceholderFragment.ARG_SECTION_TITLE, title);

        Fragment fragment = PlaceholderFragment.newInstance(title);
        fragment.setArguments(args);
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager
                .beginTransaction()
                .replace(R.id.main_content, fragment)
                .commit();

        drawerLayout.closeDrawers(); // Cerrar drawer

        setTitle(title); // Setear título actual

    }


}

Para manejar el flujo del navigation drawer es importante remarcar las siguientes implementaciones:

  • No olvides controlar la apertura del drawer con el método DrawerLayout.openDrawer() cuando es seleccionado el toggle o up button. Este recibe una bandera GravityCompat.START para indicar que se desplegará desde el lado izquierdo.
  • Similarmente cierra el drawer con DrawerLayout.closeDrawers() justo en el momento que se procesa la selección del ítem.
  • También puedes comprobar el estado del navigation drawer con el método DrawerLayout.isDrawerOpen().

Conclusión

Definitivamente el Navigation View es un componente que reduce nuestro trabajo para obtener un navigation drawer visualmente atractivo y en regla con el estilo Material Design.

Vimos lo fácil que es poblar el menú horizontal y como procesar los eventos de cada ítem. También el aislamiento del header para personalizar su contenido ajustado a una medida razonable.

Es excelente que Google haya estandarizado este elemento para evitar perder tiempo en personalizaciones y código innecesario.

Solo tienes que preocuparte en el contenido que incluirás en los fragmentos, como recycler views con swipe refresh layouts, actividades de preferencias, fragmentos de detalle, etc.

Ahora el paso a seguir es entender como crear pestañas con la nueva librería de soporte.

Icono de la aplicación

  • Mario Ortega

    que es lo que hace de por si los xmlns:app y tools por que se colocan, Se donde se estan usando pero cual es su funcion en si. Me gustaria saber donde se encuentra la documentacion de estos y su respectivo funcionamiento. para enterder este codgio 100%

  • Rodolfo morales

    Excelente manual muchisimas gracias por este gran aporte, paso a paso y funcionando a la perfección.
    Puedo recomendar este curso de Android http://www.grupocodesi.com/cursos/curso-de-android.html

  • Kev-o Arriaga

    Hola, me parece que es un excelente aporte, he seguido todos los pasos y lo he conseguido, mi único problema es que al parecer solo funciona con Android 5.0 y superiores, me encantaría que pudieran ayudarme a que funcione con al menos Android 4.1, de antemano gracias.

  • Hugo Rodriguez

    buenas tardes, una pregunta si quisiera crear un menu desplegable obteniendo datos desde un webservices, como tendria que hacerlo,,, saludos y gracias

  • victor

    Hola James!!! Como siempre excelente, lo que vaya sorpresa, tengo que pasar lo que son mis activities a Fragments no :(? para poder usarlo… Espero que no me lleve mucho trabajo jejeje, si lo sé comienzo por este tutorial jajaja. Y quería consultarte, si al ser Fragments, lo que antes consideraba activities, pueden seguir estando en mi esquema de “wireframing”. Deduzco que sí, pero no sé porqué tenía la idea de que las vistas del wireframing eran sólo activities, espero que sea una idea equivocada que tenía en mi subconsciente.

    Muy buen tutorial como siempre!

    Saludos!

  • Francisco Javier Amell

    como llamo a un fragment para que sea cargado automaticamente al iniciar la aplicacion en el MainActivity.java o como mofico el activity principal y cuando llame aun fragmen el contenido del activity no salga en el fragment que llame

  • mauro

    hola quiero agregarle activitys al proyecto y lo quiero hacer con el siguiente comando

    Intent intent = new Intent(tonos.this, notificaciones.class);

    startActivity(intent);

    anda en el primer if pero luego en los otros se me detiene la app
    y me dice que este no anda en else
    que otro comando puedo usar ???????

  • Maurizio Accica

    Hola. He cargado el proyecto con éxito y debo decir que está hecho muy bien. Sin embargo, tiene un error común a todas las implementaciones que de aquí también me he desarrollado: el “landscape” cambio de orientación -> “portrait” y / o viceversa, el título de la Toolbar no se corresponde con el título del fragmento etc. En la práctica, el título de la Toolbar coincide con el título principal. ¿Existe una solución? gracias … Complimenti.

  • Jaime Tellez

    Buen día James! una vez más, gracias por la informacion tan nutricional que brindas a toda la comunidad. y de paso, me permito hacerte una consulta:
    Tengo varios items en el NavDrawer y cada uno con su respectivo Fragment, lo que quiero, es que por ejemplo un item “INICIO” tengo un boton, que cuando lo presiono, me lleva a otro Fragmen, el cual esta en la NavDrawe, el problema es que al ponerme en ese nuevo Fragment, como es lógico, el Titulo de la ActionBar y la selección en el NavDrawer, siguen siendo el de “INICIO”, ya que se me dificulta cambiarlos desde el Fragment anterior que supongo es donde se debe hacer. Me podrias guiar alguna manera de hacer ésto? Gracias por tu trabajo!

  • Aris

    Buenas, y como puedo añadir contenido a los fragment?

  • Alguien tiene el código fuente de este ejemplo, funcional?

  • Developer

    Buenas dias James

    me esta presentando un error en el xml activity_main donde me dice

    android.view.InflateException: Binary XML file line #14: Error inflating class android.support.design.widget.NavigationView.

    no se por que si yo tengo todas las libreria agregada

    compile ‘com.android.support:design:22.2.0’

    existe alguna razon por la cual pasa eso , para tener una idea por donde resolver mi problema .

    gracias

    • Jerson Granados

      Tengo el mismo error. La libreria agregada es
      compile ‘com.android.support:design:23.0.1’. No encuentro ninguna solucion en internet. Ayuda por favor

  • Jordan Ramírez

    Hola. Muchas gracias antes que nada. Actualmente estoy usando Android Studio y mi proyecto va en la versión 5.0 y me da errores en:

    import android.support.v4.widget.DrawerLayout;
    import android.support.v4.widget.NavigationView;
    La verdad no sé que esté sucediendo pero es la razón de que mi código no trabaje :L Podrías ayuddarme con eso? Gracias! Dejo mi correo por alguna cosa. jordanramirez.lph@gmail.com

  • Juan Pablo Gosalvez

    Excelente aporte, era justo lo que buscaba para implementar en mi aplicación. Estoy muy agradecido.

  • DanieLucas

    Hola, los saludos de Brasil , me pregunto si me puede ayudar con una pregunta que se golpeaba la cabeza durante horas, seguí su tutorial para crear un NavigationView pero no puedo de ninguna manera abrir un nuevo diseño para cada elemento seleccionado en la lista ( Por ejemplo , la selección de “carrito ” que la aplicación se abrirá una nueva página ) . Lo siento si esto es una pregunta tonta , soy nuevo en la programación y es tan difícil en esta parte . Le agradezco su respuesta.

  • Manuel Alonso Talledo Rondoy

    Hola, como le hago para poner 2 pestañas en uno de los fragments (section_fragment)…

  • Juan Enrique

    Como siempre excelente tutorial, se te agradece tus aportes, encerio mil gracias, una consulta @JamesRevelo:disqus, como podria perzonalizar el nav_header para que en lugar de poner un texto estatico sea uno extraido desde base de datos? lo puedo hacer desde la actividad principal de la actividad que lama el NavigationDrawer o debo crear una clase en donde extraiga la informacion de la base de datos y la setee en el xml?

    Saludos

  • dev

    Buenos días Jemes

    Estoy tratando de mantener seleccionado el ítem
    que está en otra categoría , pero no me está
    funcionando. Si se fija en el ejemplo que usted coloca al momento de presionar
    en el menú la opción “Cerrar Sesión “

    No se queda seleccionada como los de más ,
    es posible ponerlo ¿?

    • Hola dev. Usa el atributo android:checkable="true" dentro de las etiquetas que deseas que se marquen.

      Normalmente los submenus no son secciones por lo que cerrar sesión lanza una acción inmediata. Sin embargo usa el código que te digo para obligar el comportamiento.

      • dev

        Hola James , haciendo lo que me dijiste lo hace bien , pero cuando presiono otro iten del menu , se me queda marcado el anterior y el que he seleccionado tambien osea tengo dos items seleccionada :s . como puedo hacer para resetear el anterioir ?

  • Gian Silva

    hola buenas noches…
    Soy nuevo en el entorno de Android Studio… Bueno mi duda es como mandar a llamar un Activity diferente para cada Item, me refiero a que cuando le demos a Carrito, Producto o cualquier otra opcion, cada una de ella nos lleve a un Activity independiente…???

    Espero y me puedas ayudar, seria de gran ayuda….

    • Hola Gian. Puedes usar un switch donde el parámetro será el identificador del elemento del drawer que se selecciono. Dependiendo de ello así mismo vas iniciando las actividades con startActivity()

      • Gian Silva

        ah ok muchas gracias por el aporte…!!!

  • Oscar

    Hola, que gran post me ayudo mucho, pero queria saber si en cada item del menu se puede poner un color de fondo diferente.

    • Has probado usar el método setActionView() para setear un diseño distinto del view?

      • Zte Blade L3

        Hola, que tal buen dia, no eh probado con ese método, mas o menos como ser

      • Oscar

        Hola, que tal gracias por responder, no eh probado con ese método, me podrías aclarar un poco de como se utilizaria?

  • Simon K

    Hola de nuevo!,

    estoy llego un par de días trabajando con este tutorial, y la verdad que ya empiezo a entender bastante como funciona. He complemntado el código que ofreces con tus explicaciones y la verdad que es genial. ¡Muchas gracias!.

    Solo una pequeña duda. He ido haciéndolo todo paso a paso, copiando trozos de código y editándolos, pero cuando voy a hacerlo con la parte java, no me reconoce R, lo que sea. He borrado esa parte, y lo he ido escribiendo manualmente, pero aunque me reconoce R.Layout, despues ya no puedo engancharlo con el layout correspondiente, y si copio el código directamente, pues no me detecta “R”, ¿sabrías que podría estar pasando?

    Saludos y gracias.

    • Hola Simon. Eso se debe a que tal vez estás usando un paquete distinto en tu AndroidManifest. Recuerda que el paquete java de tu proyecto debe estar alineado con esa referencia para que la construcción sea correcta. Verifica y me cuentas.

      • Simon K

        Buenas, muchas gracias por contestar. No entiendo qué comprobar ni como hacerlo exactamente, ¿podrías aclararlo algo más?

        Gracias!

        • Me refiero a que si el atributo package de la etiqueta tiene el mismo nombre de paquete que tu usas en tu carpeta java.

          • Simon K

            Gracias por la aclaración. Sí, es el mismo en manifest y en en package.
            ¿sabes a que podría deberse?. Realmente lo que estoy haciendo es ir copiando tu código para ir elaborando una app de prueba paso a paso. Al hacer esto no me reconocía “R”, y al importarlo desde android, no relaciona los layaout cuando debe hacerlo, es decir, cuando escribir

            setContentView(R.layout. ) e intento añadir actividad_principal(siendo
            este el nombre de un archivo .xml no me lo reconoce.

          • La importación de R sucede porque tengo dividido mi paquete java en dos subpaquetes llamados modelo y ui. ¿Has descargado el proyecto para probarlo?

          • Simon K

            Si, tu código me funciona correctamente, es al intentar simularlo en mi proyecto de prueba paso a paso, cuando tengo los problemas.

          • Entonces arregla la estructura de los paquetes primero para que todo sea acorde. Recuerda actualizar el manifest con el paquete que tienes. Tal vez haya una desconfiguración por los nombres de los archivos.

  • Lucia

    Hola! fue justo lo que he estado buscando, muchas gracias por el aporte :D, lo seguí al pie de la letra solo que me marca error en esta parte:

    app:menu=”@menu/drawer_view”

    en el tutorial no venia crearlo en ninguna parte (me refiero a drawer_view) por lo que no se que lleve. Lo sustituí por nav_menu pero al correr la aplicación en mi celular no se podía!! decía que se había detenido la aplicación y simplemente no se abría.

    Si le quitaba esa parte (app:menu=”@menu/drawer_view”) no me marcaba error y si corría en mi celular sin problema, funcionaba el menú deslizante pero claro no me aparecían mis opciones de menú, ningún item, esta en blanco el menú :(

    ¿Cómo lo soluciono para que me aparezcan mis opciones?. De ante mano gracias!!

    • Hola Lucía. Allí va nav_menu, me confundí con los nombres. Con eso ya corre normalmente.

  • Pablo Espinosa

    Buenas, fantástico tutorial, ¡muchas gracias!. Pero tengo una pregunta, ¿cómo sería si para cargar dentro de cada opción del menú drawer, quisiera cargar tabs?. Es decir, la primera opción del menú tendría 1 pestaña (no haría falta hacer nada), la segunda opción tendría 2 pestañas, 3 la tercerca, etc.

    Gracias!

  • Pablo Espinosa

    er

  • Cristopher

    Una consulta, funciona para versiones de android 2.3 ??

  • Diego Fernando

    Amigo muy bueno tu post 100% funcional, quisiera hacerte una pregunta, quiero que cuando seleccione un item, en el fragmento que se posiciona en el main_content, salga una lista de datos traidos de una BD MySQL ya sea usando recyclerview o no se, quisiera saber si me puedes ayudar con esto, alguna referencia a otro tutorial o algo que me sirva junto con lo que tu hiciste en este tutorial.

  • Oscar Salcedo

    Hola soy bastante nuevo en programación, he modificado el código agregando fragmentos y otras cosas mas pero al momento de correr mi aplicación en el emulador al comenzar me sale en blanco luego cuando presiono los item ya me salen los fragmentos que he creado, no se que me falta una ayuda por favor, gracias de antemano muy bueno el tuto!!!

    • Oscar Salcedo

      alguien me podria ayudar, este es el codigo de mi Main Activity:

      package aplicacion.android.navegacion.jones;

      import android.os.Bundle;
      import android.support.design.widget.NavigationView;
      import android.support.v4.app.Fragment;
      import android.support.v4.app.FragmentManager;
      import android.support.v4.view.GravityCompat;
      import android.support.v4.widget.DrawerLayout;
      import android.support.v7.app.ActionBar;
      import android.support.v7.app.AppCompatActivity;
      import android.support.v7.widget.Toolbar;
      import android.view.Menu;
      import android.view.MenuItem;

      public class MainActivity extends AppCompatActivity {
      /**
      * Instancia del drawer
      */
      private DrawerLayout drawerLayout;

      /**
      * Titulo inicial del drawer
      */
      private String drawerTitle;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      setToolbar(); // Setear Toolbar como action bar

      drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
      NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
      if (navigationView != null) {
      setupDrawerContent(navigationView);
      // Añadir carácteristicas
      }
      drawerTitle = getResources().getString(R.string.home_item);
      if (savedInstanceState == null) {

      // Seleccionar item
      }

      }

      private void setToolbar() {
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);
      final ActionBar ab = getSupportActionBar();
      if (ab != null) {
      // Poner ícono del drawer toggle
      ab.setHomeAsUpIndicator(R.drawable.ic_menu);
      ab.setDisplayHomeAsUpEnabled(true);
      }

      }

      private void setupDrawerContent(NavigationView navigationView) {
      navigationView.setNavigationItemSelectedListener(
      new NavigationView.OnNavigationItemSelectedListener() {

      @Override
      public boolean onNavigationItemSelected(MenuItem menuItem) {
      selectDrawerItem(menuItem);
      return true;
      }
      });
      }

      public void selectDrawerItem(MenuItem menuItem) {
      Fragment fragment = null;

      Class fragmentClass;
      switch (menuItem.getItemId()) {
      case R.id.nav_home:
      fragmentClass = fragmento1.class;
      break;
      case R.id.nav_productos:
      fragmentClass = fragmento2.class;
      break;
      case R.id.nav_carrito:
      fragmentClass = fragmento3.class;
      break;
      case R.id.nav_ordenes:
      fragmentClass = fragmento4.class;
      break;
      case R.id.nav_facturas:
      fragmentClass = fragmento5.class;
      break;
      case R.id.nav_log_out:
      System.exit(0);
      default:
      fragmentClass = fragmento1.class;
      }

      try {
      fragment = (Fragment) fragmentClass.newInstance();
      } catch (Exception e) {
      e.printStackTrace();
      }

      // Insert the fragment by replacing any existing fragment
      FragmentManager fragmentManager = getSupportFragmentManager();
      fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();

      // Highlight the selected item, update the title, and close the drawer
      menuItem.setChecked(true);
      setTitle(menuItem.getTitle());
      drawerLayout.closeDrawers();

      }

      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
      if (!drawerLayout.isDrawerOpen(GravityCompat.START)) {
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
      }
      return super.onCreateOptionsMenu(menu);
      }

      @Override
      public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
      case android.R.id.home:
      drawerLayout.openDrawer(GravityCompat.START);
      return true;

      default:
      return super.onOptionsItemSelected(item);

      }

      }

      }

      • Hola Oscar.

        ¿La aplicación te genera algún error?

        • Oscar Salcedo

          siii lo que pasa es que cuando lo ejecuto al abrir, la primera pantalla me sale en blanco, cuando presiono los items recien me sale el contenido eso era lo que no entendia

          • Hola compañero, pues al parecer el primer item te sale en blanco porque al momento de obtener por primera vez la instancia del drawer en el método onCreate() tu no llamas a selectItem().

            Debes llamarlo para que el contenido se inicie desde el principio, de lo contrario solo aparecerá cuando cambies entre opciones, ya que solo estás llamando selectItem() en la escucha.

          • Oscar Salcedo

            Muchas gracias James, me podrias especificar el codigo que me faltaria, soy muy nuevo en esto, estoy aprendiendo.

          • En onCreate amigo. Tu tienes comentada la linea para seleccionar el item inicial. Algo como:

            drawerTitle = getResources().getString(R.string.home_item);
            if (savedInstanceState == null) {
            selectItem(drawerTitle);
            }

      • Juan Manuel

        Hola, ante todo gracias por esta publicación, me está ayudando mucho. Tengo una duda, a ver si alguien puede ayudarme.

        ¿Cómo puedo, desde código, acceder al “header” del Navigation View (atributo headerLayout) y hacerlo no visible?

        Saludos y gracias.

        • Hola Juan. Has probado usando @null en ese atributo?, mejor dicho, que efecto quieres lograr?

  • Daniel García

    Una pregunta, porque no subes el código a Github?

    • Hola Daniel.

      Sería bueno, solo que el sistema de descargas que tengo me permite hacer llegar los contenidos a más personas.

  • Aniel Cisneros

    Hola, aquí nuevamente acudiendo a las preguntas sobre este tema… Estoy creando mis actividades para cada opción del menú, pero el detalle es que cuando lanzo la actividad, ya no puedo acceder al menú lateral (es un activity hijo y ocupa toda la pantalla por default, pero no se como cambiarlo).

    Deseo que en todo momento (en cada actividad) se pueda acceder, o bien, agregar un acceso a la actividad principal (o mantener visible en todo momento la ActionBar). He investigado un poco y creo que existe un método en el ActionBar para mostrar este “acceso de retorno” pero me provoca un error de Null Pointer o algo así (porque la actividad no muestra la ActionBar).

    ¿Puedes orientarme?

    • ¿Tienes un pantallazo que muestre lo que deseas implementar?

      La verdad no entiendo lo del acceso directo.

      • Aniel Cisneros

        Perdón, creo que me explayé demasiado jejeje… simplemente quise explicar si existe una manera de poder acceder al menu Lateral (creado en este tutorial) desde las demás actividades creadas para cada opción (no usaré el section_fragment, sino un layout para cada opción). He creado los layouts/activity para cada opción de mi menu, pero al cargarlos, no me muestra el drawer ni el ActionBar (se cargan a pantalla completa y solo se ve el área de notificaciones y el layout de mi actividad.

        Deseo saber si se puede usar el Menu Lateral en todas mis Actividades para poder acceder a él desde cualquier actividad. O bien, mostrar en cada actividad el ActionBar con un Acceso o retorno (Flechita negra a un lado del title) a la actividad Principal (activity_main).

        ¡Gracias!

        • Hola Aniel.

          La idea de usar fragments es esa. Mantener el drawer en una sola actividad para no tener que crear una actividad especial con un drawer y luego heredar las actividades desde allí.

          ¿Se te dificulta mantener el contenido de las secciones en cada fragmento?

          • Aniel Cisneros

            Upss!

            Si, es que como soy usuario nuevecito (y de paquete) pues no entiendo muy bien lo de los fragments… pero creo que ahora estoy usando fragments basado en el tutorial de los TabLayout’s y ya estoy incrementando un poco más mis conocimientos en cuanto a ellos. Pero aún así quisiera expandirlos más.

            ¿Tendrías alguna referencia para aprender mejor el manejo de fragments?

            ¡Gracias!

          • Tengo este tutorial: http://www.hermosaprogramacion.com/2014/09/android-aplicaciones-fragmento/

            Aunque debo expandirlo un poco más, es de utilidad.

            Un fragmento es un modulo de interfaz que puede ponerse, quitarse y reemplazarse dentro de una actividad.

            Esto le da versatilidad a la interfaz, ya que puedes actualizar el contenido de tu actividad con diferentes layouts.

          • Aniel Cisneros

            Muchas gracias por el tutorial… parece que ya le voy entendiendo un poco más… aunque como ya tengo construida las actividades para cada sección de mi menú, lo voy a dejar así, más adelante si tengo un espacio, voy a rediseñar la aplicación usando los Fragmentos. Además ahorita estoy siguiendo tu tutorial sobre las TabLayout’s, en donde también se usan fragmentos para cargar las “gridView’s” pero en mi caso lo ajusté para que cargue ListView’s en cada ViewPager asociada a las TabLayouts… ya va avanzando un poco más el proyectito que estoy haciendo. Seguimos adelante, y recalco: ¡Excelentes tutoriales!

          • Gracias Aniel. Saludos :D

  • Aniel Cisneros

    ¡Hola! Excelente tutorial. Ya quedó!

    Ahora voy a realizar cada Actividad para las opciones del Navigation Menu, para realizarlas necesitaría un tutorial donde expliques como realizar una actividad que “excede” la pantalla y usar Scrolling :)

    ¿Tienes alguna?

    ¡Saludos!

    • Hola Aniel.

      No se si me equivoque, pero creo que necesitas usar el componente envolviendo los elementos del layout de tu actividad.

      • Aniel Cisneros

        Muchas gracias por la orientación, lo voy a intentar.

        ¡Saludos!

  • Lorena Soledad

    Hola! Me sirvió mucho este tuto.
    Te hago una consulta/sugerencia:

    Si usás onOptionsItemSelected y onCreateOptionsMenu, me sale el menu desde la Toolbar, y cuando toco la tecla de menú, además de aparecerme en el Drawer.
    Comenté esas dos funciones, y anda como quiero (Solamente poder ver el menú desde el Nav Drawer)

    Imagino que el menú se inflatea gracias al atributo ap:menu desde el XML, y no es necesario inflatearlo con esas dos funciones.

    Gracias, excelentes todos los tutos. =D

    • Gracias por comentar Lorena, quienes les suceda lo mismo ya sabrán como implementar el código.

      Saludos!

  • Oscar Sequeiros

    ¡Buen aporte!
    Disculpa la molestia, pero tengo el siguiente error y no las soluciones que encontré no dan resultado.
    “This activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.”
    Si pudieras ayudarme estaría enormemente agradecido.
    Gracias por compartir, permiso.

    • James Revelo

      Hola Oscar.

      Creo que eso sucede porque en tu archivo styles.xml el tema no extiende de Theme.AppCompat.Light.NoActionBar o Theme.AppCompat.NoActionBar.

      Si no deseas usar los temas anteriores, entonces asegúrate de colocar los siguientes atributos:
      false
      true

  • Daniel

    Disculpa pero ami no me habré todo corre bien se ejcuta pero en el cel dice se detiene la aplicación q será

    • James Revelo

      Hola Daniel.

      ¿En el emulador corre bien, pero en el celular corre mal?, ¿es lo que intentas decir?

      • Daniel

        No compila bien pero no habre se detiene la aplicación
        Ya lo q revisado un buen y nada q habre y ya ahora me tira lo de los thema que será

        • James Revelo

          Hola Daniel. ¿Que tipo de error te sale?

          ¿Te aseguraste de poner las dos actividades en el AndroidManifest?

          • Aniel Cisneros

            Hola Buen dia. Estoy tratando de correr esta aplicación en mi Cel Nexus 4 con Lollipop 5.0.1, y he corregido algunos detalles (que vienen diferentes en el código y me estaban atorando en la programación, pero ya los salvé). El problema es que ya no existen errores en el código pero al ejecutarlo en el Cel, se me cierra apenas se está “abriendo” la aplicación. No entiendo lo que indicas de agregar las dos actividades en el Android Manifest (soy muy muy novato). Sé de programación, aunque no mucho sobre el código de Android. Espero me puedas ayudar. Y me sale el siguiente error cuando se “cierra” la aplicación en mi cel (tomado del debugger de Android Studio).

            —————–
            java.lang.RuntimeException: Unable to start activity ComponentInfo{org.xcuidi.zapolinguae/org.xcuidi.zapolinguae.MainActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2298)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
            at android.app.ActivityThread.access$800(ActivityThread.java:144)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:135)
            at android.app.ActivityThread.main(ActivityThread.java:5221)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
            Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
            at android.support.v7.app.AppCompatDelegateImplV7.setSupportActionBar(AppCompatDelegateImplV7.java:193)
            at android.support.v7.app.AppCompatActivity.setSupportActionBar(AppCompatActivity.java:96)
            at org.xcuidi.zapolinguae.MainActivity.setToolbar(MainActivity.java:49)
            at org.xcuidi.zapolinguae.MainActivity.onCreate(MainActivity.java:32)
            at android.app.Activity.performCreate(Activity.java:5933)
            at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2251)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
            at android.app.ActivityThread.access$800(ActivityThread.java:144)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:135)
            at android.app.ActivityThread.main(ActivityThread.java:5221)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
            07-20 01:15:33.534 18360-18360/? E/AndroidRuntime﹕ FATAL EXCEPTION: main
            —————–

          • Hola Aniel.

            ¿Estás usando el mismo archivo styles.xml que se muestra en el tutorial?

            Creo que este error se presenta porque no se está usando el tema NoActionBar como padre del tema de la aplicación.

            Si usas un estilo diferente, debes usar los atributos:

            false
            true

            Esto lo explico en este artículo: http://www.hermosaprogramacion.com/2015/06/toolbar-en-android-creacion-de-action-bar-en-material-design/

          • Aniel Cisneros

            Ya quedó!!
            El problema era que en el Manifest la referencia al estilo de la AppTheme era diferente que en el styles.xml :)

            Funcionando al 100% :) Gracias por el tutorial!

          • ajjaja ok mi hermano

  • Muy bueno tu tutorial, pero actualmente ya lo estoy implementando pero necesito ayuda con la seleccionar el item. No logro llamar la escucha “enNavigationItemSelectedListener” nose me podrias recomendar algun link para poder entenderlo mejor. Muchas gracias

    • James Revelo

      Hola Manuel.

      Que problema tienes?

      Fíjate que en este tutorial tratamos esa escucha para cambiar los fragmentos del contenido, ¿viste esa parte?

  • Luis

    Como puedo lanzar un nuevo activity con un intent al hacer click en una de las opciones del menu lateral? Saludos

    • James Revelo

      Hola Luis.

      Usar el método startActivity() dentro del controlador onNavigationItemSelected(). Fijate en el método del tutorial que se llama setupDrawerContent().

      • Luis

        Muchas Gracias Amigo! De verdad me haz sacado de un gran aprieto! Te lo agradezco Mucho! :)

        • James Revelo

          Con gusto Luis!

      • Rafel

        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
        // Marcar item presionado
        menuItem.setChecked(true);
        // Crear nuevo fragmento
        Intent intent = new Intent(getApplicationContext(), MyActivity.class);
        startActivity(intent);
        return true;

        Si perfecto, pero como puedo hacer que cada opción abra un activity?

        switch (position) {

        case 0:
        Intent intent = new Intent(getApplicationContext(), MyActivity1.class);
        startActivity(intent);

        break;
        case 1:
        Intent intent = new Intent(getApplicationContext(), MyActivity2.class);
        startActivity(intent);
        break;

  • daniel

    Magnífico tutorial. ¿Cómo puedo crear Layouts personalizados para cada sección? Es decir, cada vez que selecciono una categoría utliza el mismo layout para todos cambiando solo el nombre de la sección, mi intención es personalizar independientemente cada una de ellas. Gracias

    • James Revelo

      Hola Daniel.

      Al igual que le respondí a Alejandro, una opción para hacerlo es usar un drawable personalizado en el atributo icon de cada elemento <item>. Puedes ver mas en este tutorial http://www.jmhend.me/layerdrawable-menuitems

  • Alejandro

    Hola,
    Quería saber como podría poner números en los ítems y poder modificarlos desde el Main.

    Gran trabajo :)
    Saludos

    • James Revelo

      Hola Alejandro.

      ¿A que te refieres con números?

      • Alejandro

        Hola James,

        Me refiero a los típicos números que aparecen en el navigation drawer de la aplicación de Gmail. Yo antes los tenía puestos porque utilizaba un ListView pero ahora al usar el Navigation View no se como ponerlos.
        Aquí te dejo un ejemplo para que le eches un vistazo.
        http://i.stack.imgur.com/WCEeE.png

        • James Revelo

          Ya te comprendo Alejandro.

          Bueno, debido a que los items del menú se inflan desde un elemento , se me ocurre que cambies el atributo icon por un drawable personalizado.

          En este momento estoy creando un tutorial para usar tabs en donde personalizo un action button de un carrito de compras con la ayuda de este tutorial: http://www.jmhend.me/layerdrawable-menuitems.

          Miralo y me cuentas.

  • Víctor

    Hola, me dan muchos errores sobretodo en el MainActivity.java, primero me marca “R” en rojo, cuando lo importo me marca el resto de palabras que hay al lado de la “R” en rojo y la “R” ya bien, como soluciono esto?

    Gran aporte!

    • James Revelo

      Hola Víctor. Prueba usando la opción de Android Studio llamada “Rebuild Project” o “Clean Project”.

      También comprueba que tu paquete en el AndroidManifest.xml es el mismo que el de las clases.

  • Gonza

    EXELENTE. si señor y con mayusculas. Muy buen tutorial a lo profesional. Muchas gracias.
    Al final, tiras una pisca para el próximo tutorial no? jaja. Si este tutorial es exelente, las pestañas serán bien venidas. No olvides que a algunos se nos complica un poco el agregado de cases o el lanzamiento de diferentes fragments tanto en las pestañas como en el Drawer. Si no es muha molestia a futuro, dejanos un poquito mas facil a algunos lelos y pierdes 2 minutos en lanzar 2 Fragments.
    Abrazo y a analizar codigos!

    • James Revelo

      Gracias Gon :D

      jajaja espero hacer algún día un tutorial así.