Inicio Android Interfaz de Usuario en Android: Navigation Drawer

Interfaz de Usuario en Android: Navigation Drawer

por admin

En este nuevo artículo del curso vamos a tratar otro de los componentes relacionados con la capa de presentación de nuestras aplicaciones, el menú lateral deslizante, o Navigation Drawer. Este menú es el que aparece en muchas aplicaciones al deslizar el dedo desde el borde izquierdo de la pantalla hacia el lado opuesto (también puede aparecer en el lado derecho, pero es menos frecuente).

El navigation drawer está disponible como parte de la librería de compatibilidad android-support-v4. Si estamos trabajando con Android Studio, en la mayoría de los casos no tendremos que añadir esta librería al proyecto de forma explícita ya que muy probablemente tengamos ya añadida la librería appcompat-v7 (se incluye por defecto en los proyectos de Android Studio), que depende de la primera.

En este artículo vamos a crear un menú lateral que cumpla todo lo posible las directrices marcadas por las nuevas guías de diseño de Material Design. Dicha guía establece que el menú de navegación lateral debe pasar por encima de la action bar y por debajo de la status bar (que será translúcida).

nav-drawer-material

Veremos cómo conseguir este efecto para versiones de Android a partir de la 5.0 Lollipop (API 21), mientras que en versiones anteriores la status bar permanecerá de color negro.

Vamos a empezar a crear nuestra aplicación, y comenzaremos como siempre creando la interfaz de usuario. Para añadir el navigation drawer a una actividad debemos hacer que el elemento raíz del layout XML sea del tipo <android.support.v4.widget.DrawerLayout>. Y dentro de este elemento colocaremos únicamente 2 componentes principales (en el orden indicado):

  1. El layout real de la actividad.
  2. El layout del menú lateral, que entre otras cosas hará las veces de contenedor de las distintas opciones del menú lateral.

Por ahora añadamos estos dos componentes en forma de <include>, en mi caso de ejemplo quedaría como sigue (/res/layout/activity_main.xml):

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Contenido de la actividad -->
    <include layout="@layout/content_layout" />

    <!-- Navigation Drawer Layout -->
    <include layout="@layout/navdrawer_layout" />

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

A destacar en el código anterior el atributo fitsSystemWindows del contenedor DrawerLayout, que será uno de los elementos que nos permitirá conseguir el efecto mostrado en la imagen anterior.

