Android Design Support Library (III): NavigationView

Consigue gratis tu cuenta

Crea una API REST con Node.js y MongoDB

En este curso vas a aprender a crear una API REST con Node.js y MongoDB, además de crear un entorno de desarrollo con Docker y Docker Compose.

Comenzar ahora
materialdesign Seguimos una semana más con nuestra serie de tutoriales donde aprenderemos a utilizar la nueva librería de diseño Android Design Support Library. En esta semana veremos como implementar el NavigationView, también conocido como Navigation Drawer.

NavigationView

Para el que no lo conozca,  esta view es un recurso que prácticamente utilizan la mayoría de aplicaciones Android, puesto que permite tener, en cualquier momento y de una manera accesible, un menu por encima de las vistas principales.

Show me the code

De la misma manera que en los pasado tutoriales, será muy sencilla su implementación. Primero añadiremos los elementos de navegación que queramos:
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="all">
        <item
            android:id="@+id/navigation_item_1"
            android:icon="@drawable/ic_posts"
            android:title="@string/drawer_item_posts" />
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@drawable/ic_users"
            android:title="@string/drawer_item_users" />

        <item
            android:id="@+id/navigation_item_3"
            android:icon="@drawable/ic_settings"
            android:title="@string/drawer_item_settings" />
    </group>

</menu>
Seguidamente añadiremos la view a nuestro layout, recalcar que todo deberá estar contenido en un DrawerLayout:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout 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.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/ic_action_search"
            app:fabSize="normal" />

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:itemIconTint="@color/my_secondary_text"
        app:itemTextColor="@color/my_secondary_text"
        app:menu="@menu/navigationdraweritems" />

</android.support.v4.widget.DrawerLayout>
Y por último la lógica para abrir y cerrar el Drawer:
private void setupNavigationView(){

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
Con todo esto conseguiremos tener nuestro NavigationView listo. device-2015-08-04-102736   Recordad que tenéis todo el código en el repositorio de GitHub.

¿Quieres seguir aprendiendo?