Dès qu’un utilisateur pose une action dans votre application , vous souhaitez parfois afficher un message et lui demander la confirmation avant de poursuivre avec une autre action.
Pour lui demander cette confirmation sans changer de fenêtre,on utilise un AlertDialog.Le material design conserve l’utilisation du framework de l’AlertDialog mais fourni un nouveau builder nommé MaterialAlertDialogBuilder qui configure instanciation d’un AlertDialog selon les spécification du material design.
Dans ce tutoriel, vous allez découvrir comment créer un AlertDialog à partir des spécifications du material design.
Avant de continuer suivez ce tutoriel pour savoir comment ajouter la librairie des composant material.
Table des matières
Usage
Le MaterialAlertDialogBuilder vous permet de créer un AlertDialog au visuel Material design. la classe MaterialAlertDialogBuilder hérite de la classe AlertDialog.Builder et passe par les méthode du builder pour changeant le type de retour du builder en MaterialAlertDialogBuilder .
Thème material avec un MaterialAlertDialogBuilder
Le classe MaterialAlertDialogBuilder requière que votre application utilise un thème de la librairie des composants material (par exemple le thème Theme.MaterialComponents.Light). En utilisant un thème de la librairie des composant material avec la classe MaterialAlertDialogBuilder vous pouvez créer un AlertDialog avec la couleur, la typographie et la forme définie dans votre application.
Pour créer un simple AlertDialog avec la classe MaterialAlertDialogBuilder ,procédez comme suit:
val builder=MaterialAlertDialogBuilder(this) with(builder){ setTitle("Titre du message") setMessage("Nous venez de créer votre première publication sur l'application. Pour continuer vous devez completer votre profil") setPositiveButton("Continuer", { dialogInterface, i -> Toast.makeText(applicationContext,"Continuer",Toast.LENGTH_SHORT).show() }) setNegativeButton("Annuler", { dialogInterface, i -> Toast.makeText(applicationContext,"Annuler",Toast.LENGTH_SHORT).show() }) show() }
MaterialAlertDialogBuilder builder= new MaterialAlertDialogBuilder(MainActivity.this); builder.setTitle("Titre du message"); builder.setMessage("Nous venez de créer votre première publication sur l'application. Pour continuer vous devez completer votre profil"); builder.setPositiveButton("Continuer", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Toast.makeText(getApplicationContext(),"Continuer",Toast.LENGTH_SHORT).show(); } }); builder.setNegativeButton("Annuler", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Toast.makeText(getApplicationContext(),"Annuler",Toast.LENGTH_SHORT).show(); } }); builder.show();
Style
Pour changer l’apparence de chaque AlertDialog construit avec un MaterialAlertDialogBuilder dans votre application, vous devez ajouter dans votre thème l’attribut materialAlertDialogTheme et définir sa valeur à un style qui hérite du style ThemeOverlay.MaterialComponents.MaterialAlertDialog. Le style ThemeOverlay.MaterialComponents.MaterialAlertDialog définit quand à lui plusieurs attributs pour changer différentes parties de la boite de dialogue
Voici quelques attributs du style ThemeOverlay.MaterialComponents.MaterialAlertDialog que vous pouvez redéfinir.
Attributs | Description | Valeur par défaut |
materialAlertDialogTitlePanelStyle | Style de l’entête du titre | @style/MaterialAlertDialog.MaterialComponents.Title.Panel |
materialAlertDialogTitleIconStyle | style de I’con du titre | @style/MaterialAlertDialog.MaterialComponents.Title.Icon |
materialAlertDialogTitleTextStyle | style du titre | @style/MaterialAlertDialog.MaterialComponents.Title.Text |
materialAlertDialogBodyTextStyle | style du texte de description | @style/MaterialAlertDialog.MaterialComponents.Body.Text |
buttonBarPositiveButtonStyle | style du bouton positif | @style/Widget.MaterialComponents.Button.TextButton.Dialog |
buttonBarNegativeButtonStyle | style du bouton négative | @style/Widget.MaterialComponents.Button.TextButton.Dialog |
buttonBarNeutralButtonStyle | style du bouton neutre | @style/Widget.MaterialComponents.Button.TextButton.Dialog.Flush |
materialAlertDialogTitleIconStyle | style de l’icon | @style/MaterialAlertDialog.MaterialComponents.Title.Icon |
Donc pour changer le style de l’AlertDialog,vous devez redéfinir les valeurs par défaut des attribut du tableau.
Par exemple nous allons changer,la couleur du titre, la couleur de l’entête,la couleur d’arrière plan , la couleur de description , la couleur de texte du bouton positif et négatif respectivement avec les attributs: materialAlertDialogTitleTextStyle , materialAlertDialogTitlePanelStyle ,colorSurface, materialAlertDialogBodyTextStyle , buttonBarPositiveButtonStyle , buttonBarNegativeButtonStyle ..
Nous allons utiliser la palette suivante pour la boite de dialogue : couleur primaire-> #c2185b ,Light-> #fa5788 ,Dark-> #8c0032 ,surface->#424242
1- Voici ci-dessous le style de chaque partie de l’AlertDialog
<!-- Style du titre --> <style name="MyMaterialAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text"> <item name="android:textColor">#ffffff</item> <item name="android:textStyle">bold</item> </style> <!-- Style de l'entête du titre --> <style name="MyMaterialAlert.Title.Panel" parent="MaterialAlertDialog.MaterialComponents.Title.Panel"> <item name="android:background">#424242</item> <item name="android:paddingBottom">8dp</item> </style> <!-- style de la couleur du texte et d'arrière plan de la description --> <style name="MyMaterialAlert.Body.Text" parent="MaterialAlertDialog.MaterialComponents.Body.Text"> <item name="colorSurface">#fa5788</item> <item name="android:textColor">#ffffff</item> </style> <!-- Style du bouton positif --> <style name="MyMaterialAlert.Positive.Button.Text" parent="Widget.MaterialComponents.Button.TextButton.Dialog"> <item name="android:textColor">#ffffff</item> </style> <!--style du bouton négatif --> <style name="MyMaterialAlert.Negative.Button.text" parent="Widget.MaterialComponents.Button.TextButton.Dialog"> <item name="android:textColor">#ffffff</item> </style>
2- Appliquez chacun de ces styles à leurs attributs correspondant dans le ThemeOverlay comme suit
<style name="MyMaterialAlert.Style" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog"> <item name="colorSurface">#8c0032</item> <item name="materialAlertDialogTitleTextStyle">@style/MyMaterialAlert.Title.Text</item> <item name="materialAlertDialogTitlePanelStyle">@style/MyMaterialAlert.Title.Panel</item> <item name="materialAlertDialogBodyTextStyle">@style/MyMaterialAlert.Body.Text</item> <item name="buttonBarPositiveButtonStyle">@style/MyMaterialAlert.Positive.Button.Text</item> <item name="buttonBarNegativeButtonStyle">@style/MyMaterialAlert.Negative.Button.text</item> </style>
3- Ensuite vous pouvez appliquer ce style ThemOverlay personnalisé à tous les AlertDialog de votre application ou à une instance d’AlertDialog
Appliquer le style à tous les AlertDialog de votre application
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- Customize your theme here. --> ... <item name="materialAlertDialogTheme">@style/MyMaterialAlert.Style</item> ... </style>
Appliquer le style à une seul instance d’AlertDialog
val builder=MaterialAlertDialogBuilder(this,R.style.MyMaterialAlert_Style)
MaterialAlertDialogBuilder builder= new MaterialAlertDialogBuilder(MainActivity.this,R.style.MyMaterialAlert_Style);
Voici ce que vous devez obtenir
Ajouter une icon
Pour ajouter une icon, vous devez utiliser la méthode setIcon de la classe MaterialAlertDialogBuilder comme suit:
val builder=MaterialAlertDialogBuilder(this) with(builder){ setTitle("Titre du message") setIcon(R.drawable.done) setMessage("Nous venez de créer votre première publication sur l'application.Pour continuer vous devez completer votre profil") setPositiveButton("Continuer", { dialogInterface, i -> Toast.makeText(applicationContext,"Continuer",Toast.LENGTH_SHORT).show() }) setNegativeButton("Annuler", { dialogInterface, i -> Toast.makeText(applicationContext,"Annuler",Toast.LENGTH_SHORT).show() }) show() }
MaterialAlertDialogBuilder builder= new MaterialAlertDialogBuilder(MainActivity.this); builder.setTitle("Titre du message"); builder.setIcon(R.drawable.done); builder.setMessage("Nous venez de créer votre première publication sur l'application.Pour continuer vous devez completer votre profil"); builder.setPositiveButton("Continuer", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Toast.makeText(getApplicationContext(),"Continuer",Toast.LENGTH_SHORT).show(); } }); builder.setNegativeButton("Annuler", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Toast.makeText(getApplicationContext(),"Annuler",Toast.LENGTH_SHORT).show(); } }); builder.show();
Voici ce que vous devez obtenir
Changer la couleur de l’icon
Dans le style ThemeOverlay, c’est l’attribut materialAlertDialogTitleIconStyle qui permet de définir le style de l’icon de l’AlertDialog. Pour changer le style de l’icon nous devons redéfinir le style par défaut de l’icon comme suit.
<style name="MyMaterialAlert.Title.Icon" parent="MaterialAlertDialog.MaterialComponents.Title.Icon"> <item name="android:tint">#ffffff</item> </style>
-Puis appliquer ce style dans le style ThemeOverlay grâce à l’attribut materialAlertDialogTitleIconStyle comme suit
<style name="MyMaterialAlert.Style" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog"> ... <item name="materialAlertDialogTitleIconStyle">@style/MyMaterialAlert.Title.Icon</item> ... </style>
Voici ce que vous devez obtenir
Aligner l’icon et le titre verticalement
Pour aligner le titre et l’icon verticalement, vous devez changer le parent du style MyMaterialAlert.Title.Panel en MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked. Voir l’exemple
<style name="MyMaterialAlert.Title.Panel" parent="MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked"> <item name="android:background">#424242</item> <item name="android:paddingBottom">8dp</item> </style>
Centrer l’icon horizontalement
Pour center l’icon horizontalement vous devez changer le parent du style MyMaterialAlert.Title.Panel en MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked et le parent du style MyMaterialAlert.Title.Icon en MaterialAlertDialog.MaterialComponents.Title.Icon.CenterStacked
<style name="MyMaterialAlert.Title.Panel" parent="MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked"> <item name="android:background">#424242</item> <item name="android:paddingBottom">8dp</item> </style> </style> <style name="MyMaterialAlert.Title.Icon" parent="MaterialAlertDialog.MaterialComponents.Title.Icon.CenterStacked"> <item name="android:tint">#ffffff</item> </style>
Centrer le titre horizontalement
Pour centrer le titre horizontalement, vous devez changer le parent du style MyMaterialAlert.Title.Panel en MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked et le parent du style MyMaterialAlert.Title.Text en MaterialAlertDialog.MaterialComponents.Title.Text.CenterStacked
<style name="MyMaterialAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text.CenterStacked"> <item name="android:textColor">#ffffff</item> <item name="android:textStyle">bold</item> </style> <style name="MyMaterialAlert.Title.Panel" parent="MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked"> <item name="android:background">#424242</item> <item name="android:paddingBottom">8dp</item> </style>
Centrer horizontalement le le titre et l’icon
Pour centrer horizontalement le titre et l’icon , vous devez changer le parent du style MyMaterialAlert.Title.Panel en MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked , le parent du style MyMaterialAlert.Title.Text en MaterialAlertDialog.MaterialComponents.Title.Text.CenterStacked et le parent du style MyMaterialAlert.Title.Icon en MaterialAlertDialog.MaterialComponents.Title.Icon.CenterStacked
<!-- Style de l'entête du titre --> <style name="MyMaterialAlert.Title.Panel" parent="MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked"> <item name="android:background">#424242</item> <item name="android:paddingBottom">8dp</item> </style> <!-- Style du titre --> <style name="MyMaterialAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text.CenterStacked"> <item name="android:textColor">#ffffff</item> <item name="android:textStyle">bold</item> </style> <style name="MyMaterialAlert.Title.Icon" parent="MaterialAlertDialog.MaterialComponents.Title.Icon.CenterStacked"> <item name="android:tint">#ffffff</item> </style>
Les objets AlertDialog créés par un MaterialAlertDialogBuilder répondront également au valeurs des attributs supplémentaire défini dans l’attribut de style alertDialogStyle qui aide à positionner la fenêtre.
<attr name="backgroundInsetStart" format="dimension"/> <attr name="backgroundInsetTop" format="dimension"/> <attr name="backgroundInsetEnd" format="dimension"/> <attr name="backgroundInsetBottom" format="dimension"/>
Autres ressources
https://material.io/components/dialogs/
https://developer.android.com/reference/android/app/AlertDialog
Conclusion
Voila, nous sommes à la fin de ce tutoriel sur comment créer un AlertDialog avec La classe MaterialAlertDialogBuilder. J’espère que ce tutoriel vous aidera à créer des AlertDialog au visuel Material design.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.