La conception du matériau ne stylise pas les boîtes de dialogue d'alerte


161

J'ai ajouté la conception matérielle appCompat à mon application et il semble que les boîtes de dialogue d'alerte n'utilisent pas mes couleurs primaires, primairesDark ou accentuées.

Voici mon style de base:

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>

Sur la base de ma compréhension, le texte du bouton de dialogue devrait également utiliser ces couleurs. Ai-je tort de comprendre ou dois-je faire autre chose?


Solution:

La réponse marquée m'a mis sur la bonne voie.

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:actionModeBackground">@color/apptheme_color_dark</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
    <item name="sdlDialogStyle">@style/DialogStyleLight</item>
    <item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>

<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
</style>

Vous pouvez essayer cette bibliothèque que j'ai créée
développeur Android

15
La partie inférieure est-elle censée être la solution? Si tel est le cas, postez-le en tant que réponse personnelle , ne modifiez pas la réponse dans la question.
Adi Inbar

Réponses:


463

MISE À JOUR EN août 2019 AVEC les composants Material pour la bibliothèque Android:

Avec les nouveaux composants Material pour la bibliothèque Android, vous pouvez utiliser la nouvelle com.google.android.material.dialog.MaterialAlertDialogBuilderclasse, qui s'étend de la androidx.appcompat.AlertDialog.Builderclasse existante et prend en charge les dernières spécifications de Material Design.

Utilisez simplement quelque chose comme ceci:

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

Vous pouvez personnaliser les couleurs en étendant le ThemeOverlay.MaterialComponents.MaterialAlertDialogstyle:

  <style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <!-- Background Color-->
     <item name="android:background">#006db3</item>
     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/secondaryColor</item>
     <!-- Text Color for buttons -->
     <item name="colorPrimary">@color/white</item> 
     ....
  </style>  

Pour appliquer votre style personnalisé, utilisez simplement le constructeur:

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

entrez la description de l'image ici

Pour personnaliser les boutons, le titre et le corps du texte, consultez cet article pour plus de détails.

Vous pouvez également modifier globalement le style de votre thème d'application:

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
 </style>

AVEC SUPPORT LIBRARY et APPCOMPAT THEME:

Avec le nouveau, AppCompat v22.1vous pouvez utiliser le nouveau android.support.v7.app.AlertDialog .

Utilisez simplement un code comme celui-ci:

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();

Et utilisez un style comme celui-ci:

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>

Sinon, vous pouvez définir dans votre thème actuel:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- your style -->
    <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>

puis dans votre code:

 import android.support.v7.app.AlertDialog

    AlertDialog.Builder builder =
           new AlertDialog.Builder(this);

Voici le AlertDialog sur Kitkat: entrez la description de l'image ici


2
Pourquoi forcer AlertDialog.Builder à utiliser le thème exact au lieu de mettre à jour celui par défaut? Je préférerais résoudre ce problème dans styles.xml au lieu du code Java.
Tomáš Hubálek

2
Les polices de titre et de boutons ne sont pas en gras sur les appareils pré-sucette.
jimmy0251

9
J'ai dû ajouter "android:" pour le faire fonctionner:<item name="android:alertDialogTheme">@style/AppCompatAlertDialogStyle</item>

1
+1 pour une réponse superbe mais comment puis-je obtenir la même interface utilisateur pour la version Android ci-dessous Lollypop ... car avec cela, l'interface utilisateur de l'appareil ci-dessous semble si étrange.
realpranav

1
ajouter import android.support.v7.app.AlertDialog fonctionne
FlipNovid

9

lors de l'initialisation du générateur de dialogue, passez le deuxième paramètre comme thème. Il affichera automatiquement la conception du matériau avec le niveau API 21.

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);

ou,

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);

4

AppCompat ne fait pas cela pour les dialogues (pas encore du moins)

EDIT: c'est le cas maintenant. assurez-vous d'utiliserandroid.support.v7.app.AlertDialog


On dirait que vous pouvez apporter des modifications aux styles de boîtes de dialogue avec AppCompat
Matthew

mon Android Studio par défaut ne m'a import app.AlertDialogpas donné celui appCompat. J'ai essayé de comprendre ce qui ne va pas pendant environ 40 minutes avant de le vérifier ... Merde, google!
Glorifind


2

Vous pourriez utiliser

Bibliothèque de conception de matériaux

Bibliothèque de conception de matériaux conçue pour de jolies boîtes de dialogue d'alerte , des boutons et d'autres choses comme des collations. Actuellement, il est très développé.

Guide, code, exemple - https://github.com/navasmdc/MaterialDesignLibrary

Guide comment ajouter une bibliothèque à Android Studio 1.0 - Comment importer une bibliothèque de conception de matériaux dans Android Studio?

.

Bon codage;)


1

Essayez cette bibliothèque:

https://github.com/avast/android-styled-dialogs

Il est basé sur DialogFragmentsau lieu de AlertDialogs(comme celui de @afollestad). Le principal avantage: les dialogues ne sont pas supprimés après la rotation et les rappels fonctionnent toujours.


Ma bibliothèque est beaucoup plus performante. Et vous pouvez toujours envelopper une boîte de dialogue avec un DialogFragment. 😛
après

1

Pour une raison quelconque, android: textColor ne semble mettre à jour que la couleur du titre. Vous pouvez modifier la couleur du texte du message en utilisant un

SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));

AlertDialog dialog = builder.create();
                Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
                wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                dialog.setMessage(wordtoSpan);
                dialog.show();

0

Boîtes de dialogue d'alerte de style Material Design: Police personnalisée, Bouton, Couleur et forme, ..

 MaterialAlertDialogBuilder(requireContext(),
                R.style.MyAlertDialogTheme
            )
                .setIcon(R.drawable.ic_dialogs_24px)
                .setTitle("Feedback")
                //.setView(R.layout.edit_text)
                .setMessage("Do you have any additional comments?")
                .setPositiveButton("Send") { dialog, _ ->

                    val input =
                        (dialog as AlertDialog).findViewById<TextView>(
                            android.R.id.text1
                        )
                    Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()

                }
                .setNegativeButton("Cancel") { _, _ ->
                    Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
                }
                .show()

Style:

  <style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
  
        <item name="android:textAppearanceSmall">@style/MyTextAppearance</item>
        <item name="android:textAppearanceMedium">@style/MyTextAppearance</item>
        <item name="android:textAppearanceLarge">@style/MyTextAppearance</item>

        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>

        <item name="android:backgroundDimEnabled">true</item>

        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
        </item>

    </style>




    <style name="MyTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>


        <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
   <!--     <item name="backgroundTint">@color/colorPrimaryDark</item>-->
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
       <!-- <item name="android:textColor">@android:color/white</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <!--<item name="android:textColor">@android:color/darker_gray</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

Production: entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.