Ich bin verwirrt über Schaltflächenstile für das Materialdesign. Ich möchte farbenfrohe erhabene Schaltflächen wie im angehängten Link erhalten, z. B. die Schaltflächen "Stopp erzwingen" und "Deinstallieren", die im Abschnitt "Verwendung" angezeigt werden. Gibt es verfügbare Stile oder muss ich sie definieren?
http://www.google.com/design/spec/components/buttons.html#buttons-usage
Ich konnte die Standardschaltflächenstile nicht finden.
Beispiel:
<Button style="@style/PrimaryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate"
android:id="@+id/button3"
android:layout_below="@+id/editText5"
android:layout_alignEnd="@+id/editText5"
android:enabled="true" />
Wenn ich versuche, die Hintergrundfarbe der Schaltfläche durch Hinzufügen zu ändern
android:background="@color/primary"
Alle Stile wie Touch-Animation, Schatten, abgerundete Ecken usw. verschwinden.
Antworten:
Ich werde meine Antwort hinzufügen, da ich keine der anderen Antworten verwende.
Mit der Support Library v7 sind alle Stile bereits definiert und einsatzbereit. Für die Standardschaltflächen sind alle diese Stile verfügbar:
Widget.AppCompat.Button
::Widget.AppCompat.Button.Colored
::Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
::Um die Frage zu beantworten, ist daher der zu verwendende Stil
So ändern Sie die Farbe
Für die gesamte App:
Die Farbe aller UI-Steuerelemente (nicht nur Schaltflächen, sondern auch schwebende Aktionsschaltflächen, Kontrollkästchen usw.) wird
colorAccent
wie hier erläutert durch das Attribut verwaltet . Sie können diesen Stil ändern und Ihre eigene Farbe in Ihrer Themendefinition anwenden:Für eine bestimmte Schaltfläche:
Wenn Sie den Stil einer bestimmten Schaltfläche ändern müssen, können Sie einen neuen Stil definieren, der einen der oben beschriebenen übergeordneten Stile übernimmt. Im folgenden Beispiel habe ich gerade den Hintergrund und die Schriftfarben geändert:
Dann müssen Sie nur noch diesen neuen Stil auf die Schaltfläche anwenden mit:
Fügen Sie diese Zeile zum Thema styles.xml hinzu, um ein Standardschaltflächendesign in einem Layout festzulegen:
Wo
@style/btn
ist dein Button-Thema? Dadurch wird der Schaltflächenstil für alle Schaltflächen in einem Layout mit einem bestimmten Thema festgelegtquelle
colorButtonNormal
attr funktioniert bei Android 4.1.2 nicht. Die Tastenfarbe kann überhaupt nicht eingestellt werden (android:background
bricht den Materialstil der Schaltfläche).style=""
anstattAndroid:theme=""
zu letzterem zu wechselnEinfachste Lösung
Schritt 1: Verwenden Sie die neueste Support-Bibliothek
Schritt 2: Verwenden Sie AppCompatActivity als übergeordnete Aktivitätsklasse
Schritt 3: Verwenden Sie den App-Namespace in Ihrer Layout-XML-Datei
Schritt 4: Verwenden Sie AppCompatButton anstelle von Button
quelle
android.support.v7.widget.AppCompatButton
da das Build - Tool , das automatisch verwendet , wenn Sie angebenButton
textColor
Textfarbe für den deaktivierten Status überschrieben wird .Widget.MaterialComponents.Button.OutlinedButton
zumindest für nicht in Grau geändert .Wenn ich Sie richtig verstehe, möchten Sie so etwas tun:
In diesem Fall sollte es gerade ausreichen, um Folgendes zu verwenden:
Oder für API unter 21:
Zusätzlich zum Lernprogramm für Materialthemen .
Animierte Variante ist hier .
quelle
So habe ich bekommen, was ich wollte.
Zuerst einen Button (in
styles.xml
) gemacht:Die Welligkeit und der Hintergrund für die Schaltfläche als Zeichen
primary_round.xml
:Dies fügte den Welleneffekt hinzu, den ich suchte.
quelle
Fügen Sie die Abhängigkeit zu Ihrem hinzu
build.gradle
:Fügen Sie dann das
MaterialButton
zu Ihrem Layout hinzu:Sie können die vollständige Dokumentation hier und die API hier überprüfen .
Um die Hintergrundfarbe zu ändern , haben Sie 2 Möglichkeiten.
backgroundTint
Attributs.Etwas wie:
materialThemeOverlay
Attribut verwenden.Etwas wie:
Die Option # 2 erfordert die
'com.google.android.material:material:1.1.0'.
ALTE Unterstützungsbibliothek:
Mit der neuen Support Library 28.0.0 enthält die Design Library jetzt die
MaterialButton
.Sie können diese Schaltfläche zu unserer Layoutdatei hinzufügen mit:
Standardmäßig verwendet diese Klasse die Akzentfarbe Ihres Themas für die Hintergrundfarbe der Schaltflächen sowie Weiß für die Textfarbe der Schaltflächen.
Sie können die Schaltfläche mit folgenden Attributen anpassen:
app:rippleColor
: Die Farbe, die für den Tastenwelligkeitseffekt verwendet werden sollapp:backgroundTint
: Dient zum Anwenden eines Farbtons auf den Hintergrund der Schaltfläche. Wenn Sie die Hintergrundfarbe der Schaltfläche ändern möchten, verwenden Sie dieses Attribut anstelle des Hintergrunds.app:strokeColor
: Die Farbe, die für den Tastenanschlag verwendet werden sollapp:strokeWidth
: Die Breite, die für den Tastenanschlag verwendet werden sollapp:cornerRadius
: Wird verwendet, um den Radius zu definieren, der für die Ecken der Schaltfläche verwendet wirdquelle
Hier ist ein Beispiel, das Ihnen dabei hilft, den Schaltflächenstil in Ihrer App einheitlich anzuwenden.
Hier ist ein Beispielthema, das ich mit den spezifischen Stilen verwendet habe.
So habe ich die Schaltflächenform und -effekte im Ordner res / drawable-v21 definiert ...
2dp-Ecken sollen es mit dem Material-Thema konsistent halten.
quelle
Neben
android.support.design.button.MaterialButton
( die von Gabriele Mariotti erwähnt ),Es gibt auch ein anderes
Button
Widget namens,com.google.android.material.button.MaterialButton
das verschiedene Stile hat und sich erstreckt vonAppCompatButton
:Gefüllt, erhöht
Button
(Standard) :Gefüllt, nicht erhöht
Button
:Text
Button
:Symbol
Button
:Ein Text
Button
mit einem Symbol: :Lesen Sie: https://material.io/develop/android/components/material-button/
quelle
app:backgroundTint
&app:backgroundTintMode
aus der Dokumentation .Ich habe viele Antwort- und Drittanbieter-Bibliotheken ausprobiert, aber keine hat die Grenze beibehalten und den Effekt auf den Pre-Lollipop erhöht, während der Ripple-Effekt auf den Lollipop ohne Nachteil auftrat. Hier ist meine endgültige Lösung, bei der mehrere Antworten kombiniert werden (Rahmen / Erhöhungen werden auf Gifs aufgrund der Graustufen-Farbtiefe nicht gut gerendert):
Lutscher
Pre-Lollipop
build.gradle
layout.xml
drawable-v21 / btn_bg.xml
drawable / btn_bg.xml
Die Aktivität ist onCreate
quelle
1) Sie können eine Schaltfläche mit abgerundeten Ecken erstellen, indem Sie XML-Zeichenbar definieren. Sie können den Radius vergrößern oder verkleinern, um die Rundheit der Schaltflächenecke zu erhöhen oder zu verringern. Stellen Sie diese XML-Datei als Hintergrund für die Schaltfläche ein.
2) Um die Standardschatten- und Schattenübergangsanimation zwischen Schaltflächenzuständen zu ändern, müssen Sie den Selektor definieren und ihn mit der Eigenschaft android: stateListAnimator auf die Schaltfläche anwenden. Eine vollständige Referenz zur Anpassung der Schaltflächen finden Sie unter: http://www.zoftino.com/android-button
quelle
Ich habe gerade eine Android-Bibliothek erstellt, mit der Sie die Tastenfarbe und die Welligkeitsfarbe einfach ändern können
https://github.com/xgc1986/RippleButton
Sie müssen nicht für jede gewünschte Schaltfläche einen Stil mit einer anderen Farbe erstellen, sodass Sie die Farben nach dem Zufallsprinzip anpassen können
quelle
rippleColor has already been defined
Einige Benutzer haben ihn bereits in den 'Issues' erwähntSie können der Ansicht Luftfahrt geben, indem Sie ihr eine Z-Achse hinzufügen, und sie kann einen Standardschatten haben. Diese Funktion wurde in der L-Vorschau bereitgestellt und ist nach der Veröffentlichung verfügbar. Im Moment können Sie einfach ein Bild hinzufügen, das diesen Look für den Schaltflächenhintergrund verleiht
quelle