Material Design

A partir de la versión 5.0 de Android (API 21), se introduce Material Design. Se trata de una guía para el diseño visual de las aplicaciones, que Google no quiere aplicar exclusivamente a dispositivos móviles, sino que pretende utilizar Material Design en todo tipo de contenidos digitales (páginas Web, aplicaciones para ordenadores, vídeos,…).

Se basa en diseños y colores planos. Uno de sus principios es dar peso o materialidad a los elementos del interfaz de usuario. Para ello va a tratar de darle volumen o profundidad utilizando sombras, capas y animaciones. Observa como los botones flotantes (ver botón con estrella en el siguiente ejercicio) se visualizan con una sombra para que parezcan que están en una capa superior y suelen visualizarse con animaciones. La idea es que parezcan que están construidos de material físico. Para más información puedes consultar la especificación de Material Design que se incluye en enlaces de interés.

  video[Tutorial] Tutorial Desarrollo de apps para Android con Material Design : Características.

Desde el punto de vista de la programación destacamos que se incorporan nuevas vistas: RecyclerView, Toolbar,FloatingActionButton, …

Enlaces de interés:

Especificaciones de diseño de Material Design:
http://www.google.com/design/spec/material-design/introduction.html

Crear aplicaciones con Material Design:
http://developer.android.com/intl/es/training/material/index.html

Aplicación de ejemplo con diseño Material Design (Web / Android):
https://polymer-topeka.appspot.com/ 

https://play.google.com/store/apps/details?id=com.chromecordova.Topeka

Ejercicio paso a paso: Una aplicación basada en Material Design

Cuando creas un nuevo proyecto con Android Studio, si escoges una actividad del tipo Basic Activity, tendrá un diseño inicial basado en Material Design. Esta actividad, utilizará un tema que hereda de android:Theme.Material. Además, se incorporan varios widgets basados en este diseño, como: Toolbar o FloatingActionButton, y se incluirán las dependencias adecuadas para poder usar estos widwets:

1.     Crea un nuevo proyecto con los siguientes datos:

Phone and Tablet / Basic Activity
Name: Material Design
Package name: com.example.materialdesign
Language: Java ó Kotlin
Minimum API level: API 19 Android 4.4 (KitKat)

     Al seleccionar una actividad de tipo Basic Activity se utilizará un diseño basado en Material Design. Dispondrá de una barra de acciones y un botón flotante.

2.     Ejecuta el proyecto. El resultado ha de ser similar al siguiente

3.     Pasemos a estudiar algunos elementos del proyecto. En el explorador del proyecto abre el fichero Gradle Scripts > build.gradle (Module:app). Observa como en la sección dependencies se han incluido las siguientes librerías:

dependencies {
   …
   implementation 'com.android.support:appcompat-v7:28.0.0' 
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   implementation 'com.android.support:design:28.0.0'

}

La primera es la librería de compatibilidad v7, que incorpora las clases más importantes como: AppCompatActivity, Toolbar o CardView. La segunda es para incluir el layout ConstraintLayout. La última es la librería de compatibilidad de diseño. Incorpora otras clases como: FloatingActionButton, AppBarLayout, TabLayout, NavigationView o Snackbar. Gracias al uso de estas librerías podremos utilizar estas clases con un nivel mínimo de API 7, a pesar de que la mayoría han sido introducidas en la versión 5.0 de Android.

Hay una diferencia entre estas librerías: Las clases definidas en la librería de compatibilidad appcompat-v7 son del API de Android. Cuando en una aplicación la versión mínima de API sea mayor o igual que 21 (v5.0) ya no tiene sentido usar esta librería. Por el contrario, las clases definidas en la librería de diseño son solo de esta librería. Has de usarla siempre que necesites una de sus clases.

4.     Pasemos a estudiar los layouts creados en el proyecto. En el explorador del proyecto abre el fichero app > res > layout > activity_main.xml. En la vista Desig se mostrará una previsualización del layout. Selecciona la vista Text pulsando sobre la lengüeta de la parte inferior.

