Navigation Drawer con Fragments – Android Design Support Library

Esta entrada es la continuación de la anterior, Navigation Drawer – Android Design Support Library, en la cual vamos a añadir fragmentos, es decir, un Navigation Drawer con Fragments.

Hay que tener en cuenta que aquí solo se mostrará como añadir los fragmentos al tutorial anterior, es decir, solo cambian los 4 primeros puntos del tutorial anterior, el resto es idéntico.

Todo lo que has se va a mostrar en esta entrada también lo puedes seguir ver en el siguiente vídeo de abajo, sobretodo si tenéis problemas en como crear el segundo fragmento.

Actividad MainActivity.java

Layout activity_main.xml

Cómo hemos hecho antes, vamos a ver el código al completo y lo vamos comparando:

<?xml version="1.0" encoding="utf-8"?>
<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/navigation_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="@bool/fitsSystemWindows">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/status_bar_kitkat_height"
            android:background="?colorPrimary"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/status_bar_lollipop_height"
            android:background="?colorPrimaryDark"/>

    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/status_bar_margin_top">

        <FrameLayout
            android:id="@+id/fragment"
            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="?actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ToolbarTheme" />

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="@bool/fitsSystemWindows"
        app:headerLayout="@layout/navigation_drawer_header"
        app:menu="@menu/navigation_drawer_menu"
        app:theme="@style/NavigationViewTheme" />

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

El único cambio aquí es que hemos eliminado el TextView para añadir lo que será nuestro fragmento, el FrameLayout de ID fragment. Cuando presionemos el botón Inbox en el Navigation Drawer, este FrameLayout será “sustituido” por el layout fragment_inbox.layout, mostrando tanto el botón como el texto que mencionamos en el apartado anterior.

Si se presionase Starred, en vez de reiniciar la actividad, simplemente se “sustituiría” otra vez dicho layout por el fragment_starred.xml. Un ejemplo claro de lo que ocurre en este tutorial, es lo que hace la app Gmail al ir presionando los elementos de su Navigation Drawer.

Fragment InboxFragment.java

Primero crea el archivo java, haz botón derecho con el ratón en la carpeta donde están los archivos java, selecciona New y después a Java Class.

Aquí es donde vamos a especificar que queremos que haga el botón dentro del fragmento, en mi caso simplemente cambiará el texto, tanto lo que pone como su color:

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.Button;
import android.widget.TextView;

import com.videumcorp.desarrolladorandroid.navigationdrawerandroiddesignsupportlibraryandfragments.MainActivity;
import com.videumcorp.desarrolladorandroid.navigationdrawerandroiddesignsupportlibraryandfragments.R;

public class InboxFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        // Inflate the layout for this fragment
        final View view = inflater.inflate(R.layout.fragment_inbox, container, false);

        ((MainActivity) getActivity()).getSupportActionBar().setTitle("Fragment Inbox");

        Button buttonChangeText = (Button) view.findViewById(R.id.buttonFragmentInbox);

        final TextView textViewInboxFragment = (TextView) view.findViewById(R.id.textViewInboxFragment);

        buttonChangeText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                textViewInboxFragment.setText("This is the Inbox Fragment");
                textViewInboxFragment.setTextColor(getResources().getColor(R.color.md_yellow_800));

            }
        });

        return view;
    }

}

Como se puede ver, se le indica al fragmento que el layout que tiene que utilizar es el fragment_inbox, es decir, el fragment_inbox.xml que crearemos después de termianr con este archivo. Cuando crees el fragmento para la sección Starred, recuerda que tendrás que cambiar también este código dentro de StarredFragment.java para que asocie este java con fragment_starred.xml.

Presta atención que para llamar a la ActionBar o Toolbar de la actividad principal tienes que especificarlo, utilizando el (MainActivity) como se puede ver en la línea 21.

En la línea 24 podemos ver como se ha declarado el TextView como final, ya que sino, el IDE te dará un error al utilizarlo dentro del método onClick. En el resto de líneas destacadas, 31 y 32, se cambia el texto y el color del TextView al presionar el botón.

Layout fragment_inbox.xml

Crea el archivo xml, haz botón derecho con el ratón en la carpeta layout, selecciona New y después a layout resource file.

Este xml es muy básico y tiene poco que explicar. Simplemente es un RelativeLayout que contendrá nuestros dos elementos mencionados, un Button y un TextView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text inside fragment"
        android:id="@+id/textViewInboxFragment"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="159dp" />

    <Button
        android:backgroundTint="@color/md_yellow_700"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button change text"
        android:id="@+id/buttonFragmentInbox"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Esto mismo que hemos hecho, lo repetiríamos otra vez, creando otro archivo java y otro xml para el fragmento Starred, y cambiando todo lo que hacía referencia a Inbox por los nuevos archivos de Starred.

De aquí en adelante todo el tutorial es igual que lo que se vio en la entrada anterior.

Layout navigation_drawer_header.xml

