Android Material Design Button Styles

308

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.

xsorifc28
quelle
Ich dies wii am hilfreichsten in benutzerdefinierten Button angrytools.com/android/button
Kharak

Antworten:

750

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:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button:: Geben Sie hier die Bildbeschreibung ein

Widget.AppCompat.Button.Colored:: Geben Sie hier die Bildbeschreibung ein

Widget.AppCompat.Button.Borderless Geben Sie hier die Bildbeschreibung ein

Widget.AppCompat.Button.Borderless.Colored:: Geben Sie hier die Bildbeschreibung ein


Um die Frage zu beantworten, ist daher der zu verwendende Stil

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

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 colorAccentwie hier erläutert durch das Attribut verwaltet . Sie können diesen Stil ändern und Ihre eigene Farbe in Ihrer Themendefinition anwenden:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

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:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

Dann müssen Sie nur noch diesen neuen Stil auf die Schaltfläche anwenden mit:

android:theme="@style/AppTheme.Button"

Fügen Sie diese Zeile zum Thema styles.xml hinzu, um ein Standardschaltflächendesign in einem Layout festzulegen:

<item name="buttonStyle">@style/btn</item>

Wo @style/btnist dein Button-Thema? Dadurch wird der Schaltflächenstil für alle Schaltflächen in einem Layout mit einem bestimmten Thema festgelegt

Yoann Hercouet
quelle
6
Ich denke, dies ist der beste Weg, dies ab sofort zu tun.
Xsorifc28
5
Haben Sie es auf einem Kitkat-Gerät getestet?
Maohieng
14
colorButtonNormalattr funktioniert bei Android 4.1.2 nicht. Die Tastenfarbe kann überhaupt nicht eingestellt werden ( android:backgroundbricht den Materialstil der Schaltfläche).
Konstantin Konopko
2
@YoannHercouet auf welcher Android-Version hast du diese Bilder gemacht? Auf meinem Andro 4.1.2 und 4.4.2 werden Schaltflächen mit style = ".. AppCompat.Button" nicht ausgelöst.
Grzegorz Dev
5
@konopko Wenn Sie wie ich sind, haben Sie dieses Problem für mich behoben, style=""anstatt Android:theme=""zu letzterem zu wechseln
John Snow
84

Einfachste Lösung


Schritt 1: Verwenden Sie die neueste Support-Bibliothek

compile 'com.android.support:appcompat-v7:25.2.0'

Schritt 2: Verwenden Sie AppCompatActivity als übergeordnete Aktivitätsklasse

public class MainActivity extends AppCompatActivity

Schritt 3: Verwenden Sie den App-Namespace in Ihrer Layout-XML-Datei

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Schritt 4: Verwenden Sie AppCompatButton anstelle von Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

Geben Sie hier die Bildbeschreibung ein

Ehtesham Hasan
quelle
7
Sie müssen nicht angeben müssen , android.support.v7.widget.AppCompatButtonda das Build - Tool , das automatisch verwendet , wenn Sie angebenButton
Mark
2
funktioniert das Aktivieren / Deaktivieren automatisch? oder müssen wir dafür wieder Stile angeben?
Sundeep1501
Dies entfernt die Statusliste auf Pre-Lollipop für mich, was zu einer Schaltfläche ohne Klickeffekte führt
Florian Walther
Scheint unter Android P zu funktionieren, außer dass die textColorTextfarbe für den deaktivierten Status überschrieben wird .
l33t
@ Sundeep1501 Wurde Widget.MaterialComponents.Button.OutlinedButtonzumindest für nicht in Grau geändert .
Dr. Jacky
66

Wenn ich Sie richtig verstehe, möchten Sie so etwas tun:
Geben Sie hier die Bildbeschreibung ein

In diesem Fall sollte es gerade ausreichen, um Folgendes zu verwenden:

<item name="android:colorButtonNormal">#2196f3</item>

Oder für API unter 21:

<item name="colorButtonNormal">#2196f3</item>

Zusätzlich zum Lernprogramm für Materialthemen .

Animierte Variante ist hier .

AlexKorovyansky
quelle
1
@androiddeveloper schob Probe zu GitHub, Kernsache ist hier - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky
Ich denke, Sie müssen kompatible Bibliothek für ältere Versionen verwenden.
AlexKorovyansky
2
Dies ist nicht der Fall, aber Sie können es festlegen, falls die API 21 und höher ist. Ich habe einen Weg gefunden, aber ich weiß nicht, wie ich es am besten machen kann.
Android-Entwickler
4
Kann ich mit diesem Ansatz mehrere Farben haben? Es scheint, dass es immer nur einen erlaubt.
Gerfmarquez
2
@gerfmarquez U brauchen tk haben verschiedene Stile für verschiedene Schaltflächen
KISHORE_ZE
39

So habe ich bekommen, was ich wollte.

Zuerst einen Button (in styles.xml) gemacht:

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

Die Welligkeit und der Hintergrund für die Schaltfläche als Zeichen primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Dies fügte den Welleneffekt hinzu, den ich suchte.