Veamos a continuación el layout de la actividad principal. Para este ejemplo utilizaré un layout muy similar a los ya mostados en los artículos anteriores sobre la action bar. Contendrá tan sólo un Toolbar, que estableceremos como action bar en el onCreate() de la actividad, y un FrameLayout que nos servirá como contenedor de los fragment que contendrán cada sección del menú lateral. Dicho de otra forma, cada sección de la aplicación la implementaremos mediante un fragment independiente, y al pulsar cada opción del menú lateral, instanciaremos el fragment de su tipo correspondiente y lo colocaremos en el lugar del FrameLayout indicado. Veamos cómo quedaría (/res/layout/content_layout.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:clickable="true"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <!-- Toolbar -->
    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/appbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <!-- Resto de la interfaz de usuario -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Para que la toolbar se visualice correctamente habrá que definir por supuesto el tema de la aplicación, los colores principales, … tal y como ya vimos en el artículo sobre el componente Toolbar.

El layout del navigation drawer requiere un poco más de explicación. Para conseguir que este layout se extienda por debajo de la barra de estado translúcida de forma que podamos conseguir el efecto ya comentado vamos a necesitar apoyarnos en una clase externa, extraída de la aplicación del Google I/O 2014, llamada ScrimInsetsFrameLayout. Podéis descargar esta clase desde el repositorio GitHub del curso, y una vez descargada incluirla en vuestro proyecto de Android Studio, por ejemplo en la misma carpeta de la actividad principal (es posible que tengáis que modificar el paquete java indicado al principio de la clase, para adaptarlo a vuestro proyecto).

Esta clase nos servirá como contenedor para el resto de la interfaz del menú lateral. Dentro de éste, incluiremos tan sólo una imagen de cabecera y una lista de tipo ListView que contendrá las opciones del menú.

<net.sgoliver.android.navigationdrawer.ScrimInsetsFrameLayout
    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/scrimInsetsFrameLayout"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/white"
    android:elevation="10dp"
    android:fitsSystemWindows="true"
    app:insetForeground="#4000"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@android:color/white"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/navheader"
            android:scaleType="centerCrop" />

        <ListView
            android:id="@+id/navdrawerlist"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:divider="@null"
            android:choiceMode="singleChoice" />

    </LinearLayout>

</net.sgoliver.android.navigationdrawer.ScrimInsetsFrameLayout>

Comentemos el código anterior. En el contenedor ScrimInsetsFrameLayout establecemos los atributos layout_width (que será el ancho del menú lateral, y que no debería sobrepasar los 320dp), layout_gravity con valor «start» de forma que el menú lateral aparezca por la izquierda de la pantalla («end» para que lo haga por la derecha), background y elevation para establecer el color de fondo y la elevación, establecemos a true el atributo fitsSistemWindows igual que hicimos en el DrawerLayout principal, y por último, un atributo específico de la clase llamado insetForeground que, sin entrar en muchos detalles, nos servirá para indicar como se «coloreará» la zona del layout que quede por debajo de la barra de estado. Utilizaremos el valor #4000 (negro translúcido) para conseguir el efecto de oscurecimiento del contenido inferior.

Debemos declarar además en nuestra aplicación este atributo insetForeground, lo que conseguimos creando un fichero en /res/values/attrs.xml con el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ScrimInsetsView">
        <attr name="insetForeground" format="reference|color" />
    </declare-styleable>
</resources>

Dentro del ScrimInsetsFrameLayout incluimos el resto de la interfaz del menú, que en nuestro casos será un simple LinearLayout vertical, que contendrá una imagen de cabecera, y una lista a la que hemos eliminado los divisores (atributo divider=»@null») y donde hemos establecido el modo de selección simple (choiceMode=»singleChoice»).

Un último detalle de la configuración XML de la aplicación, y que nos servirá para terminar de conseguir el efecto deseado. Para versiones de Android 5.0 o superior (API >= 21) debemos añadir a la definición del tema algunos atributos adicionales, para lo que crearemos un fichero styles.xml específico de dicha versión (/res/values-21/styles.xml) con las siguientes definiciones:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary_dark</item>
        <item name="colorAccent">@color/color_accent</item>

        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

</resources>

Definida la interfaz XML, nos centramos ya en la parte java de la actividad. Lo primero que haremos será añadir al menú (recordemos que se trata realmente de un ListView) las opciones que queremos que aparezcan disponibles. Para no complicar el ejemplo las añadiré directamente desde un array java convencional (como alternativa, en la documentación de Google tenéis un ejemplo de cómo cargar las opciones desde un XML). La forma de incluir estas opciones a la lista es mediante un adaptador normal, igual que hemos comentado en ocasiones anteriores. Lo haremos por ejemplo dentro del método onCreate() de la actividad:

//...
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

        private Toolbar toolbar;
        private ScrimInsetsFrameLayout sifl;
        private DrawerLayout drawerLayout;
        private ActionBarDrawerToggle drawerToggle;
        private ListView ndList;

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

            //Referencia al ScrimInsetsFrameLayout
            sifl = (ScrimInsetsFrameLayout)findViewById(R.id.scrimInsetsFrameLayout);

            //Toolbar
            toolbar = (Toolbar) findViewById(R.id.appbar);
            setSupportActionBar(toolbar);

            //Menu del Navigation Drawer (ListView)
            ndList = (ListView)findViewById(R.id.navdrawerlist);

            final String[] opciones = new String[]{"Sección 1", "Sección 2", "Sección 3"};

            ArrayAdapter<String> ndMenuAdapter =
                new ArrayAdapter<>(this,
                    android.R.layout.simple_list_item_activated_1, opciones);

            ndList.setAdapter(ndMenuAdapter);

            //...
	}

	//...
}

Como detalle, vemos que como layout de los elementos de la lista he utilizado el estandar android.R.layout.simple_list_item_activated_1 (ojo, esto es válido a partir de Android 4.x, pero no con versiones anteriores, para las que se podría utilizar en su lugar android.R.layout.simple_list_item_1). Con esto conseguiremos que la opción seleccionada se mantenga resaltada en el menú una vez se cierre y se vuelva a abrir (en Android 5.0 la opción seleccionada se sombreará con el color elegido como accentColor). Nota: esta opción de resaltado es sencilla y rápida (y es por eso por lo que la he elegido para este ejemplo), pero no cumple estrictamente con las nuevas directrices de estilo de Material Design. Para cumplir a rajatabla dichas recomendaciones de Material Design tendríamos que definir algún adaptador y/o selector personalizado para definir los colores y comportamiento de nuestros elementos del menú.

