Archivo por meses: Noviembre 2015

Tutorial Material Design en Android #4

Crear un Navigation Drawer para Android

Después de una pequeña pausa retomamos la serie de tutoriales de Material Design en Android, en el tutorial anterior aprendimos como agregar iconos (actions) a nuestra Toolbar, así que lo que sigue ahora es aprender cómo implementar el Navigation Drawer.

El Navigation Drawer en Android es un panel que podemos utilizar en nuestra app y que por lo general contiene un menú para movernos o “navegar” por las distintas secciones en la aplicación, la principal ventaja es que puede permanecer oculta la mayor parte del tiempo y desplegarse solo cuando el usuario lo necesite, de esa manera “economizamos” el espacio en la pantalla del teléfono, como en los tutoriales anteriores, si quieren aprender un poco más sobre la teoría siempre pueden consultar la documentación oficial de google Navigation Drawer

patterns_navdrawer_settings1

También vale la pena mencionar que hay básicamente 3 estilos de Navigation Drawer:

  • Navigation Drawer por debajo de la Toolbar oscurenciendola
  • Navigation Drawer por debajo de la Toolbar sin oscurecerla
  • Navigation Drawer por encima de la Toolbar

El estilo que queramos lograr dependerá de cómo escribamos el xml en nuestras views, y un poco de Java también

playstore_styledrawer_bellowdrawer_over_toolbar

Pues manos a la obra, o mejor dicho al código, vamos a nuestro archivo activity_main.xml y deberíamos de tener algo así.

activity_main

Vamos a modificar un poco nuestro código xml y agregaremos un par de elementos llamados DrawerLayout, FrameLayout y NavigationDrawer, viendo la siguiente imagen quedara más claro lo que vamos a hacer en nuestra activity.

drawer_layout_demon

Vamos a crear un elemento android.support.v4.widget.DrawerLayout y vamos a meter todo nuestro código existente dentro de esa etiqueta.

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.alevsk.materialdesignapp.MainActivity">

        <include
            android:id="@+id/app_bar"
            layout="@layout/app_bar" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/app_bar"
            android:text="@string/hello_world" />

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

Lo siguiente es crear un Fragment y lo que hago normalmente para tener mi código más organizado es crear un nuevo Package en el proyecto llamado fragments y ahí empiezo a crearlos, para eso en su com.alevsk.materialdesignapp > botón secundario > new > Package y le ponen el nombre que deseen, yo le puse fragments para que sea descriptivo, después de eso procedemos a crear la nueva clase como se muestra en la siguiente imagen.

fragments

Nos aparecerá el siguiente cuadro de dialogo donde tendremos que elegir el nombre del nuevo menú NavigationDrawer (fragmento), le ponemos NavigationDrawerFragment o como ustedes quieran pero que sea descriptivo hacia el hecho de que será el menú de nuestra aplicación, asegúrense de marcar la opción de crear el layout xml y podemos desmarcar las dos opciones de abajo, el código que nos genere Android studio será más limpio y nosotros implementaremos los métodos que necesitamos desde 0, para terminar damos clic en el botón de Finish.

navigationdrawerfragment

Android Studio nos habrá generado dos archivos, NavigationDrawerFragment.java y fragment_navigation_drawer.xml

1

2

En nuestro fragment_navigation_drawer.xml vamos a modificar el elemento principal de Fragment a RelativeLayout quedando el código de la siguiente manera

<RelativeLayout 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="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</RelativeLayout>

Hicimos este cambio ya que más adelante necesitaremos agregar elementos extras como un RecyclerView, a continuación vamos al archivo activity_main.xml y vamos a agregar nuestro NavigationDrawer usando un elemento fragment de la siguiente forma.

    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

El codigo final del activity_main.xml es el siguiente:
3

Lo que sigue es crear un objeto NavigationDrawer en nuestro MainActivity.java

NavigationDrawerFragment drawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);

Si por alguna razón les da un error de compatibilidad asegúrense que en NavigationDrawerFragment.java en la sección de import (hasta arriba) el Fragment que esté utilizando sea android.support.v4.app.Fragment

