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.

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

Widget.AppCompat.Button.Colored::

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored::

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

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

Wenn ich Sie richtig verstehe, möchten Sie so etwas tun:

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 .

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.

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>

2. 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'.

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

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.

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

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

Gefüllt, nicht erhöhtButton :

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

TextButton :

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

SymbolButton :

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

Ein Text Buttonmit einem Symbol: :

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.

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

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

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>

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

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

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