Contenido

- Historia y Evolucion

- Esquema de Colores

- Toolbar

- Recycler View

- Card View

- Floating Action Button

- Navigation Drawer (del Wizard)

Historia

En los inicios de Android no había reglas a la hora de diseñar la interfaz y la experiencia de usuario. 

El primer marco de diseño que definieron fue Holo, introducio en Android 4.0. Desde ese momento ya no se era tan libre a la hora de diseñar una app, y la inteción dentrás era unificar la experiencia entre los distintos dispositivos móviles (tablets y celulares).

Material Design

Material Design es la guía de diseño para Android, introducida a partir de la versión 5.0 Lollipop (API Level 21). Es mucho más estricta y exigente que Holo, y sigue mantiendo su lineamiento minimalista que tanto caracteriza a Android y que agrada a los usuarios.

Y aquí se fue un poco más lejos, ya la intención no sólo era mantener la experiencia en dispositivos móviles sino también en los Navegadores y los dispositivos Weareables.

Material Design

Se pasó de una interfaz plana a un juego de sombras para crear la sensación de profundidad, en una interfaz basada en capas. Un botón debe sobresalir, para que invite a ser presionado.

También se apoyaron mucho en las animaciones para crear un aspecto más realista a la hora de interactura.

Evolución

Evolución

Evolución

Evolución

STYLING

Esquema de Colores

- Primary

- PrimaryDark

- Accent

Material Themes

TOOLBAR

TOOLBAR

Cuando se lanzó por primera vez la ActionBar, no tuvieron en cuenta la compatibilidad hacia atrás, con lo que reproducir este elemento en version de Android se volvió una tarea muy pesada, con librerías hechas por terceros.

Luego estandarizaron un poco el proceso, con la librerías de compatibilidad de Android; y a su vez la ActionBar fue ganando protagonismo y funcionalidad.

Ahora finalmente, decidieron lanzar la ToolBar, con el objetivo de generalizar todo en un único elemento, y además hacerla más versatil, ya que la podemos ubicar donde queramos, podemos animarla, y demás.

TOOLBAR

Si deseamos incorporar la Toolbar, debemos utilizar un theme que no tenga ActionBar, ya que sino tendríamos 2 barras: la ActionBar del Theme  y la Toolbar que agreguemos.

Para simplificar, vamos a usar un LinearLayout y vamos a agregar la Toolbar, de la siguiente manera

TOOLBAR

Podemos capturar el funcionamiento del HOME button, ya que se trata de un item del menu de opciones o menu de acciones.

RECYCLER VIEW

RECYCLER VIEW

Así como la Toolbar llegó para unificar las ActionBar y agregarle funcionalidades, el RecyclerView vino a unificar las ListView y GridView, independizándose de la organización de los elementos, y dejando esa tarea a un LayoutManager.

Además es mucho más eficiente en el uso de memoria y procesamiento, reciclando el layout que utiliza para cada renglón sin la necesidad de tener que llamar a findViewById en cada uno de ellos y en su lugar, utiliza un ViewHolder, que contiene la estructura de cada renglón.

RECYCLER VIEW

Antes de incorporar este elemento en nuestra app, debemos asegurarnos de que estemos usando las librerías de diseño que lo incorporan, o en su defecto, agregarla:

compile 'com.android.support:design:25.3.1'

El nro de versión, va a depender de las herramientas que estemos utilizando, y hay que tener en cuenta que todas las librerias de android que usemos deben tener exactamente el mismo número para evitar conflictos entre ellas

RECYCLER VIEW

1- Agregamos el RecyclerView en nuestro layout

<android.support.v7.widget.RecyclerView
    android:id="@+id/recylerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

2- Tomamos una referencia al mismo desde la Actividad, y le decimos que vamos a organizar los elementos segun un Layout Lineal

recylerview = (RecyclerView) findViewById(R.id.recylerview);

