it-swarm.com.de

Android Materialdesign-Schaltflächenstile

Ich bin verwirrt über Schaltflächenstile für das Materialdesign. Ich möchte bunte Schaltflächen wie im angehängten Link erhalten, z. B. die Schaltflächen "Stopp erzwingen" und "Deinstallieren" im Abschnitt "Verwendung". 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 verschwinden, wie Touch-Animation, Schatten, abgerundete Ecken usw.

286
xsorifc28

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 folgenden 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: enter image description here

Widget.AppCompat.Button.Colored: enter image description here

Widget.AppCompat.Button.Borderlessenter image description here

Widget.AppCompat.Button.Borderless.Colored: enter image description here


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

<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 frei bewegliche Aktionsschaltflächen, Kontrollkästchen usw.) wird über das Attribut colorAccent verwaltet, wie erläutert hier . 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 nur 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 diesen neuen Stil auf die Schaltfläche anwenden mit:

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

Fügen Sie zum Festlegen eines Standardschaltflächenentwurfs in einem Layout die folgende Zeile zum Thema styles.xml hinzu:

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

wobei @style/btn Ihr Schaltflächenthema ist. Hiermit wird der Schaltflächenstil für alle Schaltflächen in einem Layout mit einem bestimmten Thema festgelegt

698
Yoann Hercouet

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

enter image description here

80
Ehtesham Hasan

Wenn ich Sie richtig verstehe, möchten Sie Folgendes tun:
enter image description here

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

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

Oder für API weniger als 21:

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

Zusätzlich zu Verwenden des Lernprogramms für Materialthemen .

Animierte Variante ist hier .

63
AlexKorovyansky

So habe ich bekommen, was ich wollte.

Zuerst einen Knopf gemacht (in styles.xml):

<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 ziehbares 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 Welligkeitseffekt hinzu, den ich suchte.

37
xsorifc28

Mit der stabilen Version von Android Material Components im November 2018 hat Google die Materialkomponenten vom Namespace Android.support.design nach com.google.Android.material verschoben.
Material Component Library ist ein Ersatz für die Design Support Library von Android.

Füge die Abhängigkeit zu deinem build.gradle hinzu:

dependencies { implementation ‘com.google.Android.material:material:1.0.0’ }

Fügen Sie dann das MaterialButton zu 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 API hier überprüfen.

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

  1. Verwenden Sie das Attribut backgroundTint.

So 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 eines Standardstils überschreiben möchten, können Sie ein neues materialThemeOverlay Attribut verwenden.

So 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 den 'com.google.Android.material:material:1.1.0'.

enter image description hereenter image description here

OLD Support Library:

Mit dem neuen Support Library 28.0. enthält die Design Library jetzt den 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 mit Schaltflächen gefüllte Hintergrundfarbe sowie Weiß für die Schaltflächentextfarbe.

Sie können die Schaltfläche mit folgenden Attributen anpassen:

  • app:rippleColor: Die Farbe, die für den Button-Ripple-Effekt verwendet werden soll
  • app:backgroundTint: Wird verwendet, um den Hintergrund der Schaltfläche einzufärben. 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 Knopfdruck verwendet werden soll
  • app:cornerRadius: Dient zum Definieren des Radius für die Ecken der Schaltfläche
22

Im Folgenden finden Sie ein Beispiel, mit dem Sie den Schaltflächenstil in Ihrer App einheitlich anwenden können.

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 Form und die Effekte der Schaltflächen 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 dienen dazu, die Übereinstimmung mit dem Material-Thema zu gewährleisten.

20
samkya

Neben _Android.support.design.button.MaterialButton_ (, das von Gabriele Mariotti erwähnt wurde)

Es gibt auch ein anderes Button Widget mit dem Namen com.google.Android.material.button.MaterialButton , das unterschiedliche Stile hat und erstreckt sich 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) : enter image description here

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

Gefüllt, nicht erhöht Button: enter image description here

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

Text Button: enter image description here

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

Icon Button: enter image description here

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

Ein Text Button mit einem Symbol: : enter image description here


Lesen: https: //material.io/develop/Android/components/material-button/

Eine Komfortklasse zum Erstellen einer neuen Materialschaltfläche.

Diese Klasse liefert aktualisierte Materialstile für die Schaltfläche im Konstruktor. Das Widget zeigt die korrekten Standardmaterialstile an, ohne dass das Stilflag verwendet wird.

13
ʍѳђઽ૯ท

Ich habe viele Antwort- und Drittanbieter-Bibliotheken ausprobiert, aber keine hat den Rahmen beibehalten und den Effekt auf Pre-Lollipop erhöht, während der Ripple-Effekt auf Lollipop ohne Nachteile erhalten blieb. Hier ist meine endgültige Lösung, die mehrere Antworten kombiniert (Rahmen/Erhöhungen werden auf Gifs aufgrund der Graustufen-Farbtiefe nicht gut wiedergegeben):

Lutscher

enter image description here

Pre-Lollipop

enter image description here

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>

Aktivität 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;
        }
    });
6
Rémy DAVID

1) Sie können einen Knopf mit abgerundeten Ecken erstellen, indem Sie xml drawable definieren. Sie können den Radius vergrößern oder verkleinern, um die Rundheit der Knopfecke zu vergrößern oder zu verkleinern. 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>

rounded corner button

2) Um die Standardanimation für Schatten und Schattenübergänge zwischen den Schaltflächenzuständen zu ändern, müssen Sie einen 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 hier: http://www.zoftino.com/Android-button

4
Arnav Rao

Ich habe gerade eine Android Bibliothek erstellt, mit der Sie auf einfache Weise die Tastenfarbe und die Ripple-Farbe ä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 Schaltfläche einen eigenen Stil mit einer anderen Farbe erstellen, damit Sie die Farben nach dem Zufallsprinzip anpassen können

1
xgc1986

sie können der Ansicht Luftfahrt geben, indem Sie der Ansicht eine Z-Achse hinzufügen, und der Ansicht können Standardschatten zugewiesen werden. Diese Funktion wurde in der L-Vorschau bereitgestellt und wird nach der Veröffentlichung verfügbar sein. Im Moment können Sie einfach ein Bild hinzufügen, um den Hintergrund der Schaltfläche zu sehen

0
Suhail Mehta