Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios a comprender la importancia relativa de cada elemento y a centrar su atención en la tarea para realizar.
La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su sombra: las vistas con valores Z superiores, proyectan sombras más grandes y suaves. Las vistas con valores Z superiores ocluyen las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamaño de la vista.
El padre de la vista elevada se encarga de dibujar las sombras y así, sujetas al recorte de vista estándar, son recortadas por el padre de manera predeterminada.
La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el plano visual cuando realizan alguna acción.
Para más información sobre la elevación en Material Design, consulta Objetos en el espacio 3D.
El valor Z de una vista cualquiera tiene dos componentes:
Z = elevation + translationZ
Figura 1: sombras para diferentes elevaciones de vistas.
Para establecer la elevación de una vista al definir un diseño, usa el atributo android:elevation.
Para establecer la elevación de una vista en el código de una actividad, usa el método
{@link android.view.View#setElevation View.setElevation()}.
Para establecer la traducción de una vista, usa el método {@link android.view.View#setTranslationZ View.setTranslationZ()}.
Los nuevos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten animar fácilmente la elevación de las vistas. Para más información, consulta la referencia de la API para {@link android.view.ViewPropertyAnimator} y la guía del desarrollador Animación de propiedades.
También puedes usar un {@link android.animation.StateListAnimator} para especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en donde los cambios de estados desencadenan animaciones, como cuando un usuario pulsa un botón. Para más información, consulta Animar cambios de estados de las vistas.
Los valores Z se miden en dp (píxeles independientes de la densidad).
Los límites de la interfaz dibujable en segundo plano de una vista determinan la forma predeterminada de su sombra. Los contornos representan la forma externa de un objeto gráfico y definen el área del efecto de ondas para la respuesta táctil.
Examina esta vista, definida con una interfaz dibujable en segundo plano:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
La interfaz dibujable en segundo plano está definida como un rectángulo con esquinas redondeadas:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
La vista proyecta una sombra con esquinas redondeadas, ya que la interfaz dibujable en segundo plano define el contorno de la vista. Un contorno personalizado reemplazaría la forma predeterminada de la sombra de una vista.
Para definir un contorno personalizado para una vista en tu código:
Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de métodos en la clase
{@link android.graphics.Outline}. El proveedor de contornos predeterminado para las
vistas obtiene el contorno a partir del plano de fondo de la vista. Para evitar que una vista proyecte una sombra, establece su proveedor de contornos
en null.
Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para
mantener la uniformidad con otros elementos del diseño o para cambiar la forma de una vista en respuesta a una señal de entrada del usuario.
Puedes recortar una vista a partir de su área de contorno mediante el método {@link android.view.View#setClipToOutline
View.setClipToOutline()} o el atributo android:clipToOutline. Solo
los contornos rectangulares, circulares y redondeados admiten el recorte, según lo determinado por el método
{@link android.graphics.Outline#canClip Outline.canClip()}.
Para recortar una vista a partir de una interfaz dibujable, establece la interfaz dibujable como el plano de fondo de la vista (como se muestra más arriba) y llama al método {@link android.view.View#setClipToOutline View.setClipToOutline()}.
Recortar vistas es una operación costosa, así que no animes la forma que usas para recortar una vista. Para lograr este efecto, usa la animación Efecto revelar.