Ya que estamos en este archivo vamos a crear de una vez un método llamado setUp que va a servir para inicializar los componentes de nuestro NavigationDrawer, también vamos a utilizar un nuevo objeto llamado ActionBarDrawerToogle cuya finalidad es la de manejar nuestro DrawerLayout y Toolbar de una manera más eficiente, así como encargarse de manejar el evento de abrir y cerrar el panel de navegación.

    public void setUp(DrawerLayout drawerLayout, Toolbar toolbar) {
        mDrawerLayout = drawerLayout;
        mToolbar = toolbar;
        mDrawerToggle = new ActionBarDrawerToggle(getActivity(),drawerLayout,toolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }

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

Tip: R.string.open y R.string.close son necesarios para el constructor del ActionBarDrawerToggle ya que son los textos que aparecen al abrir y cerrar el panel, pueden definir esas cadenas en su archivo strings.xml que se encuentra en res/values

<string name="open">Abierto</string>
<string name="close">cerrado</string>

De nuevo, aquí mucho cuidado, asegúrense de que el Toolbar que estén importando sea android.support.v7.widget.Toolbar para efectos de compatibilidad, ya que si utilizan la clase por defecto les va a dar errores en los demás archivos.

Lo que acabamos de hacer en nuestro código es definir un nuevo ActionBarDrawerToggle, vinculamos el DrawerLayout y Toolbar que estamos recibiendo desde nuestro MainActivity y preparamos el listener (manejador de eventos) para cuando el usuario abra y cierre el panel de navegación.

En el MainActivity.java después de instanciar nuestro NavigationDrawer mandamos llamar el método

public class MainActivity extends ActionBarActivity {

    private Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(toolbar);

        NavigationDrawerFragment drawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp((DrawerLayout)findViewById(R.id.drawer_layout),toolbar);
    }

La clase NavigationDrawerFragment quedo de la siguiente manera
NavigationDrawerFragment

En este punto, si corremos nuestra aplicación y deslizamos haciendo tap desde la izquierda podemos observar como la pantalla comienza a oscurecerse, si ponemos un poco más de atención podemos ver el texto de nuestro fragment encima de la app”Hello Blank Fragment“, ha funcionado! ahora solo nos queda poner un poco de estilo para hacer a aplicación más agradable a la vista.

navigation_drawer_feo

En nuestro archivo colors.xml (se encuentra en app/res/values/colors.xml) podemos definir nuevos colores, por ejemplo yo he definido uno nuevo llamado graypanel

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#E91E63</color>
    <color name="primaryColorDark">#C2185B</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="grayPanel">#EEEEEE</color>
    <color name="lightGray">#d6d6d6</color>
    <color name="colorAccent">#8BC34A</color>
</resources>

Y despues en nuestro fragment_navigation_drawer.xml definimos el color de fondo a nuestro RelativeLayout con android:background=”@color/grayPanel”

<RelativeLayout 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:background="@color/grayPanel"
    tools:context="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</RelativeLayout>

navigation_drawer_color

¿Un poco mejor cierto? pero todavía le falta bastante, por ejemplo no resulta obvio para el usuario saber que la aplicación tiene un menú lateral, lo que vamos a hacer es agregar el clásico icono de menú de lado izquierdo, para eso utilizaremos un método llamado syncState de nuestro objeto DrawerToggle.

Nos vamos a nuestro archivo NavigationDrawerFragment.java y agregamos el siguiente código después de haber hecho el mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });

Corremos la app de nuevo y automáticamente nos aparecerá un icono de menú.

menu_icon

Una vez abierto el menú de navegación rara notaran que si hacemos tap donde se supone que esta el botón de menú el panel se cierra, es bastante raro pues la aplicación no está respetando las “capas”, podemos corregir ese comportamiento bajando un poco el NavigationDrawer.

Modificamos un poco nuestro archivo main_activity.xml, si se fijan bien ahora nuestro DrawerLayout esta debajo de nuestra app_bar, ambos elementos estan al mismo nivel y rodeados por un LinearLayout con orientación vertical.

<LinearLayout 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:layout_width="match_parent"
    android:background="@color/lightGray"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <fragment
            android:id="@+id/fragment_navigation_drawer"
            android:name="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:layout="@layout/fragment_navigation_drawer"
            tools:layout="@layout/fragment_navigation_drawer" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

drawer_navigation

Y eso es todo por ahora, así es como se programa un NavigationDrawer desde 0 :), en el siguiente tutorial implementaremos las opciones en nuestro menú de navegación, para eso aprenderemos a utilizar los RecyclerViews.

He montado un repositorio en Github con el código de la aplicación que vamos desarrollando durante los tutoriales, si tienen alguna duda pueden consultarlo directamente de ahí o preguntarme en los comentarios https://github.com/Alevsk/Material-design-en-Android

salu2

Poema: Joven Japonesa

Girl

Entre mis viejas notas encontré este poema que escribí para la clase de literatura mesoamericana durante la universidad, la clase me la daba una doctora en literatura llamada Agustina Larrañaga, era bastante buena y hacia que la clase fuera muy dinámica y divertida, aprendías cosas sin darte cuenta. En una ocasiona nos dejó como actividad crear un poema.

Haciendo uso de ciertas métricas aprendí que escribir poesía es toda una ciencia, en un punto, incluso tuvimos que hacer uso de un tipo de aritmética musical cuyo objetivo era saber si un poema tenía “ritmo”, que es lo que hace que los poemas suenen bien. Más información

Bueno, continuando con el tema del poema, la dinámica consistía en tomar al azar una letra del abecedario y con ella escribir un poema donde la mayor parte de sus palabras empezaran con dicha letra, a mí me tocó la letra “J” y eso me dio oportunidad de jugar con el sonido de la “G” también, bueno sin más pre ambulo les dejo el poema 🙂 (Tres estrofas de 4 versos cada una).

Joven japonesa

Joven japonesa quien se jacta de sus joyas
Joven y jovial, juraste jaranear donde crecen las secoyas
El jade de tus ojos justifica tus holguras
Jocosa justiciera, eres la que pone jaque a mis locuras

Joven japonesa, jurguina generosa
Mi Gioconda, mi jaspe y mi diosa
Jubilosa jacaranda, el jable de mis ojos
Eres la culpable de mis jueves sin redrojos

Joven japonesa, visitante de Johana
Avezada justificas, la distancia jemal, entre tu cadera y tu catana
Jocunda japonesa, de juglaresa pasión, si lo pides
Clavaría una jabalina en mi corazón