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.