Entendiendo Material Design

Saúl Molinero, 29 Nov 2014

"Material design es un lenguaje visual creado para nuestros usuarios que sintetiza los principios clásicos del buen diseño con la innovación y posibilidad de la tecnología y la ciencia, material design."

Material como una metáfora

Material design está motivado por el estudio del comportamiento de las superficies, papel y tinta.

Los fundamentos de la superficie y la luz entrañan la esencia para explicar los movimientos de los objetos, como interactúan y como se transforman.

Material es gráfico e intencional

Determinadas opciones de color, tipografías y espacios en blanco puestos de forma intencionada, ayudan a enfatizar las funcionalidades principales de forma evidente además de proporcionar puntos de referencia para el usuario.

Movimiento

Los objetos se presentan al usuario sin romper la continuidad de una experiencia, reorganizándose y transformándose, cada aplicación cuenta una historia a través del diseño.

Colores

La especificación de Material Design hace hincapié en sombras atrevidas y en las luces, en colores inesperados y vibrantes, por ello la propia especificación provee una paleta de colores que se pueden usar y combinar.

De una forma muy sencilla se pueden especificar los colores de todos los componentes, barra de navegación, color de acento y demás bajo la versión 21 del framework, o bien con la librería de compatibilidad AppCompat.

Únicamente modificando el styles.xml bajo la v21 se puede conseguir los colores de la imagen

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="themeprimary">#48C2F9</color>
    <color name="themedark">#18B5F9</color>
    <color name="themeaccent">#FFCB00</color>
    <color name="themecomponents">#FFB400</color>
    <color name="theme_wbackgound">#F5F5F5</color>
&lt;!-- Base application theme. --&gt;
&lt;style name="AppTheme" parent="android:Theme.Material.Light"&gt;
    &lt;item name="android:colorPrimary"&gt;@color/theme_primary&lt;/item&gt;
    &lt;item name="android:colorPrimaryDark"&gt;@color/theme_dark&lt;/item&gt;
    &lt;item name="android:navigationBarColor"&gt;@color/theme_primary&lt;/item&gt;
    &lt;item name="android:colorAccent"&gt;@color/theme_accent&lt;/item&gt;
    &lt;item name="android:colorControlActivated"&gt;@color/theme_components&lt;/item&gt;
    &lt;item name="android:colorControlNormal"&gt;@color/theme_accent&lt;/item&gt;
    &lt;item name="android:windowBackground"&gt;@color/theme_wbackgound&lt;/item&gt;
&lt;/style&gt;

</resources>

Palette

Palette es una librería incluída en la librería de compatibilidad v7, que permite extraer colores de una imagen, Palette extrae ciertos perfiles con un número determinado de colores, la extracción de colores dependiendo del número de colores es una operación costosa, por lo que debería no usarse en el hilo principal, por ello se proveen métodos asíncronos para esta tarea.

Para importar la librería:

dependencies {
    compile 'com.android.support:palette-v7:21.0.0'
}

Para conseguir la paleta:

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
       @Override
       public void onGenerated(Palette palette) {
        bookTitle.setTextColor(palette.getLightVibrantColor(defaultTextColor));
        bookAuthor.setTextColor(palette.getVibrantColor(defaultTextColor));
  }

});

Elevación

Material design introduce un nuevo concepto en cuanto al diseño en android, la elevación para los elementos de la interfaz gráfica.

La elevación ayuda a los usuarios a entender la importancia de cada elemento y centrar su atención en la tarea principal.

Este ejemplo se puede conseguir facilmente añadiendo un StateListAnimator que defina las animaciones en función del estado de una vista, de tal forma que tan solo con una línea en vuestro layout se pude conseguir una animación suave que dará el foco a la vista que se pretenda mostrar.

Este ejemplo se ha hecho únicamente con el siguiente layout y selector:

Selector, translation_selector:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EAEAEA"
    >

    <android.support.v7.widget.Toolbar
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?android:colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:elevation="5dp"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        >

        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="96dp"
            android:layout_marginTop="16dp"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />

        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="96dp"
            android:layout_marginTop="16dp"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />

        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="96dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />

    </LinearLayout>
</FrameLayout>

Selector, translation_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:statepressed="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/configshortAnimTime"
                android:valueTo="10dp"
                android:valueType="floatType"/>
        </set>
    </item>
    <item
        android:state_pressed="false"
        >
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="100"
                android:valueTo="2dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

Transiciones

Las transiciones fueron introducidas con android KitKat 4.4, con Lollipop y Material Design toman un papel muy importante a la hora de diseñar la experiencia de usuario, el propio tema de material añade transiciones para sus actividades, incluyendo la capacidad de utilizar elementos visuales compartidos y transiciones predefinidas como Explode, Fade.

Es tan sencillo como configurar el nombre de la vista de una actividad a la otra y especificar, antes de cambiar de actividad cuál es el elemto compartido.

Layout 1

    <Button
        android:id="@+id/fabbutton"
        android:layoutwidth="@dimen/fabsize"
        android:layoutheight="@dimen/fabsize"
        android:layoutmarginRight="@dimen/activityhorizontalmargin"
        android:layoutbelow="@+id/holderview"
        android:layoutmarginTop="-26dp"
        android:layoutalignParentEnd="true"
        android:transitionName="fab"
        android:background="@drawable/rippleround"
        android:stateListAnimator="@anim/fabanim"
        android:elevation="5dp"
        />
      ...

En este caso la vista compartida es un floating action button, el atributo importante en este caso es el de android:transitionName="fab" ya que es el nombre que identifica al a vista en la transición de las actividades

Actividad 2:

... Intent i = new Intent (TransitionFirstActivity.this, TransitionSecondActivity.class);

    ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(
        TransitionFirstActivity.this, Pair.create(fabButton, "fab"));

    startActivity(i, transitionActivityOptions.toBundle());
   ...</pre>

Layout 2

    <Button
        android:id="@+id/fabbutton"
        android:layoutwidth="@dimen/fabsize"
        android:layoutheight="@dimen/fabsize"
        android:layoutmarginRight="@dimen/activityhorizontalmargin"
        android:layoutcenterHorizontal="true"
        android:layoutalignParentBottom="true"
        android:background="@drawable/rippleround"
        android:stateListAnimator="@anim/fabanim"
        android:transitionName="fab"
        android:elevation="5dp"/>

Todo esto se ilustra de la siguiente forma:

Ripples

Android Lollipop, siguiendo con los principios de material design, provee un feedback visual al usuario para que sepa que ha ocurrido algo, toda acción conlleva una reacción, esto hasta ahora se venía haciendo usando state list drawables.

El efecto del Ripple, se puede comparar como una expansión en una superficie líquida, una expansión desde el punto donde se ha tocado.

Los Ripples, son un nuevo tipo de Drawable (RippleDrawable), para usarlo es tan sencillo como asignarlo como background a una vista.