A continuación vamos a crear los fragments que mostraremos al seleccionar cada una de las tres opciones del menú de navegación. Y en este paso no nos vamos a complicar ya que no es el objetivo de este artículo. Voy a crear un fragment por cada opción, que contenga tan sólo una etiqueta de texto indicando la opción a la que pertenece. Obviamente en la práctica esto no será tan simple y habrá que definir cada fragment para que se ajuste a las necesidades de la aplicación.

Como ejemplo muestro el layout XML y la implementación java de uno de los layout. Primero el layout (fragment_fragment1.xml) :

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.sgoliver.android.navigationdrawer.Fragment1">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/fragment1" />

</FrameLayout>

Y su clase java asociada (Fragment1.java), que se limitará a inflar el layout anterior:

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

public class Fragment1 extends Fragment {

    public Fragment1() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_fragment1, container, false);
    }
}

Los dos fragments restantes serán completamente análogos al mostrado.

Ya tenemos listo el menú y los fragments asociados a cada opción. Lo siguiente será implementar la lógica necesaria para responder a los eventos del menú de forma que cambiemos de fragment al pulsar cada opción. Esto lo haremos implementando el evento onItemClick del control ListView del menú, lógica que añadiremos al final del método onCreate() de nuestra actividad principal.

@Override
protected void onCreate(Bundle savedInstanceState) {

    //...

    ndList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int pos, long l) {
            Fragment fragment = null;

            switch (pos) {
                case 0:
                    fragment = new Fragment1();
                    break;
                case 1:
                    fragment = new Fragment2();
                    break;
                case 2:
                    fragment = new Fragment3();
                    break;
            }

            getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame, fragment)
                .commit();

            ndList.setItemChecked(pos, true);

            getSupportActionBar().setTitle(opciones[pos]);

            drawerLayout.closeDrawer(sifl);
        }
    });
}

Comentemos un poco el código anterior. En primer lugar lo que hacemos es crear el nuevo fragment a mostrar dependiendo de la opción pulsada en el menú de navegación, que nos llega como parámetro (position) del evento onItemClick. En el siguiente paso hacemos uso del Fragment Manager con getSupportFragmentManager() para sustituir el contenido del FrameLayout que definimos en el layout de la actividad principal por el nuevo fragment creado. Posteriormente marcamos como seleccionada la opción pulsada de la lista mediante el método setItemChecked(), actualizamos el título de la action bar por el de la opción seleccionada mediante setTitle(), y por último cerramos el menú llamando a closeDrawer().

Bien, pues ya tenemos la funcionalidad básica implementada, y sólo nos quedaría ajustar algunos detalles más para finalizar el trabajo. Los más importantes: deberíamos mostrar un indicador en la action bar que evidencie al usuario la existencia del menú lateral y deberíamos además permitir al usuario abrirlo haciendo click en el icono de la aplicación (además del gesto de deslizar desde el borde izquierdo hacia la derecha). Estas tareas las vamos a realizar ayudándonos de una clase auxiliar llamada ActionBarDrawerToggle.

Vamos a comenzar creando un objeto de esta clase ActionBarDrawerToggle y asociándolo a nuestro navigation drawer mediante el método setDrawerListener() para, entre otras cosas, responder a través de él a los eventos de apertura y cierre del menú. Para esto último sobrescribiremos sus métodos onDrawerOpened() y onDrawerClosed(). Todo esto lo haremos también dentro del método onCreate() de nuestra clase principal. Veamos el código y a continuación lo comentaremos:

@Override
protected void onCreate(Bundle savedInstanceState) {

    //...

    //Drawer Layout
    drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);

    drawerLayout.setStatusBarBackgroundColor(
        getResources().getColor(R.color.color_primary_dark));

    drawerToggle = new ActionBarDrawerToggle(
         this, drawerLayout, toolbar, R.string.openDrawer, R.string.closeDrawer){

        @Override
        public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }
    };

    drawerLayout.setDrawerListener(drawerToggle);
}

