Dialogfelder für MaterialComponents-Themenalarme

81

Kürzlich habe ich von der Support-Bibliothek zu com.google.android.material gewechselt: material: 1.0.0

Aber jetzt habe ich ein Problem, auf diesen Seiten gibt es einen Hinweis https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Hinweis: Die Verwendung eines Themas "Materialkomponenten" aktiviert einen benutzerdefinierten Ansichts-Inflater, der Standardkomponenten durch ihre Material-Gegenstücke ersetzt. Derzeit werden dadurch nur Button-XML-Komponenten durch MaterialButton ersetzt.

Und das Thema, das ich benutze 

Theme.MaterialComponents.Light.NoActionBar

Wenn Sie genau das tun, was in dieser Notiz angegeben ist, werden die AlertDialog-Schaltflächen durch MaterialButtons ersetzt. Das Problem besteht jedoch darin, dass MaterialButtons standardmäßig farbig im Hintergrund angezeigt werden und die Schaltflächen nun folgendermaßen aussehen: Geben Sie hier die Bildbeschreibung ein

Wie kann ich sie wieder randlos und hintergrundlos machen?

PS Ich verwende den Alert Builder, um Alert-Dialoge zu erstellen:

android.app.AlertDialog.Builder
android  material-design  android-alertdialog  android-styles  material-components-android 
— antanas_sepikas
quelle
Sie können das Bridge-Design verwenden, wenn Sie AppCompat-Designinhalte mit einigen neuen Material-UI-Stilen möchten. Es kann Ihr Problem lösen. Lesen
— Sie hierzu

Antworten:

111

Ich fand heraus, was dieses Problem verursachte. Ich muss eine andere AlertDialog-Klasse verwenden:

androidx.appcompat.app.AlertDialog

Als ich dazu wechselte, fing alles an, wie erwartet zu funktionieren. Hier habe ich die Lösung gefunden:

https://github.com/material-components/material-components-android/issues/162

— antanas_sepikas
quelle
2
Ich habe meinen Code mithilfe der Option / Funktion "Auf AndroidX migrieren" von Android Studio auf AndroidX migriert, aber diese Bibliothek wurde nicht automatisch auf AndroidX aktualisiert. Dieses Problem wurde für mich behoben, als ich den Import manuell aktualisierte, wie die Antwort andeutet
— sushrut619
1
Du rettest mich! Vielen Dank!
— Mateus
Nicht alle Helden tragen Umhänge!
— Dave o Grady
Kurz vor Mitternacht ein großes Dankeschön. Du hast mir eine Stunde Schlaf erspart.
— Nantoka
75

Bei der Verwendung com.google.android.material:material:1.0.0und können androidx.appcompat.app.AlertDialogSie jede Schaltfläche in der buttonBarOption Widget.MaterialComponents.Button.TextButtonals übergeordnetes Element anpassen .

val builder: AlertDialog.Builder = AlertDialog.Builder(ContextThemeWrapper(context, R.style.AlertDialogTheme))

Verwenden Sie das Standardlayout oder fügen Sie ein benutzerdefiniertes Layout hinzu builder.setView(R.layout.my_dialog)

In Ihren Stilen:

<style name="AlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
    <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/colorPrimary</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">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/gray_dark</item>
    <item name="android:textSize">14sp</item>
</style>

Bildschirmfoto

— rauben
quelle
1
Dies ist, wonach ich gesucht habe, als ich versucht habe, meine Dialoge zu gestalten. Alle Antworten, die ich gefunden habe, verwendeten nicht AndroidX.
— LeonardoSibela
2
Ich bin mir nur nicht sicher, warum Sie textAllCaps auf false einrichten. Ich sehe es normalerweise in Dialogen auf true gesetzt (die einzige Ausnahme war ein Material Design-Beispiel von Google namens Crane)
— LeonardoSibela
5
Ich wünschte, ich könnte dies 50 Mal positiv bewerten. Ich habe ungefähr zwei Stunden damit verbracht, nur dumme Dialoge zu färben. Beachten Sie, dass Sie MaterialAlertDialogBuilderstattdessen auch verwenden sollten .
— gMale
1
Der Kommentar von @gMale hat mir Zeit gespart.
— Funktion7
1
Danke, das hat wirklich geholfen!
— Grisgram
19

Wenn Sie die Material Components-Bibliothek verwenden, verwenden Sie am besten AlertDialogdie MaterialAlertDialogBuilder.

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

Dies ist das Standardergebnis:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie den Schaltflächen auch einen anderen Stil oder eine andere Farbe zuweisen möchten, können Sie diese Antwort überprüfen .