5.     Estudia la estructura de este layout. Observa como las etiquetas de las vistas son muy largas. Esto es debido a que no están definidas en el API de Android si no en una librería (en concreto a las design).  La función de cada una de vistas se estudia en el siguiente apartado. Puede ser un buen momento para leerlo.

6.     Abre el fichero app > res > layout > content_main.xml. Selecciona la vista Text pulsando sobre la lengüeta de la parte inferior. Se trata de un layout muy simple: un <ConstraintLayout> con un <TextView> dentro.

7.     Abre ahora app > java > com.example.mislugares > MainActivity.java. En el método onCreate() se inicializan algunas de las vistas introducidas en el layout. Este código se explica en el siguiente apartado.

8.     Si al ejecutar la aplicación pulsas en los tres puntos de la esquina superior derecha, se mostrará un menú con la opción Settings. Como se ha definido este menú y otras opciones sobre la barra de acciones se explicarán más adelante.

Vistas de Material Design: CoordinationLayout, AppBarLayout, FloatingActionButtony SnackBar

Las animaciones son muy importantes en Material Design. Google quiere que los elementos del interfaz de usuario se muevan de forma coordinada, de forma que, al moverse un elemento, este puede desplazar a otro. Observa como al ejecutar el proyecto anterior, cuando pulsas el botón flotante se mueve hacia arriba mientras aparece un texto.

Para poder realizar esta animación, y alguna otra más, se utiliza CoordinationLayout. Es un descendiente de LinearLayout que nos proporciona un nivel adicional de control sobre las vistas que contiene para controlar su comportamiento y permite crear interdependencias. Este contenedor se suele utilizar como raíz del layout.

Para entender cómo se utiliza abre el fichero activity_main.xml. Observa cómo tras eliminar los atributos la estructura resultante es la siguiente:

El CoordinatorLayout actúa de contenedor y va a permitir que los elementos que contiene puedan realizar animaciones coordinadas. Mediante el atributo fitsSystemWindows podemos conseguir modificar la barra de estado del sistema. En concreto aplicando a esta barra el color colorPrimaryDark (azul oscuro en el ejemplo anterior), para que combine con el color de la aplicación colorPrimary (azul más claro en el ejemplo anterior). El uno de colores en Material Design se explica en el siguiente apartado.

El AppBarLayout también es un LinearLayout vertical y ha sido diseñado para usarlo dentro de un CoordinatorLayout. A su vez es habitual que contenga un elemento de tipo Toolbar y opcionalmente pestañas (TabLayout). Su finalidad es contener los elementos de la barra de acciones de la aplicación (conocida según la nueva nomenclatura de Material Design como AppBar). Gracias al atributo layout_scrollFlags podemos conseguir que los elementos de dentro de esta barra puedan desplazarse hasta que sean ocultados.

Dentro de AppBarLayout tenemos un Toolbar. Como veremos en breve es un nuevo widget que tiene la misma función que un ActionBar.

El contenido del layout que ha de visualizar la aplicación se incluye en un fichero aparte content_main. De esta forma queda más estructurado y podemos crear contenidos específicos según el tipo de pantalla, versión, … Observa como en el proyecto se ha creado un content_main que simplemente muestra el texto  “Hello World!”.

Tras el <include> se ha insertado un FloatingActionButton. Se trata de un tipo de botón característico introducido en Material Design para las acciones principales.

Otro aspecto que no hay que olvidar es que ahora hemos de inicializar desde código algunos elementos. Esto se realiza en el método onCreate() de la actividad:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //Barra de acciones
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    //Botón flotante
    FloatingActionButton fab = (FloatingActionButton) findViewById(
                                                               R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action",
                   Snackbar.LENGTH_LONG).setAction("Action", null).show();
        }
    });
}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show()
        }
    }