En primer lugar vemos que el constructor de la clase ActionBarDrawerToggle recibe 4 parámetros (Ojo: existe otro constructor con 5 paramétros, que recibe además una referencia a la toolbar, pero cuando la toolbar esté configurada como Action Bar debemos usar el constructor de 4 parámetros). Como casi siempre pasaremos el contexto actual, una referencia al DrawerLayout, y los ID de dos cadenas de caracteres que se utilizar a efectos de accesibilidad de la aplicación (en mi caso las defino simplemente con los valores «Menú Abierto» y «Menú Cerrado»).

Aún nos falta mostrar el icono del navigation drawer en la action bar y permitir al usuario abrir el menú pulsando sobre él. Para ello, al final del método onCreate() habilitaremos la pulsación del icono llamando a los métodos setDisplayHomeAsUpEnabled() y setHomeButtonEnabled(), y añadiremos al evento onOptionsItemSelected() (el encargado de procesar las pulsaciones sobre la action bar, una llamada inicial al método onOptionsItemSelected() del objeto ActionBarDrawerToggle creado anteriormente, de forma que si éste devuelve true (significaría que se ha gestionado una pulsación sobre el icono de la aplicación) salgamos directamente de este método.

public void onCreate(Bundle savedInstanceState) {

    //...

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    //...
}

Por último, dos indicaciones más incluidas en la documentación oficial de la clase ActionBarDrawerToggle:

  • Implementar el evento onPostCreate() de la actividad, donde llamando al método syncState() del objeto ActionBarDrawerToggle.
  • Implementar el evento onConfigurationChanged() de la actividad, donde llamaremos al método homólogo del objeto ActionBarDrawerToggle.

Veamos cómo quedarían en el código de estos dos últimos pasos:

@Override
protected void onPostCreate(Bundle savedInstanceState) {
	super.onPostCreate(savedInstanceState);
	drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
	super.onConfigurationChanged(newConfig);
	drawerToggle.onConfigurationChanged(newConfig);
}

Llegados aquí, podemos ejecutar el proyecto y ver si todo funciona correctamente. Verificaremos que el menú se abra, que contiene las opciones indicadas y que al pulsar sobre ellas aparece en pantalla el contenido asociado. Verificaremos además que el título de la action bar se va actualizando según el estado del menú y la opción seleccionada.

Si por ejemplo lo ejecutamos sobre Android 5.x lo veremos como se muestra en las siguientes capturas (sobre Android 4.x se vería de forma casi idéntica a excepción de la barra de estado, que sería negra):

demo-android-5

Espero que estos últimos artículos os hayan servido para aprender a construir aplicaciones utilizando los componentes de diseño más representativos de la plataforma Android (la Action Bar y el Navigation Drawer).

Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.

También te puede interesar

36 comentarios

Pedro Joya 11/08/2013 - 9:41

Muchas gracias por tu artículo, me parece muy interesante.

Leyendo la guía de diseño de la Navigation Drawer me he dado cuenta de que Google también recomienda que la primera vez que se ejecute la aplicación el Navigation Drawer se muestre abierto, para que el usuario lo «descubra» desde el inicio.
Para solucionarlo, he utilizado una preferencia SharedPreferences, de manera que cuando no ésta no esté presente (la primera vez que se ejecute la aplicación después de instalarla) se abra automáticamente el Navigation Drawer y entonces escribo la preferencia para que no suceda el resto de las veces.

Responder
Ezequiel 22/08/2013 - 10:38

Buenas , probando tu código he descubierto que en el switch que selecciona los fragments los casos empiezan en 1 y deberian empezar en 0. Al menos así es como a mi me funciona. Muchas Gracias por tu artículo gracias a ese blog estoy realizando mi proyecto fin de carrera :).

Responder
Juan 25/08/2013 - 0:49