— Gabriele Mariotti
quelle
Durch das Ersetzen AlertDialog.Builderdurch wurde MaterialAlertDialogBuilderdie Farbe der Schaltflächen nicht geändert. Siehe Antworten unten, um die zu ändern theme.
— CoolMind
@CoolMind Die Frage ist nicht, wie die Tastenfarbe geändert werden kann.
— Gabriele Mariotti
12

Ich habe die obigen Antworten getestet. Obwohl ich eine gute Idee hatte, funktionierte keine für meinen Fall. Das ist also meine Antwort.

  1. Stellen Sie sicher, dass Sie android:theme="@style/AppMaterialTheme"in Ihrer Manifestdatei unter Anwendung oder Aktivität haben.

  2. Öffnen Sie Ihre Styles.xml-Datei und ändern Sie sie wie folgt.

    <style name="AppMaterialTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primaryBlue</item>
    <item name="colorPrimaryDark">@color/primaryBlue</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlActivated">@color/primaryBlue</item>
    <item name="colorControlHighlight">@color/colorAccent_main</item>
    <item name="colorButtonNormal">@color/white</item>

    <item name="materialAlertDialogTheme">@style/AlertDialogMaterialTheme</item>
</style>

<style name="AlertDialogMaterialTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Negative</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:fillColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

<style name="Alert.Button.Negative" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/color_0054BB</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_marginEnd">8dp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

  3. Sie müssen das Thema nicht auf Ihren AlertDialog anwenden, da Ihre Aktivität das Thema darauf anwendet. Erstellen Sie den Dialog also normal.

Geben Sie hier die Bildbeschreibung ein

Das Ergebnis wird sein.

Geben Sie hier die Bildbeschreibung ein

— Hesam
quelle
Ich weiß nicht warum, von "buttonBarPositiveButtonStyle" funktioniert nicht für mich, aber "android: buttonBarPositiveButtonStyle" funktioniert richtig.
— LukaszTaraszka
Der Stil gilt nicht für PositiveButton. Das gleiche gilt für Negative.
— LukaszTaraszka
11

Erstens ist es besser, MaterialAlertDialog zu verwenden wenn Sie Material Theme verwenden.

Weitere Informationen finden Sie hier - Material.io → Themendialoge

Geben Sie hier die Bildbeschreibung ein

MaterialAlertDialogBuilder(context)
            .setTitle(R.string.confirm)
            .setMessage(R.string.logout)
            .setPositiveButton(R.string.logout_alert_positive) { _, _ -> activity?.logout() }
            .setNegativeButton(R.string.never_mind, null)
            .show()

 

Dies ist die layout.xml der MaterialAlertDialog-Aktionen. Wie Sie sehen können, gibt es 3 Schaltflächen und jede hat ihren eigenen Stil. Hier erfahren Sie, wie Sie sie ändern können.

Schritt 1: Teilen Sie Android mit, dass Sie das Standard- MaterialAlertDialog- Design ändern möchten .

<style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="materialAlertDialogTheme">@style/AlertDialog</item>
    ...
</style>

Schritt 2: Teilen Sie Android mit, dass Sie einen bestimmten Schaltflächenstil ändern möchten. buttonBarNeutralButtonStyle, buttonBarNegativeButtonStyleoderbuttonBarPositiveButtonStyle

<style name="AlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
</style>

Schritt 3: Definieren Sie Ihren benutzerdefinierten Stil

<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">#FF0000</item>
</style>
— arsent
quelle
6

Hier finden Sie eine andere Lösung für die Verwendung von MaterialComponents: https://issuetracker.google.com/issues/116861837#comment9

<style name="Theme.Custom.Material.Alert.Dialog.Light" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="materialButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>
</style>

<style name="Theme.Custom.Material.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:dialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
    <item name="android:alertDialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
  ....
</style>

Obwohl es für mich immer noch kein "beabsichtigtes Verhalten" ist.

— Zaun
quelle
5

Wenn Sie nicht verwenden möchten androidx.appcompat.app.AlertDialog, können Sie einfach den Stil der Dialogschaltflächen neu definieren:

In Ihrer style.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   ...
   <item name="android:buttonBarButtonStyle">@style/DialogButton</item>
   ...
</style>

<style name="DialogButton" parent="Widget.MaterialComponents.Button.TextButton"/>
— Sylvain Lagache
quelle
3

Wenn Sie die com.android.support:design:28.0.0Bibliothek verwenden, android.support.v7.app.AlertDialogfunktioniert die Verwendung wie erwartet.

— Tamoxin
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.