Tutoriel d’exemple de barre d’action Android

Introduction

La barre d’action représente un élément fondamental des applications Android, assurant une interface utilisateur homogène pour la navigation, les actions et l’affichage des informations d’état. Elle facilite l’accès rapide aux options courantes et met en évidence les données contextuelles, améliorant ainsi l’expérience utilisateur et l’ergonomie de l’application. Ce tutoriel approfondi vous guidera à travers les étapes nécessaires pour concevoir et personnaliser une barre d’action Android.

Mise en place d’une barre d’action

Ajout de la dépendance AppCompat

Pour incorporer une barre d’action, il est impératif d’inclure la dépendance à la bibliothèque de compatibilité AppCompat dans votre fichier build.gradle :

dependencies {
 implementation 'androidx.appcompat:appcompat:1.4.2'
}

Configuration du thème de style

Créez un fichier styles.xml dans le dossier res/values/. Ce fichier contiendra un style de thème qui utilise Theme.AppCompat.Light.DarkActionBar comme thème parent :

<resources>
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!-- Personnalisations du style ici -->
 </style>
</resources>

Activation de la barre d’action

Dans votre activité (classe Java), invoquez la méthode setSupportActionBar() en y passant la barre d’outils en tant que paramètre :

public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  Toolbar toolbar = findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);
 }
}

Personnalisation de la barre d’action

Définition du titre

Le titre de la barre d’action peut être défini via la méthode setTitle():

getSupportActionBar().setTitle("Titre de la barre d'action");

Ajout d’un sous-titre

Pour intégrer un sous-titre sous le titre principal, utilisez la méthode setSubtitle():

getSupportActionBar().setSubtitle("Sous-titre de la barre d'action");

Configuration de l’icône

Une icône peut être attribuée à la barre d’action en utilisant la méthode setLogo():

getSupportActionBar().setLogo(R.drawable.ic_logo);

Personnalisation visuelle

L’aspect de la barre d’action peut être modifié en ajustant des éléments tels que l’arrière-plan, les couleurs et les séparateurs :

* Arrière-plan: setBackgroundColor()
* Couleur de l’icône de retour: setHomeAsUpIndicator()
* Couleur du texte: setTitleTextColor()
* Séparateur: setDivider()

Boutons de la barre d’action

Bouton de retour

La barre d’action affiche par défaut un bouton de retour qui facilite la navigation vers l’activité précédente. L’icône de ce bouton peut être personnalisée :

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Boutons de navigation

Il est possible d’ajouter des boutons de navigation personnalisés en utilisant la méthode setDisplayOptions():

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

Menu de la barre d’action

Un menu peut être intégré pour offrir des options supplémentaires à l’utilisateur. Ce menu est défini dans un fichier du dossier res/menu/ et est ensuite « gonflé » dans votre activité :

@Override
public boolean onCreateOptionsMenu(Menu menu) {
 getMenuInflater().inflate(R.menu.main_menu, menu);
 return super.onCreateOptionsMenu(menu);
}

Fonctionnalités de recherche et mode édition

Intégration de la recherche

Une barre de recherche peut être ajoutée à la barre d’action en utilisant SearchView:

<androidx.appcompat.widget.SearchView
 android:id="@+id/searchView"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

Activation du mode édition

Le mode édition permet aux utilisateurs de sélectionner et de modifier des éléments. Il est activé via :

getSupportActionBar().setActionModeCallback(new ActionMode.Callback());

Conclusion

La barre d’action constitue un élément clé de l’interface utilisateur Android, améliorant de manière significative l’expérience utilisateur. En suivant les instructions de ce tutoriel, vous serez en mesure de concevoir et de personnaliser vos propres barres d’action, offrant une navigation claire, un accès rapide aux fonctionnalités et des informations d’état pertinentes. N’hésitez pas à explorer les diverses options de personnalisation pour créer une barre d’action qui s’adapte parfaitement à votre application.

Questions fréquemment posées (FAQ)

1. Quels sont les avantages de l’utilisation d’une barre d’action ?

2. Comment ajouter un élément de menu à la barre d’action ?

3. Est-il possible d’obtenir une référence au bouton de retour ?

* Oui, utilisez la méthode getSupportActionBar().getHomeButton()

4. Comment masquer le bouton de retour ?

* Invoquez la méthode getSupportActionBar().setDisplayHomeAsUpEnabled(false)

5. Comment intégrer un logo SVG dans la barre d’action ?

* Convertissez votre logo SVG au format vectoriel et enregistrez-le comme ressource dans res/drawable/

6. Peut-on afficher ou masquer la barre d’action dynamiquement ?

* Oui, utilisez respectivement les méthodes getSupportActionBar().show() et getSupportActionBar().hide()

7. Comment ajouter un badge de notification sur un élément de menu ?

* Utilisez la méthode setBadgeDrawable() pour assigner un badge NumberDrawable

8. Comment rendre la barre d’action transparente ?

* Configurez l’arrière-plan de la barre d’action avec une ressource vide : setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT))