Comment obtenir une barre d’élévation sur Android ?

Comprendre l’Élévation sur Android

L’élevation est une caractéristique visuelle intégrée dans Android qui permet de créer des effets d’ombre sur les éléments de l’interface utilisateur. Introduite avec Android Lollipop (API 21), l’élévation permet de faire ressortir certains composants, suggérant leur importance relative. En jouant sur la propriété Z, on peut modifier l’apparence des ombres projetées par les vues. Cela aide non seulement à structurer l’interface utilisateur, mais aussi à guider l’attention de l’utilisateur vers les éléments interactifs.

Comment obtenir une barre d’élévation sur Android ?

Pour bénéficier des effets d’élevation sur une barre d’outils dans une application Android, voici les étapes à suivre en ajustant votre code et votre système d’applications :

1. Vérification des dépendances Gradle : Accédez à votre fichier build.gradle au niveau module et assurez-vous d’inclure une dépendance pour AppCompat, qui supporte les fonctionnalités modernes d’interface utilisateur. Par exemple :

implementation 'androidx.appcompat:appcompat:1.3.1'

2. Modification du fichier layout : Dans votre layout.xml, définissez une barre d’outils avec l’attribut d’élévation. Cela pourrait ressembler à ceci :


<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:elevation="4dp"/>


3. Intégration du menu : Créez un fichier de ressources pour le menu de votre barre d’outils et intégrez-le dans votre projet en ajoutant le menu à la barre d’outils dans votre activité.
4. Configuration dans votre activité : Dans votre MainActivity.java, attachez la toolbar et définissez son support pour le menu :


setSupportActionBar(toolbar);


5. Ajustements de l’élévation : Pour modifier l’élévation selon la version Android, vous pouvez utiliser un style conditionnel dans vos ressources pour appliquer différentes valeurs selon la version de l’API.

Qu’est-ce qu’AppBarLayout ?

AppBarLayout est un composant central dans l’architecture de l’interface Android. En tant que LinearLayout, il permet une gestion verticale des vues et offre des fonctionnalités de défilement interactif. Grâce à AppBarLayout, les développeurs peuvent créer des effets dynamiques tels que le rétrécissement de la barre d’outils ou des animations lors du défilement des vues. Pour l’implémenter, vous devez l’intégrer dans votre layout.xml comme suit :


<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:elevation="4dp"/>

</com.google.android.material.appbar.AppBarLayout>

<!-- Autres composants de votre interface -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>


Questions Fréquemment Posées

1. Pourquoi l’élévation n’est-elle pas affichée sur des versions Android inférieures à Lollipop ?

Avant Android 5.0, la fonctionnalité d’élévation n’était pas intégrée dans le système. Les développeurs doivent donc recourir à des solutions alternatives pour simuler des ombres, comme l’utilisation de drawable personnalisés ou des affichages de vues superposées qui donnent une impression de profondeur.

2. Comment puis-je ajuster l’élévation pour fonctionner comme des ombres sur les versions plus anciennes ?

Pour simuler l’effet d’élévation sur des versions antérieures, il est possible d’utiliser une vue de fond avec un drawable qui représente une ombre. Cela peut être réalisé en définissant un fichier XML dans le dossier drawable, puis en l’appliquant comme arrière-plan à votre composant.

3. Quels sont les autres composants de design Material qui utilisent l’élévation ?

D’autres composants de l’interface utilisateur Material utilisent également l’élévation pour créer des effets visuels, tels que les cartes (CardView), les boutons flottants (FloatingActionButton) et les dialogues. L’élévation est essentielle pour établir des relations visuelles dans l’interface utilisateur.