xsorifc28
quelle
3
Der Eckenradius sollte 2dp betragen, um mit den Framework-Assets übereinzustimmen. Darüber hinaus sollte translationZ nicht in XML festgelegt werden, und es ist nicht erforderlich, die Standardhöhe, minWidth, minHeight oder margin zu überschreiben.
Alanv
Der Standardrand wird 0, wenn ein benutzerdefinierter Stil angewendet wird. Aus irgendeinem Grund werden die Eigenschaften nicht vererbt.
Xsorifc28
3
Ah, ich habe nicht bemerkt, dass Ihnen ein Elternstil fehlt. Sie sollten parent = "Widget.Material.Button" hinzufügen oder einfach die Erstellung eines benutzerdefinierten Stils überspringen und einfach den Hintergrund auf der Schaltfläche selbst festlegen.
Alanv
Oh! Ich wusste nicht, dass es das gibt, bin in keiner Dokumentation darauf gestoßen. Ich werde das versuchen.
Xsorifc28
Obwohl ich nicht sicher bin, wie ich es ohne einen benutzerdefinierten Stil machen soll. Können Sie mir ein Beispiel zeigen?
Xsorifc28
33

Mit der stabilen Veröffentlichung von Android Material Components im November 2018 hat Google die Materialkomponenten vom Namespace android.support.designauf verschoben com.google.android.material.
Die Material Component Library ersetzt die Design Support Library von Android.

Fügen Sie die Abhängigkeit zu Ihrem hinzu build.gradle:

dependencies { implementation com.google.android.material:material:1.0.0 }

Fügen Sie dann das MaterialButtonzu Ihrem Layout hinzu:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Sie können die vollständige Dokumentation hier und die API hier überprüfen .

Um die Hintergrundfarbe zu ändern , haben Sie 2 Möglichkeiten.

  1. Verwenden des backgroundTintAttributs.

Etwas wie:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Es wird meiner Meinung nach die beste Option sein. Wenn Sie einige Themenattribute aus einem Standardstil überschreiben möchten, können Sie ein neues materialThemeOverlayAttribut verwenden.

Etwas wie:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

Die Option # 2 erfordert die 'com.google.android.material:material:1.1.0'.

Geben Sie hier die Bildbeschreibung einGeben Sie hier die Bildbeschreibung ein

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:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

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 soll
  • app: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 soll

  • app:strokeWidth: Die Breite, die für den Tastenanschlag verwendet werden soll
  • app:cornerRadius: Wird verwendet, um den Radius zu definieren, der für die Ecken der Schaltfläche verwendet wird
Gabriele Mariotti
quelle
android.support.design.button.MaterialButton scheint nicht zu kompilieren
IgorGanapolsky
3
@IgorGanapolsky Du hast recht. Habe gerade die Antwort mit der stabilen Version aktualisiert.
Gabriele Mariotti
20

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.

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

So habe ich die Schaltflächenform und -effekte im Ordner res / drawable-v21 definiert ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

2dp-Ecken sollen es mit dem Material-Thema konsistent halten.

Samkya
quelle
6
Rückwärtskompatibel?
Skynet
Es tut mir leid, dass ich zu spät antworte. Es ist jedoch nicht abwärtskompatibel, da Themen ziemlich spät eingeführt wurden.
Samkya
18

Neben android.support.design.button.MaterialButton( die von Gabriele Mariotti erwähnt ),

Es gibt auch ein anderes ButtonWidget namens, com.google.android.material.button.MaterialButtondas verschiedene Stile hat und sich erstreckt von AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Gefüllt, erhöht Button(Standard) :Geben Sie hier die Bildbeschreibung ein

style="@style/Widget.MaterialComponents.Button"

Gefüllt, nicht erhöhtButton :Geben Sie hier die Bildbeschreibung ein

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

TextButton : Geben Sie hier die Bildbeschreibung ein

style="@style/Widget.MaterialComponents.Button.TextButton"

SymbolButton : Geben Sie hier die Bildbeschreibung ein

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Ein Text Buttonmit einem Symbol: :Geben Sie hier die Bildbeschreibung ein


Lesen Sie: https://material.io/develop/android/components/material-button/

Eine Convenience-Klasse zum Erstellen einer neuen Materialschaltfläche.

Diese Klasse liefert aktualisierte Materialstile für die Schaltfläche im Konstruktor. Das Widget zeigt die korrekten Standardmaterialstile ohne Verwendung des Stilflags an.

ʍѳђ ઽ ૯ ท
quelle
1
Wissen Sie, wie Sie die Farbe ändern können?
Daniel Gomez Rico
1
app:backgroundTint& app:backgroundTintModeaus der Dokumentation .
30 ઽ ૯ ท
wie sie deaktivierte Zustandsfarbe zuweisen
Zaid Mirza
6

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

Geben Sie hier die Bildbeschreibung ein

Pre-Lollipop

Geben Sie hier die Bildbeschreibung ein

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

Die Aktivität ist onCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });
Rémy DAVID
quelle
War auf der Suche nach einem vollständigen Beispiel, überrascht, dass dies nicht höher gewählt wird - danke.
XMAN
4

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.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

abgerundete Ecke Knopf

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

Arnav Rao
quelle
1

Ich habe gerade eine Android-Bibliothek erstellt, mit der Sie die Tastenfarbe und die Welligkeitsfarbe einfach ändern können

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

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

xgc1986
quelle
1
Die Bibliothek erzeugt einen Fehler: rippleColor has already been definedEinige Benutzer haben ihn bereits in den 'Issues' erwähnt
SagiLow
0

Sie 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

Suhail Mehta
quelle
Aha. Ich muss es dann manuell machen. Wie würde ich vorgehen, um den radialen Berührungseffekt hinzuzufügen? Nur ein Übergangseffekt für die Schaltfläche?
Xsorifc28
trickyandroid.com/simple-ripple-reveal-elevation-tutorial versuchen Sie diesen Link könnte Ihnen
Suhail Mehta