EL BLOG DE ANTONIO LEIVA SOBRE DISEO Y DESARROLLO DE

INTERFACES EN ANDROID

NOTICIAS
APLICACIONES
DESARROLLO
#APPME
#LETSCREATE
Inicio Desarrollo Usando DrawerLayout para crear un Navigation Drawer (o men lateral)

Usando DrawerLayout para crear un

Navigation Drawer (o men lateral)
por Antonio Leiva Gordillo el may 16, 2013 en Desarrollo, Programacin | 49 comentarios

Ayer en el Google IO se nos present, entre otras novedades, una nueva versin de la Android
Support Library que incluye como gran novedad un nuevo layout para implementar el men
desplegabe que ya podemos ver en un gran nmero de aplicaciones.
Junto con ello, tambin se ha actualizado la pgina de developers, y viene un ejemplo con el
que puedes hacerte una idea de cmo implementarlo. Basndome en l, explico aqu cmo
conseguir la funcionalidad habitual de este tipo de mens.
Para empezar, actualiza desde el SDK Manager la Support Library a la versin r13.
Ya estars listo para comenzar a desarrollar. Necesitas un layout como el siguiente:
1 <android.support.v4.widget.DrawerLayout
2
xmlns:android="http://schemas.android.com/apk/res/android"
3
android:id="@+id/drawer_layout"
4
android:layout_width="match_parent"
5
android:layout_height="match_parent">
6
<!-- The main content view -->
7
<FrameLayout
8
android:id="@+id/content_frame"
9
android:layout_width="match_parent"
android:layout_height="match_paren
10
t">
11
12
<TextView
13
android:layout_width="wrap_content"
14
android:layout_height="wrap_content"
15
android:text="Prueba"/>
16
</FrameLayout>
17
<!-- The navigation drawer -->
18
<ListView android:id="@+id/left_drawer"
19
android:layout_width="240dp"
20
android:layout_height="match_parent"
21
android:layout_gravity="start"
22
android:choiceMode="singleChoice"
23
android:divider="@android:color/transparent"
24
android:dividerHeight="0dp"
25
android:background="#111"/>
26 </android.support.v4.widget.DrawerLayout>
Como puedes ver, el layout principal es un DrawerLayout, con un par de componentes en su
interior. El primero es el contenido que se va a mostrar en la actividad, es decir, lo que
vemos cuando el men lateral no se est mostrando. Aqu slo he aadido un TextView como

ejemplo, pero lo habitual ser tener un contenedor (FrameLayout) en el que se cargarn los
diferentes fragments en funcin de la opcin que se elija.
Los siguientes elementos que se aadan son todos los mens laterales que queramos
mostrar. Normalmente se mostrar slo uno, pero se pueden indicar tantos como sean
necesarios: uno para la izquierda y otro para la derecha, dos distintos que se muestren en
funcin de ciertas condiciones Aqu las opciones son mltiples.
Para indicar por dnde quieres que aparezca, hay que especificar la opcin layout_gravity. Se
puede indicar left y right, o start y end si queremos que aparezca a derecha o izquierda en
funcin del sentido de lectura del idioma.
El cdigo Java es bastante sencillo. En el onCreate se especifica con un adapter las opciones
que se van a mostrar en el men lateral, y se activa el botn de Home en la Action Bar:
1 public class MainActivity extends Activity implementsAdapterView.OnIte
mClickListener {
2
3

private DrawerLayout mDrawer;

private ListView mDrawerOptions;

private static final String[] values = {"Drawer 1", "Drawer

2","Drawer 3"};

6
7
8
9
10
11
12
13
14
15
16
17
18

/**
* Called when the activity is first created.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawerlayout);
getActionBar().setDisplayHomeAsUpEnabled(true);
mDrawerOptions = (ListView) findViewById(R.id.left_drawer);
mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);

19
mDrawerOptions.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, android.R.id.text1, values));
21
mDrawerOptions.setOnItemClickListener(this);
22
}
23
}
20

Como puedes ver, tambin he especificado que la clase implemente el onItemClickListener,

para que se realice una accin en el caso de que se pulse sobre una de las opciones. Lo nico
que hago es mostrar un Toast y cerrar el drawer:
1 @Override
2

public void onItemClick(AdapterView<?> adapterView, View

view, int i,long l) {

Toast.makeText(this, "Pulsado " + values[i],

Toast.LENGTH_SHORT).show();

4
5

mDrawer.closeDrawers();
}

Y por ltimo, se indica la accin a realizar cuando se pulse home. Si est abierto se cierra, y si
no se muestra:
1 @Override
2 public boolean onOptionsItemSelected(MenuItem item) {
3
switch (item.getItemId()){
4

case android.R.id.home:

5
6
7
8
9
10
11
12
13
14

if (mDrawer.isDrawerOpen(mDrawerOptions)){
mDrawer.closeDrawers();
}else{
mDrawer.openDrawer(mDrawerOptions);
}
return true;
}
return super.onOptionsItemSelected(item);
}

Y esto es lo bsico. A partir de aqu puedes personalizar hasta el infinito los drawers para que
tomen la apariencia que desees. Por supuesto, no es necesario que sean ListViews, sino que
puedes utilizar cualquier tipo de Layout de la complejidad que necesites.
Qu te parece el nuevo drawer? Fcil de utilizar, verdad? En cuanto tenga tiempo,
actualizar la aplicacin del blog con este nuevo ejemplo, para que puedas verlo funcionando.
En el siguiente artculo te presento cmo aadir el icono oficial del Navigation Drawer, para la
Action Bar nativa y tambin para ABS.

Te ha gustado? Comprtelo
- See more at: http://www.limecreativelabs.com/usando-drawerlayout-para-crear-un-navigationdrawer/#sthash.AG9SfLrP.dpuf