Cómo crear vistas de recorte y sombras

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con temas en Compose.

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 actual.

La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su sombra. Las vistas con valores de Z más altos proyectan sombras más grandes y suaves, y ocluyen las vistas con valores de Z más bajos. Sin embargo, el valor Z de una vista no afecta su tamaño.

Una imagen que muestra cómo la elevación de una vista produce una sombra.
Figura 1: Elevación en el eje Z y la sombra resultante.

El elemento superior de la vista elevada se encarga de dibujar las sombras. Están sujetos al recorte de vista estándar, y el elemento superior los recorta de forma predeterminada.

La elevación también es útil para crear animaciones en las que los widgets suben temporalmente sobre el plano visual cuando realizan acciones.

Para obtener más información, consulta Elevación en Material Design.

Cómo asignar elevación a tus vistas

El valor Z de una vista tiene dos componentes:

  • Elevación: el componente estático
  • Traducción: el componente dinámico que se usa para animaciones

Z = elevation + translationZ

Los valores Z se miden en dp (píxeles independientes de la densidad).

Una imagen que muestra diferentes sombras para distintas elevaciones en dp
Figura 2: Diferentes sombras para distintas elevaciones en dp

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 configurar la traducción de una vista, usa el método View.setTranslationZ().

Los métodos ViewPropertyAnimator.z() y ViewPropertyAnimator.translationZ() te permiten animar la elevación de las 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 particularmente útil para casos en los que los cambios de estado activan animaciones, como cuando el usuario presiona un botón. Si quieres obtener más información, consulta Cómo animar los cambios de estado de las vistas con StateListAnimator.

Cómo personalizar las sombras y los contornos de las vistas

Los límites del elemento de diseño 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 de la onda para la respuesta táctil.

Considera la siguiente vista, que se define 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. Proporcionar un contorno personalizado anula la forma predeterminada de la sombra de una vista.

Si deseas definir un esquema personalizado para una vista en tu código, haz lo siguiente:

  1. Extiende la clase ViewOutlineProvider.
  2. Anula el método getOutline().
  3. 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 segundo plano de la vista. Para evitar que una vista proyecte una sombra, establece su proveedor de contornos en null.

Vistas de clips

Recortar vistas te permite cambiar la forma de una vista. Puedes recortar vistas para mantener la coherencia con otros elementos de diseño o para cambiar la forma de una vista en respuesta a la entrada del usuario. Puedes recortar una vista a su área de contorno mediante el método View.setClipToOutline(). Solo los contornos que son rectángulos, círculos y rectángulos redondos admiten el recorte, según lo determinado por el método Outline.canClip().

Para recortar una vista a partir de un elemento de diseño, establece el elemento de diseño como fondo de la vista (como se muestra en el ejemplo anterior) 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 de revelación.