Material Design incluye 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 que hay que 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 bloquean las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta su tamaño.
El elemento superior de la vista elevada se encarga de dibujar las sombras, las cuales quedan sujetas al recorte de vista estándar; el elemento superior las recorta 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 obtener más información sobre la elevación en Material Design, consulta Objetos en el espacio 3D.
Asigna elevación a tus vistas
El valor Z de una vista tiene dos componentes:
- Elevación: es el componente estático.
- Traducción: es el componente dinámico que se usa para animaciones.
Z = elevation + translationZ
Figura 1: Sombras para diferentes elevaciones de vistas
Para establecer la elevación predeterminada (en reposo) de una vista, usa el atributo android:elevation en el diseño XML. Para establecer la elevación de una vista en el código de una actividad, usa el método View.setElevation().
Para establecer la traducción de una vista, usa el método View.setTranslationZ().
Los nuevos métodos ViewPropertyAnimator.z() y ViewPropertyAnimator.translationZ() te permiten animar fácilmente la elevación de vistas. Para obtener más información, consulta la referencia de la API para ViewPropertyAnimator y la guía para desarrolladores de Animación de propiedades.
También puedes usar un 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 obtener más información, consulta Anima cambios de estados de las vistas.
Los valores Z se miden en dp (píxeles independientes de la densidad).
Personaliza sombras y contornos de vistas
Los límites del elemento de diseño de fondo 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 de la onda para la respuesta táctil.
Examina esta vista, definida con un elemento de diseño en segundo plano:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
El elemento de diseño en segundo plano está definido 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 el elemento de diseño 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 el contorno personalizado de una vista en tu código, haz lo siguiente:
- Extiende la clase
ViewOutlineProvider. - Reemplaza el método
getOutline(). - Asigna el nuevo proveedor de contornos a tu vista con el método
View.setOutlineProvider().
Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante los métodos de la clase 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.
Recorta vistas
Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para mantener una consistencia 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 con el método 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 Outline.canClip().
Para recortar una vista según la forma de un elemento de diseño, establece el elemento de diseño como fondo de la vista (como se muestra más arriba) y llama al método 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.