Este Layout no tiene nada de especial, simplemente sería la parte superior de la Figura 1. con el logo, fondo y textos que he añadido yo personalmente. Simplemente fíjate que la línea destacada es la que se encarga de que el margen del avatar sea diferente en función de en que versión de Android estamos ejecutando la app ya que si no tiene una status bar translucida el margen sería de 16dp y si la tiene translucida debería ser de 41dp para que no quede por debajo de ella viéndose francamente mal.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:gravity="bottom"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:background="@drawable/header" />

    <ImageView
        android:layout_marginLeft="16dp"
        android:layout_marginTop="@dimen/navigation_drawer_header_margin"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:scaleType="centerCrop"
        android:src="@drawable/logo" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_gravity="left|bottom"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="8dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:text="Desarrollador Android"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:text="javier@segoviacordoba.com"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    </LinearLayout>

</FrameLayout>

Menú navigation_drawer_menu.xml

Aquí es donde se hace la magia como he mencionado anteriormente. Con la Android Design Support Library nos ahorramos tener que crear la estética de cada ítem, de añadir divisores (dividers) o los subtítulos (subheaders) ya que se hace todo automáticamente con el siguiente código, el cual desguazaremos tras verlo al completo.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:checked="true"
            android:id="@+id/item_navigation_drawer_inbox"
            android:icon="@drawable/ic_inbox_black_24dp"
            android:title="Inbox" />
        <item
            android:id="@+id/item_navigation_drawer_starred"
            android:icon="@drawable/ic_action_toggle_star"
            android:title="Starred" />
        <item
            android:id="@+id/item_navigation_drawer_sent_mail"
            android:icon="@drawable/ic_action_content_send"
            android:title="Sent mail" />
        <item
            android:id="@+id/item_navigation_drawer_drafts"
            android:icon="@drawable/ic_action_content_drafts"
            android:title="Drafts" />
    </group>

    <item android:title="Subheader">
        <menu>
            <item
                android:id="@+id/item_navigation_drawer_settings"
                android:icon="@drawable/ic_action_content_mail"
                android:title="Settings" />
            <item
                android:id="@+id/item_navigation_drawer_help_and_feedback"
                android:icon="@drawable/ic_action_action_delete"
                android:title="Help and feedback" />
        </menu>
    </item>

</menu>

El primer atributo que podemos ver es android:checkableBehavior="single", que se encarga de que solo se pueda seleccionar un ítem al mismo tiempo, para que si el usuario presione dos elementos no ocurra ningún fallo. Además, es un grupo ya que se indica mediante group.

Lo siguiente que se encuentra dentro del grupo es bastante evidente y más si tienes la Figura 1. a mano, son los cuatro primeros elementos del navigation drawer, donde cada uno tiene un id para poder hacer referencia desde el MainActivity.java como pudimos ver en el método setupNavigationDrawerContent, el icono que queremos que muestre, y ojo, gracias a la librería, nosotros únicamente tenemos que añadir el icono completamente oscuro, es decir, negro y con una opacidad del 100%, ya que automáticamente se aplicarán tanto la opacidad como el color siguiendo las especificaciones de material design. El último atributo de cada uno de esos elementos es el título.

Y la última parte también es bastante clara, es otro grupo, pero que al querer que incluya un subtítulo (subheader) en lugar de simplemente encontrarse separado, se utiliza android:title="Subheader", y ya está, los siguientes elementos son los dos últimos que faltan, Settings y Help and feedback.

Fácilmente tenemos listo, estéticamente hablando, nuestro Navigation Drawer, con sus elementos, subtítulos y divisores. Ya todo lo que queda son pequeños arreglos.

Archivos de estilos styles.xml para todas las versiones

Colores mediante el archivo colors.xml

Los colores utilizados los puedes añadir tanto de mi GitHub como visitando esta página sobre Color en Material Design. Simplemente crea un archivo colors.xml en app/res/values/colors.xml.

Los strings son los que se crean por defecto al ir creando cada uno de los elementos.

<resources>
    <string name="app_name">Navigation Drawer</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_settings">Settings</string>
</resources>

Archivos de atributos attrs.xml para todas las versiones

Drawables utilizados

Los drawables utilizados los puedes encontrar en la siguiente carpeta de GitHub.

Además, recomiendo visitar las siguientes páginas para obtener más recursos:

• Roman Nurik Assets
• Google Material Design Icons

Segunda Actividad

Cómo se ha dicho, el elemento del navigation drawer Settings, inicia una segunda actividad, por lo que es necesario crearla, aunque no tiene nada de especial, simplemente os dejo aquí los cambios que he añadido al SettingsActivity.java y al activity_settings.xml, ya que el archivo menu_settings no ha sido modificado.

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.TypedValue;
import android.view.Menu;
import android.view.MenuItem;

public class SettingsActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        TypedValue typedValueColorPrimaryDark = new TypedValue();
        SettingsActivity.this.getTheme().resolveAttribute(R.attr.colorPrimaryDark, typedValueColorPrimaryDark, true);
        final int colorPrimaryDark = typedValueColorPrimaryDark.data;
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().setStatusBarColor(colorPrimaryDark);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_inbox, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

<FrameLayout 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="?actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ToolbarTheme" />

    <TextView
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Settings"
        android:textColor="@color/md_text" />

</FrameLayout>

Y ya está todo listo, tu navigation drawer debería funcionar correctamente si lo ejecutas.

Puedes ver más información sobre Navigation Drawer en la página oficial de Google en inglés pulsando aquí.