Il Material Design non dà stile alle finestre di dialogo di avviso


161

Ho aggiunto il design del materiale appCompat alla mia app e sembra che le finestre di dialogo di avviso non stiano usando i miei colori primario, primario scuro o accento.

Ecco il mio stile di 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>

Sulla base della mia comprensione, anche il testo del pulsante delle finestre di dialogo dovrebbe usare questi colori. Sbaglio nella mia comprensione o c'è qualcos'altro che devo fare?


Soluzione:

La risposta contrassegnata mi ha portato sulla strada giusta.

<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>

Puoi provare questa libreria che ho creato: github.com/AndroidDeveloperLB/MaterialStuffLibrary
sviluppatore Android

15
La parte inferiore dovrebbe essere la soluzione? In tal caso, pubblicalo come risposta automatica , non modificare la risposta nella domanda.
Adi Inbar,

Risposte:


463

AGGIORNATO AGOSTO 2019 CON I componenti Material per la libreria Android:

Con i nuovi componenti Material per la libreria Android è possibile utilizzare la nuova com.google.android.material.dialog.MaterialAlertDialogBuilderclasse, che si estende dalla androidx.appcompat.AlertDialog.Builderclasse esistente e fornisce supporto per le più recenti specifiche di Material Design.

Basta usare qualcosa del genere:

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

Puoi personalizzare i colori estendendo lo ThemeOverlay.MaterialComponents.MaterialAlertDialogstile:

  <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>  

Per applicare il tuo stile personalizzato basta usare il costruttore:

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

inserisci qui la descrizione dell'immagine

Per personalizzare i pulsanti, il titolo e il corpo del testo controlla questo post per maggiori dettagli.

Puoi anche cambiare lo stile a livello globale nel tema della tua app:

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

CON BIBLIOTECA DI SUPPORTO E TEMA APPCOMPAT:

Con il nuovo AppCompat v22.1puoi usare il nuovo android.support.v7.app.AlertDialog .

Basta usare un codice come questo:

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

E usa uno stile come questo:

<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>

Altrimenti puoi definire nel tuo tema attuale:

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

e poi nel tuo codice:

 import android.support.v7.app.AlertDialog

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

Ecco il AlertDialog su Kitkat: inserisci qui la descrizione dell'immagine


2
Perché forzare AlertDialog.Builder a utilizzare il tema esatto invece di aggiornare quello predefinito? Preferirei risolvere questo problema in styles.xml anziché in codice Java.
Tomáš Hubálek

2
I caratteri del titolo e dei pulsanti non sono in grassetto sui dispositivi pre-lecca-lecca.
jimmy0251,

9
Ho dovuto anteporre a "android:" per farlo funzionare:<item name="android:alertDialogTheme">@style/AppCompatAlertDialogStyle</item>

1
+1 per una risposta superba, ma come posso ottenere la stessa UI per la versione di Android sotto Lollypop ... perché con questo sotto l'interfaccia utente del dispositivo sembra così strana.
realpranav il

1
aggiungi import android.support.v7.app.AlertDialog funziona
FlipNovid

9

quando si inizializza il generatore di dialog, passare il secondo parametro come tema. Mostrerà automaticamente il design del materiale con livello API 21.

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

o,

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

4

AppCompat non lo fa per le finestre di dialogo (non ancora almeno)

EDIT: lo fa ora. assicurati di usareandroid.support.v7.app.AlertDialog


Sembra che tu possa fare alcune modifiche agli stili delle finestre di dialogo con AppCompat
Matthew,

il mio Android Studio di default import app.AlertDialognon mi ha fornito l'appCompat. Ho provato a capire cosa c'è che non va per circa 40 minuti prima di controllarlo ... Accidenti a Google!
Glorifind,



1

Prova questa libreria:

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

Si basa DialogFragmentsinvece di AlertDialogs(come quello di @afollestad). Il vantaggio principale: le finestre di dialogo non si chiudono dopo la rotazione e i callback funzionano ancora.


La mia biblioteca è molto più capace. E puoi sempre avvolgere una finestra di dialogo con un DialogFragment. 😛
afollestad,

1

Per qualche motivo Android: textColor sembra aggiornare solo il colore del titolo. È possibile modificare il colore del testo del messaggio utilizzando a

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

Finestre di avviso per lo styling di Material Design: carattere personalizzato, pulsante, colore e forma, ..

 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()

Stile:

  <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>

Produzione: inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.