Créer des ombres et ajuster la taille des vues

Essayer Compose

Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les thèmes dans Compose.

Modifier.shadow() →

Material Design introduit l'élévation pour les éléments d'interface utilisateur. L'élévation aide les utilisateurs à comprendre l'importance relative de chaque élément et à concentrer leur attention sur la tâche en cours.

Remarque : Cette page décrit les ombres obtenues par élévation. Material3 introduit une approche d'altitude basée sur la couleur de la surface. Pour en savoir plus sur la facilité de maintenance et l'approche de l'expérience utilisateur , consultez Élévation Material et envisagez de migrer votre projet vers Jetpack Compose.

L'élévation d'une vue, représentée par la propriété Z, détermine l'apparence visuelle de son ombre. Les vues avec des valeurs Z plus élevées projettent des ombres plus grandes et plus douces, et elles masquent les vues avec des valeurs Z inférieures. Toutefois, la valeur Z d'une vue n'affecte pas sa taille.

Image 1. Altitude sur l'axe Z et ombre résultante.

Les ombres sont dessinées par le parent de la vue élevée. Elles sont soumises à un découpage de vue standard et sont découpées par le parent par défaut.

L'élévation est également utile pour créer des animations dans lesquelles les widgets s'élèvent temporairement au-dessus du plan de la vue lors de l'exécution d'actions.

Pour en savoir plus, consultez Élévation dans Material Design.

Attribuer une élévation à vos vues

La valeur Z d'une vue comporte deux composants :

• Élévation : composant statique
• Translation : composant dynamique utilisé pour les animations

Z = elevation + translationZ

Les valeurs Z sont mesurées en dp (pixels indépendants de la densité).

Image 2. Différentes ombres pour différentes élévations en dp.

Pour définir l'élévation par défaut (au repos) d'une vue, utilisez l'attribut android:elevation dans la mise en page XML. Pour définir l'élévation d'une vue dans le code d'une activité, utilisez la méthode View.setElevation().

Pour définir la translation d'une vue, utilisez la méthode View.setTranslationZ().

Les méthodes ViewPropertyAnimator.z() et ViewPropertyAnimator.translationZ() vous permettent d'animer l'élévation des vues. Pour en savoir plus, consultez la documentation de référence de l'API ViewPropertyAnimator et le guide du développeur sur l'animation depropriétés.

Vous pouvez également utiliser un StateListAnimator pour spécifier ces animations de manière déclarative. Cela est particulièrement utile dans les cas où les changements d'état déclenchent des animations, par exemple lorsque l'utilisateur appuie sur un bouton. Pour en savoir plus, consultez Animer les changements d'état de la vue à l'aide de StateListAnimator.

Personnaliser les ombres et les contours des vues

Les limites du drawable d'arrière-plan d'une vue déterminent la forme par défaut de son ombre. Les contours représentent la forme extérieure d'un objet graphique et définissent la zone d'ondulation pour le retour tactile.

Prenons l'exemple de la vue suivante, définie avec un drawable d'arrière-plan :

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

Le drawable d'arrière-plan est défini comme un rectangle aux angles arrondis :

<!-- 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 vue projette une ombre aux angles arrondis, car le drawable d'arrière-plan définit le contour de la vue. La fourniture d'un contour personnalisé remplace la forme par défaut de l'ombre d'une vue.

Pour définir un contour personnalisé pour une vue dans votre code, procédez comme suit :

1. Étendez la ViewOutlineProvider classe.
2. Remplacez la getOutline() méthode.
3. Attribuez le nouveau fournisseur de contours à votre vue à l'aide de la View.setOutlineProvider() méthode.

Vous pouvez créer des contours ovales et rectangulaires aux angles arrondis à l'aide des méthodes de la classe Outline. Le fournisseur de contours par défaut pour les vues obtient le contour à partir de l'arrière-plan de la vue. Pour empêcher une vue de projeter une ombre, définissez son fournisseur de contours sur null.

Découper des vues

Le découpage des vues vous permet de modifier la forme d'une vue. Vous pouvez découper des vues pour assurer la cohérence avec d'autres éléments de conception ou pour modifier la forme d'une vue en réponse à une entrée utilisateur. Vous pouvez découper une vue dans sa zone de contour à l'aide de la méthode View.setClipToOutline(). Seuls les contours qui sont des rectangles, des cercles et des rectangles arrondis sont compatibles avec le découpage, comme déterminé par la méthode Outline.canClip().

Pour découper une vue à la forme d'un drawable, définissez le drawable comme arrière-plan de la vue (comme illustré dans l'exemple précédent) et appelez la méthode View.setClipToOutline().

Le découpage des vues est une opération coûteuse. N'animez donc pas la forme que vous utilisez pour découper une vue. Pour obtenir cet effet, utilisez l' animation de révélation.