Este código resultará más sencillo de entender, tras realizar el apartado Uso práctico de Vistas. Las dos primeras líneas han sido explicadas en la unidad anterior. El método setSupportActionBar() es utilizado para indicar a la actividad la barra de acciones que ha de utilizar. Esta barra de acciones es almacenada en el objeto toolbar, que es creado en el layout XML. En Java para encontrar el objeto se utiliza findViewById(R.id.toolbar)En Kotlin este proceso es realizado automáticamente. Lo único que tienes que hacer es asegurarte que se ha importado el paquete kotlinx.android.synthetic.main.activity_main.*.

Con respecto al botón flotante simplemente se carga en el objeto fab y se le asigna un escuchador onClick. Más adelante se describe el uso de escuchadores para personalizar la acción asociada. Actualmente, cuando se pulsa muestra un mensaje de texto utilizando un Snackbar. Se trata de una nueva forma de mostrar cuadros de dialogo, introducida en Material Desing, similar a Toast o AlertDialog. La diferencia es que se muestran en la parte inferior de la pantalla y que se visualizan con una animación de desplazamiento.

Ejercicio paso a paso: Creación de la aplicación Mis Lugares con barra extendida

En este curso vamos a crear una aplicación de ejemplo. Tendrá por nombre Mis Lugares y permitirá que los usuarios guarden información relevante sobre los sitios que suelen visitar (restaurantes, tiendas, etc.). En este apartado comenzaremos creando la aplicación Android que solo contendrá una actividad con una barra de acciones extendida.

La barra de acciones extendida es un patrón de diseño propuesto en Material Design que habrás observado en algunas aplicaciones actuales. Al entrar en la actividad la barra de acciones se muestra en modo extendido. Al desplazar el contenido la barra de acciones pasará al tamaño habitual.

Para conseguir este efecto has de utilizar el layout CollapsingToolbarLayout. En este ejercicio se describe cómo hacerlo:

1.     Crea un nuevo proyecto con los siguientes datos:

Phone and Tablet / Scrolling Activity
Name: Mis Lugares
Package name: com.example.mislugares
Language: Java ó Kotlin
Minimum API level: API 19 Android 4.4 (KitKat)

De esta forma se creará una actividad similar a la que hemos creado en el ejercicio anterior. Igualmente dispondrá de una barra de acciones y un botón flotante. Pero ahora el contenido principal podrá desplazarse, a la vez que la barra de acciones reduce su tamaño.
 

2.     En el navegador de proyecto pulsa con el botón derecho sobre la clase ScrollingActivity y selecciona Refactor > Rename. Introduce como nuevo nombre MainActivity. En la carpeta res/layout renombra el fichero activity_scrolling.xml por activity_main.xml. En la misma carpeta renombra content_scrolling.xml por content_main.xml. Finalmente en la carpeta res/menu renombra menu_scrolling.xml por menu_main.xml.

3.     Ejecuta el proyecto y verifica su comportamiento:

4.     Compara los layouts creados para activity_main.xml de este proyecto y el anterior. En la siguiente figura se muestra un resumen con las nuevas etiquetas y atributos XML que han sido añadidos. No ha de preocuparte si conoces el significado exacto de cada atributo.

  Blank Activity                Scrolling Activity

  <CoordinatorLayout…>          <CoordinatorLayout…>

  <AppBarLayout …>              <AppBarLayout …
                                   layout_height="@dimen/app_bar_height"
                                   fitsSystemWindows="true">

                                <CollapsingToolbarLayout…/>

     <Toolbar…/>                   <Toolbar…/>

                                </CollapsingToolbarLayout>

  </AppBarLayout>               </AppBarLayout>

  <include layout=              <include layout=
     "@layout/content_main"/>      "@layout/content_main"/>

  <FloatingActionButton…/>      <FloatingActionButton
                                   layout_anchor="@id/app_bar"/>

  </CoordinatorLayout>          </CoordinatorLayout>

Nota: De momento quédate con los conceptos principales. Si en un futuro quieres modificar este comportamiento básico, puedes consultar la información necesaria.

5.     Compara los layouts creados para content_main.xml. Observa como ahora se utiliza el layout <NestedScrollView> para conseguir que el contenido sea desplazable. Además, el campo de texto es muy largo para conseguir que no quepa completo en pantalla.