Muchísimas gracias por todo, estoy en ello pero creo que acabaré dejaandolo
no se de código ni jota pero con el nuevo android Studio y tus tutoriales me apaño.
He descargado las referencias desde GitHub y las estoy probando, lastima que solo
se hacer eso probar porque como toque una linea del código lass estropeo, sigue así
me es de mucha ayuda y referencia en algunos pinillos pero acabaré dejandolo ;(
por falta de tiempo y porque el ingles no es lo mio un saludo seguir así.

Responder
Edu 08/09/2013 - 19:55

Buenas

Quería ver si me podrías contestar a una consulta que tengo sobre el navigation drawer. El caso es que en uno de los fragments de las opciones he montado dos tabs. tengo dos problemas:
1º cuando despliego de nuevo el menú me sale «debajo/detras» del contenido del tab que tengo seleccionado
2º el menú que se despliega aparece debajo de los tabs.

dejo el enlace a una imagen, que creo que va a aclarar más!!

https://dl.dropboxusercontent.com/u/14057180/Screenshot_2013-09-08-20-00-11.png

sabes por qué puede ser?

gracias de antemano

Responder
Diego 13/09/2013 - 16:21

Hola, felicitaciones tus tutoriales me han ayudado mucho a aprender android.
Quisiera saber si me puedes ayudar con una consulta; ¿cómo se puede colocar un icono a demás del texto en las opciones de menú?

Responder
Jose 17/09/2013 - 17:46

Hola tengo el siguiente problema, cuando hago este comando:
FragmentManager fragmentManager = getSupportFragmentManager();

me aparece el siguiente error:
the method getsupportfragmentmanager() is undefined for the type new view.onclicklistener()

Poque pasa eso?

Responder
Sergio 21/09/2013 - 21:54

Hola, llevo siguiendo tu tutorial desde que empecé en Android y me ha sido de gran ayuda. Muchas gracias ante todo! :)

Mi problema es: cuando al seleccionar una opción del Navigation Drawer se abre el Fragment correspondiente, quiero que el Fragment contenga un Spinner para poder elegir varias opciones. Al insertar el Spinner me da un fallo ya que no reconoce el Adaptador dentro del método OnCreate en la clase que extiende Fragment.

Gracias y a ver si corrijo el problema!

Responder
Hatzel 24/09/2013 - 1:18

Muy buen aporte. ¿De casualidad no tienes algo parecido que simule a una Navigation Drawer para versiones anteriores de la API 14?

Responder
Alvaro 28/09/2013 - 13:11

Muy buen tutorial, el mejor hasta ahora que he encontrado.

Tengo un par de problemas…

El primero es que al abrir un Fragment se queda de fondo el contenido del MainActivity.

Y el segundo es que no consigo utilizar botones dentro de los fragments.

Bueno y una duda personal que tengo ya que me gustan más las activities (será por que las uso mejor) no consigo hacer que navigation drawer funcione con activities.

Responder
Jose Contreras 05/10/2013 - 21:26

Hola muy buenos tus cursos, me gustaría ver si puedes cubrir una sesión para tratar tema de qué o qué no debemos hacer para mejorar el rendimiento de nuestras aplicaciones a nivel de uso de CPU, Memoría, disco y no sé que otras cosas que siempre dejamos a un lado.

Responder
LigaPro Manager 08/10/2013 - 22:21

Hola, ante todo felicitarte por el PDF, merece la pena la ayuda (aunque en la versión 3 de la que dispongo no venía el tema que estás tratando aqui).

Pues bien, estoy creando un menú lateral mediante el DrawerLayout.
Ejemplo:

public void seleccionaOpcionMenu(int menuSeleccionado)
{
Fragment fragment = null;
switch (menuSeleccionado)
{
case Constantes.MENU_NOTICIAS:
fragment = new CargarNoticias();
break;

case Constantes.MENU_CLASIFICACION:
fragment = new CargarClasificacion();
break;

default:
fragment = new CargarClasificacion();
break;
}

FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.contenido, fragment).commit();

menuIzquierdo.setItemChecked(menuSeleccionado, true);
menuPrincipal.closeDrawer(menuIzquierdo);
}

———————————————————————————

Ahora bien, mi intención es tener la funcionalidad de cada sección dividida y organizada dentro del Fragment, o sea, en el Fragment que sea:

public class CargarNoticias extends Fragment
{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
// Obtengo el Layout
View layout = inflater.inflate(R.layout.cargar_noticias, container, false);

// BOTON PRUEBA
final Button btnPrueba = (Button) layout.findViewById(R.id.BtnPrueba);
btnPrueba.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
…………………………………………..
}
});

return layout;
}
}

