Barre d’outils Android Tutorial – Mise en page XML et Kotlin

La barre d’outils est un élément essentiel de l’interface utilisateur d’Android, facilitant l’accès aux actions fréquentes et à la navigation. Ce tutoriel explore la création d’une barre d’outils personnalisée pour votre application Android, en combinant l’utilisation de la mise en page XML et de la programmation Kotlin. Nous allons vous guider étape par étape afin de réaliser une barre d’outils Android pleinement fonctionnelle et adaptée à vos besoins.

Mise en place de la structure XML

Création d’un projet

Initiez la création d’un nouveau projet Android avec Android Studio. Choisissez le nom « ToolbarTutorial » pour ce projet.

Intégration de la barre d’outils dans le fichier de layout

Ouvrez le fichier de mise en page *activity_main.xml* et insérez le code suivant, qui définira les caractéristiques de notre barre d’outils :


<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="Ma barre personnelle" />


• android:id="@+id/toolbar" : attribue l’identifiant ‘toolbar’ pour référencer cette barre dans le code Kotlin.
• android:layout_width="match_parent" : la barre occupera toute la largeur disponible de son conteneur.
• android:layout_height="?attr/actionBarSize" : ajuste la hauteur à la dimension standard d’une barre d’action.
• android:background="?attr/colorPrimary" : définit la couleur d’arrière-plan en fonction de la couleur primaire du thème de l’application.
• app:title="Ma barre personnelle" : inscrit le titre affiché sur la barre d’outils.

Implémentation avec Kotlin

Récupération de l’instance de la barre d’outils

Dans votre fichier *MainActivity.kt*, utilisez la fonction findViewById() pour obtenir une référence vers l’élément de barre d’outils que vous avez défini dans le XML :


val toolbar = findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbar)


Configuration comme barre d’action

Pour activer la barre d’outils comme barre d’action, invoquez la méthode setSupportActionBar() sur l’instance récupérée :


setSupportActionBar(toolbar)


Personnalisation des attributs

Ajustez le titre et le sous-titre de votre barre d’outils à l’aide des méthodes appropriées :


toolbar.title = "Mon titre actualisé"
toolbar.subtitle = "Sous-titre personnalisé"


Ajout d’options de menu

Création du fichier de menu

Créez un fichier XML pour votre menu dans le répertoire *res/menu*. Nommez-le par exemple *toolbar_menu.xml* et ajoutez le contenu suivant :


<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_settings"
android:title="Préférences"
android:icon="@drawable/ic_settings" />
</menu>


Inflation du menu et gestion des actions

Dans *MainActivity.kt*, surchargez les méthodes onCreateOptionsMenu() pour charger le menu, et onOptionsItemSelected() pour gérer les clics sur les éléments du menu :


override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return super.onCreateOptionsMenu(menu)
}



override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.action_settings -> {
// Logique à exécuter lors d'un clic sur l'item "Préférences"
return true
}
}
return super.onOptionsItemSelected(item)
}


Conclusion

Ce guide vous a permis de maîtriser la création d’une barre d’outils Android personnalisable en utilisant XML et Kotlin. Vous avez appris à mettre en place la mise en page, à récupérer l’instance de la barre, à en modifier les attributs et à incorporer des options de menu. Ces techniques vous donneront la capacité de créer des barres d’outils plus conviviales et sur mesure pour enrichir l’expérience utilisateur de vos applications.

Gardez à l’esprit que la personnalisation des barres d’outils peut varier en fonction des versions d’Android et des divers appareils. Effectuez des tests sur plusieurs appareils et versions d’Android afin de garantir une compatibilité maximale.

Questions fréquemment posées (FAQ)

1. Comment rendre la barre d’outils invisible ?	Utilisez setSupportActionBar(null) pour la masquer.
2. Comment changer la couleur de la barre d’outils ?	Modifiez l’attribut android:background dans le XML, ou utilisez la méthode setBackgroundColor() dans Kotlin.
3. Comment incorporer un logo à la barre d’outils ?	Employez l’attribut app:logo dans le XML ou la méthode setLogo() en Kotlin.
4. Comment ajouter un bouton de navigation à la barre d’outils ?	Ajoutez un bouton dans le XML et personnalisez son comportement avec du code Kotlin.
5. Comment afficher le bouton de débordement dans la barre d’outils ?	Ajoutez un menu au XML et utilisez setDisplayHomeAsUpEnabled() pour rendre le bouton visible.
6. Le titre de la barre d’outils ne s’affiche pas, pourquoi ?	Vérifiez si vous avez bien défini la barre d’outils comme barre d’action avec setSupportActionBar().
7. Les éléments de menu ne sont pas interactifs, pourquoi ?	Assurez-vous d’avoir bien chargé le menu et géré les actions des éléments via Kotlin.
8. La barre d’outils ne s’affiche pas sur tous les appareils, pourquoi ?	Examinez la compatibilité de la mise en page avec différents appareils et versions Android.