Creare ombre e visualizzazioni dei clip

Prova Compose
Jetpack Compose è il toolkit UI consigliato per Android. Scopri come utilizzare i temi in Compose.
Modifier.shadow() →

Material Design introduce l'elevazione per gli elementi UI. L'elevazione aiuta gli utenti a comprendere l'importanza relativa di ogni elemento e a concentrare la loro attenzione sull'attività corrente.

L'elevazione di una visualizzazione, rappresentata dalla proprietà Z, determina l'aspetto visivo della sua ombra. Le visualizzazioni con valori Z più elevati proiettano ombre più grandi e più sfumate e oscurano le visualizzazioni con valori Z inferiori. Tuttavia, il valore Z di una visualizzazione non influisce sulle sue dimensioni.

Un'immagine che mostra come l'elevazione della visualizzazione produce un'ombra.
Figura 1. Elevazione sull'asse Z e ombra risultante.

Le ombre vengono disegnate dal genitore della visualizzazione elevata. Sono soggette al ritaglio standard della visualizzazione e vengono ritagliate dal genitore per impostazione predefinita.

L'elevazione è utile anche per creare animazioni in cui i widget si sollevano temporaneamente sopra il piano di visualizzazione durante l'esecuzione delle azioni.

Per saperne di più, consulta Elevazione in Material Design.

Assegnare l'elevazione alle visualizzazioni

Il valore Z di una visualizzazione ha due componenti:

  • Elevazione: il componente statico
  • Traslazione: il componente dinamico utilizzato per le animazioni

Z = elevation + translationZ

I valori Z sono misurati in dp (pixel indipendenti dalla densità).

Un'immagine che mostra ombre diverse per elevazioni diverse in dp
Figura 2. Ombre diverse per elevazioni diverse in dp.

Per impostare l'elevazione predefinita (di riposo) di una visualizzazione, utilizza l'attributo android:elevation nel layout XML. Per impostare l'elevazione di una visualizzazione nel codice di un'attività, utilizza il metodo View.setElevation().

Per impostare la traslazione di una visualizzazione, utilizza il metodo View.setTranslationZ().

I metodi ViewPropertyAnimator.z() e ViewPropertyAnimator.translationZ() consentono di animare l'elevazione delle visualizzazioni. Per saperne di più, consulta il riferimento API per ViewPropertyAnimator e la guida per gli sviluppatori sull'animazione delle proprietà.

Puoi anche utilizzare un StateListAnimator per specificare queste animazioni in modo dichiarativo. Questa opzione è particolarmente utile nei casi in cui le modifiche dello stato attivano le animazioni, ad esempio quando l'utente tocca un pulsante. Per saperne di più, consulta Animare le modificazioni dello stato della visualizzazione utilizzando StateListAnimator.

Personalizzare le ombre e i contorni delle visualizzazioni

I limiti del drawable di sfondo di una visualizzazione determinano la forma predefinita della sua ombra. I contorni rappresentano la forma esterna di un oggetto grafico e definiscono l'area di ripple per il feedback tattile.

Considera la seguente visualizzazione, definita con un drawable di sfondo:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Il drawable di sfondo è definito come un rettangolo con angoli arrotondati:

<!-- 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 visualizzazione proietta un'ombra con angoli arrotondati, poiché il drawable di sfondo definisce il contorno della visualizzazione. Se fornisci un contorno personalizzato, la forma predefinita dell'ombra di una visualizzazione viene sostituita.

Per definire un contorno personalizzato per una visualizzazione nel codice:

  1. Estendi la ViewOutlineProvider classe.
  2. Esegui l'override del getOutline() metodo.
  3. Assegna il nuovo provider di contorni alla visualizzazione con il View.setOutlineProvider() metodo.

Puoi creare contorni ovali e rettangolari con angoli arrotondati utilizzando i metodi della classe Outline. Il provider di contorni predefinito per le visualizzazioni ottiene il contorno dallo sfondo della visualizzazione. Per impedire a una visualizzazione di proiettare un'ombra, imposta il relativo provider di contorni su null.

Ritagliare le visualizzazioni

Il ritaglio delle visualizzazioni consente di modificarne la forma. Puoi ritagliare le visualizzazioni per coerenza con altri elementi di progettazione o per modificarne la forma in risposta all'input dell'utente. Puoi ritagliare una visualizzazione nella sua area di contorno utilizzando il metodo View.setClipToOutline(). Solo i contorni che sono rettangoli, cerchi e rettangoli arrotondati supportano il ritaglio, come determinato dal metodo Outline.canClip().

Per ritagliare una visualizzazione nella forma di un drawable, imposta il drawable come sfondo della visualizzazione, come mostrato nell'esempio precedente, e chiama il metodo View.setClipToOutline().

Il ritaglio delle visualizzazioni è un'operazione costosa, quindi non animare la forma utilizzata per ritagliare una visualizzazione. Per ottenere questo effetto, utilizza l'animazione di rivelazione.