¿Cómo haríamos para realizar una nueva llamada a ‘seleccionaOpcionMenu’ sin crear una nueva actividad (aunque creándola creo que tampoco funcionaría) para ir a otra pestaña si tengo un botón para acceder a ella??

Mi intención no era llamar a una de la secciones del menu izquierdo, sino a una sección hija del fragment cargado actualmente, en plan jerarquía.

O es que tengo que definir varios Layouts en el mismo XML y ocultarlo/mostrarlo según mis necesidades? Esto me parecería muchisimo más engorroso, si es que se puede hacer…

No se si me habré explicado bien. A ver si me podéis ayudar.
Gracias!!

Responder
Jorge Vidal 11/10/2013 - 16:49

Gracias por todo eres el mejor… =)

Responder
Raul 20/10/2013 - 10:01

Estuve buscando mucho como implementar este interfaz y aqui fue donde mejor lo explican
Gracias!

Responder
Ruudy 29/10/2013 - 17:50

Especialmente este apartado tiene muchas erratas…

Responder
admin 30/10/2013 - 9:44

Hola Ruudy, ya que has invertido tu tiempo en dejar un comentario, ¿podrías decir exactamente los errores que has encontrado para que pueda corregirlos?

Responder
ugarte 01/11/2013 - 14:02

Oliver para poner contenido el la lista como se muestra aquí http://developer.android.com/design/media/navigation_drawer_titles_icons.png
cómo debería hacerlo?, me refiero a poner los tittle

Responder
xerox 12/12/2013 - 19:41

Hola, antes que nada agradecer el esfuerzo por publicar el tutorial.

Respecto al mismo, a la hora de ejecutar el proyecto en una máquina virtual con android 4 el proyecto funciona sin problemas, sin embargo cuando se ejecuta sobre android 3, por algún motivo los clicks en la parte superior izquierda de la pantalla (lo que hace que se habra el Drawer) no genera una llamada a onPrepareOptionsMenu y con lo cual no se oculta nunca action_search. ¿Sabes a que se debe?.

Responder
xerox 12/12/2013 - 19:44

En concreto el fallo ocurre usando un dispositivo con la api 11.

Responder
xerox 12/12/2013 - 22:38

Vale solucionado hay que sustituir las líneas ActivityCompat.invalidateOptionsMenu(MainActivity.this); que están en onDrawerClosed y onDrawerOpened por supportInvalidateOptionsMenu()

Saludos.

Responder
Raquel 16/12/2013 - 9:59

Muchs gracias por los tutos, me están siendo de gran ayuda.

Sigo con la curiosidad de qué erratas son esas a las que se refiere Ruuudy…espero que no nos deje con las ganas y comparta con nosotros sus conocimientos.

Responder
Jean 13/01/2014 - 1:04

Muy buenos los tutoriales, no se si me puedan ayudar como poner iconos a cada opcion .

Saludos.

Responder
manu14s 27/01/2014 - 15:31

Hola y gracias por todo.
A ver si alguien puede ayudarme.
El caso es que cuando pulso sobre un item del drawer, por ejemplo el fragment1,este se carga,pero y como se puede hacer para q me vuelva a mostrar la actividad principal, vamos que lo unico que puedo hacer es cargar mas fragments desde el dawer pero nunca dejarlo como antes de cargar un item. No se si me explico bien.
Una vez abierto un fragment no hay manera de volver a la actividad principal?solo deja cargar otros fragments …

Responder
Juan Carlos 17/02/2014 - 20:17

Hola, me he basado un poco en tu tutorial, pero tengo un error en .replace, me marca que tengo un error, The method replace(int, Fragment) in the type FragmentTransaction is not applicable for the arguments (int, Fragment), ya he checado todo y aun asi nada, espero tu respuesta

Responder
Ever Cabrera 31/03/2014 - 22:58

Buenas quisiera saber como hacer para que al loguearme lo primero que vea sea el menu lateral abierto, y si eso es factible…?

Responder
Adrian 11/04/2014 - 6:00

Hola ! De antemano gracias por el tutorial. Me he fijado que varios han preguntado sobre como poner iconos…. de pura casualidad ¿Tienes respuesta para eso? Una vez más gracias y espero me puedas resolver la duda :D

Responder
Juan 17/04/2014 - 22:45

