Le MaterialAlertDialogBuilder sur Android


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();
simple alertdialog

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.

AttributsDescriptionValeur par défaut
materialAlertDialogTitlePanelStyleStyle de l’entête du titre@style/MaterialAlertDialog.MaterialComponents.Title.Panel
materialAlertDialogTitleIconStylestyle de I’con du titre@style/MaterialAlertDialog.MaterialComponents.Title.Icon
materialAlertDialogTitleTextStylestyle du titre@style/MaterialAlertDialog.MaterialComponents.Title.Text
materialAlertDialogBodyTextStylestyle du texte de description@style/MaterialAlertDialog.MaterialComponents.Body.Text
buttonBarPositiveButtonStylestyle du bouton positif@style/Widget.MaterialComponents.Button.TextButton.Dialog
buttonBarNegativeButtonStylestyle du bouton négative@style/Widget.MaterialComponents.Button.TextButton.Dialog
buttonBarNeutralButtonStylestyle 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

alertdialog personnalisé

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

alerte dialog avec la couleur de l'icon personnalisé

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>
alertdialog avec icon et titre aligné verticalement

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>
alertdialog avec icon centrée

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>
alert dialog avec titre centré

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>
alert dialog titre et icon centré

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://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/dialog/MaterialAlertDialogBuilder.java

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.


Laisser un commentaire

Résoudre : *
19 + 11 =


%d