LinearLayoutManager llm = new LinearLayoutManager(getApplicationContext());
recylerview.setLayoutManager(llm);

RECYCLER VIEW

Ahora, vamos a necesitar un Adaptador, para decirle como queremos mostrar los elementos dentro del mismo. (Lo mismo que hacemos si customizaramos un ListView).

Pero primeramente, necesitamos un Objeto que identifique a los elementos a mostrar. Supongamos que vamos a tener un listado de Películas. Asi que creemos ese objeto!

Cuando lo tengamos, pasemos a crear el Adaptador

RECYCLER VIEW

Para el Adaptador, vamos a necesitar un Layout que sea la "vista" de los datos. Llamemoslo recyclerview_item

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

    <!-- TITULO -->
    <TextView
        android:id="@+id/peliTitulo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- DESCRIPCION -->
    <TextView
        android:id="@+id/peliDescripcion"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

RECYCLER VIEW

Después vamos a crear dentro de la Activity, una clase para representar al adaptador

class PelicuasListAdapter extends RecyclerView.Adapter<PelicuasListAdapter.PeliculaViewHolder> {

        List<Peliculas> peliculasList;

        PelicuasListAdapter(List<Peliculas> listado) {
            this.peliculasList = listado;
        }

        @Override
        public int getItemCount() {
            return peliculasList.size();
        }

        @Override
        public PeliculaViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recylclerview_item, viewGroup, false);
            PeliculaViewHolder vh = new PeliculaViewHolder(v);

            return vh;
        }
}

RECYCLER VIEW

Dentro de la clase Adapter, creamos al ViewHolder

public class PeliculaViewHolder extends RecyclerView.ViewHolder {
    private TextView peliTitulo;
    private TextView peliDescripcion;

    PeliculaViewHolder(View itemView) {
        super(itemView);
        peliTitulo = (TextView) itemView.findViewById(R.id.peliTitulo);
        peliDescripcion = (TextView) itemView.findViewById(R.id.peliDescripcion);
    }
}

@Override
public void onBindViewHolder(PeliculaViewHolder peliViewHolder, final int i) {
    peliViewHolder.peliTitulo.setText(peliculasList.get(i).titulo);
    peliViewHolder.peliDescripcion.setText(peliculasList.get(i).descripcion);
}

Por último, hacemos la adaptación propiamente dicha de los datos y su vista

RECYCLER VIEW

Creamos unas películas de prueba y veamoslo en funcionamiento

List<Peliculas> peliculas = new ArrayList<>();
peliculas.add(new Peliculas("Los Vengadores", "Superheroes de Marvel"));
peliculas.add(new Peliculas("Batman", "Heroe de Ciudad Gotica"));
peliculas.add(new Peliculas("SpiderMan", "El trepa muros"));

PelicuasListAdapter pelisAdapter= new PelicuasListAdapter(peliculas);

recylerview.setAdapter(pelisAdapter);

Vamos a notar que a este listado le falta un separador de lista, Hay varias formas de agregar uno, la mas sencilla es agregarla en el layout que define a cada renglón

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000"/>

CARDVIEW VIEW

Ahora que tenemos nuestro listado ya completo y funcionando, podemos incorporar un elemento nuevo que realza el realismo de la aplicación y es más acorde a la estética moderna. Dicho elemento son las CardView, que como su nombre lo indica define a una Tarjeta.

Antes de hacerlo, tenemos que agregar la libreria y luego envolvemos el layout del item en una cardview

compile "com.android.support:cardview-v7:25.3.1"

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="3dp"
    android:foreground="?attr/selectableItemBackground">

FLOATING ACTION BUTTON

FAB

El FAB es un elemento nuevo, no es más que un botón, pero con la particularidad de dar la impresión de estar más arriba que los otros elementos del Layout (Material Design basado en CAPAS).

No es más que un simple botón cuya función debe ser la acción principal dentro de la pantalla en la que nos encontremos

USAR android.support.design.widget.CoordinatorLayout

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share"/>