Buenas, he conseguido que funcione el drawer perfectamente, pero no tengo ni zorra en la implementación de código para cada fragment.

En resumen en un fragment quiero cargar imagenes y en otro recoger información de sharedpreferences, pero no doy logrado, si alguien me refiriera a algún tuto, se lo agradecería.

He trabajado muy poco los fragments.

Gracias.

Responder
Jordi 25/05/2014 - 11:20

Creo que no deberías tratar tanto los temas de retrocompatibilidad, ya que lían al lector, por sencillo que sea. Con decir que el código con las nuevas apis es válido a partir de v3 ya vale. Las opciones de compatibilidad algún día se abandonarán, no se puede programar siempre de esa manera. Todo esto me recuerda a IE6…
Por lo demás, el mejor tutorial web en castellano de la red sobre Android. Felicidades.

Responder
Hector 30/12/2014 - 15:42

¿Si quisiera incorporar al navigation drawer una seccion que al hacer click abriera un fragment y dentro de ese fragment poder usar SqliteOpenHelper como podria hacerlo?

Segun lei en manuales para usar SqliteOpenHelper se deve extender la clase a SqliteOpenHelper,
pero la clase del navigation drawer extiende de Fragment.

¿Alguien podria ayudarme a comprender el funcionamiento de SqliteOpenHelper usado en Fragment?

Responder
Carlos 23/03/2015 - 7:13

Excelente tutorial Salvador, todo me ha funcionado perfectamente, sin embargo tengo una duda. Para quitar la compatibilidad a versiones anteriores getSupportActionBar() en vez de getActionBar() que cambios harían falta? me indica que tengo que usar el api 11 en lugar del 14 que quiero usar.

Gracias!!!

Responder
Jonathan 01/05/2015 - 18:47

Tengo un problema, la clase ActionBarActivity no me aparece, y cuando agrego el android-support-v7 para agregar esa clase, me sale un error cuando corro el programa, alguien me puede ayudar?

Responder
alumno 21/05/2015 - 15:17

Espero que alguien pueda ayudarme. Sigo el tutorial y todo perfecto pero ahora tengo un problema ¿Y si quiero que una de las opciones lo que haga es abrir un mapa?

Según veo en el tutorial Mapas en Android (Google Maps Android API v2) – I, mi clase debería extender de «android.support.v4.app.FragmentActivity» pero ya extiende de «Fragment» y por lo que tengo entendido una clase no puede extender de dos, solo de una.

Si pongo a mi clase a extender de «android.support.v4.app.FragmentActivity», entonces al compilar me da error en el switch en:

fragment = new Fragment3();

¿Cómo puedo solucionar esto?

Gracias.

Responder
vampire 06/07/2015 - 1:14

como podria inicializar que al cargar la aplicacion me muestre el contenido del fragment 1?

Responder
Edgardo 07/07/2015 - 19:24

Hola, muchas gracias por los tutoriales, están muy completos, lo que si con la librería com.android.support:design:22.2.0 actualmente ScrimInsetsFrameLayout se puede agregar como nativo, ya no es necesario copiar la clase en nuestro proyecto. Saludos.

Responder
Pepe 19/08/2015 - 12:37

Buenas, antes de todo felicitarte por tus tutoriales, decirte que son fantásticos.

Te escribo porque tengo una duda ya que acabo de empezar con Android y hay cosas que se me escapan. Cuando hablas de impoertar la clase ScrimInsetsFrameLayout desde tu GibHub, no entiendo que es lo que me tengo que descargar exactamente. ¿Podrías explicar un poco mas detallado dónde está la clase?, quiero decir, exactamente ¿qué es lo que me tengo que descargar?.

Gracias!

Responder
miguel 10/09/2015 - 2:14

Hola muy bueno tu post pero tegumentaria saber si se pueden implementar iconos a cada opción?

Responder
Edwin Alba 16/09/2015 - 1:35

Hola: no soy muy experto en programación en Android y me he retrasado en un proyecto debido a que quiero realizar un menú lateral como el que explicas. Serìa factible que me envíes el código fuente en un zip a mi mail ya que no he logrado descargarlo desde GitHub.

Muchas gracias por tu ayuda,

Edwin Alba
ed_alba@hotmail.com

Responder

Responder a xerox

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. Aceptar Más Información

Política de Privacidad y Cookies