Android-Materialdesign-Schaltflächenstile

Lesezeit: 11 Minuten

Android Materialdesign Schaltflachenstile
xsorifc28

Ich bin verwirrt über Schaltflächenstile für das Materialdesign. Ich möchte farbige erhabene Schaltflächen wie im angehängten Link erhalten, wie die Schaltflächen “Stopp erzwingen” und “Deinstallieren”, die im Abschnitt “Nutzung” 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 Standard-Schaltflä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 kann dies am hilfreichsten bei benutzerdefinierten Schaltflächen sein www.angertools.com/android/button

    – Kharak

    27. Dezember 2017 um 4:11 Uhr

  • stackoverflow.com/a/56822378/7254873

    – Sumit Shukla

    29. Juli 2019 um 9:41 Uhr

Android Materialdesign Schaltflachenstile
Yoann Hercouet

Ich werde meine Antwort hinzufügen, da ich keine der anderen bereitgestellten Antworten verwende.

Mit der Support Library v7 sind eigentlich alle Styles bereits definiert und einsatzbereit, für die Standard-Buttons sind alle diese Styles 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 ganze App:

Die Farbe aller UI-Steuerelemente (nicht nur Schaltflächen, sondern auch schwebende Aktionsschaltflächen, Kontrollkästchen usw.) wird durch das Attribut verwaltet colorAccent wie erklärt Hier. Sie können diesen Stil ändern und Ihre eigene Farbe in Ihrer Designdefinition 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, indem Sie einen der oben beschriebenen übergeordneten Stile erben. Im folgenden Beispiel habe ich nur die Hintergrund- und 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"

Um ein Standard-Schaltflächendesign in einem Layout festzulegen, fügen Sie diese Zeile zum Styles.xml-Design hinzu:

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

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

  • Ich denke, das ist tatsächlich der beste Weg, es ab sofort zu tun.

    – xsorifc28

    17. April 2016 um 1:20 Uhr

  • Haben Sie es auf einem Kitkat-Gerät getestet?

    – maohieng

    13. Juni 2016 um 20:34 Uhr

  • colorButtonNormal attr funktioniert bei mir nicht unter Android 4.1.2. Überhaupt kann die Schaltflächenfarbe nicht eingestellt werden (android:background bricht den Materialstil des Knopfes).

    – Konstantin Konopko

    18. Juli 2016 um 17:49 Uhr

  • @YoannHercouet, auf welcher Android-Version hast du diese Bilder gemacht? Auf meinem Andro 4.1.2 und 4.4.2 werden Buttons mit style=”..AppCompat.Button” nicht ausgelöst.

    – Grzegorz Dev

    5. August 2016 um 8:17 Uhr


  • @konopko Wenn Sie wie ich sind, haben Sie verwendet style="" anstatt Android:theme="" Der Wechsel zu letzterem hat dieses Problem für mich behoben

    – Johannes Schnee

    23. Juni 2017 um 3:33 Uhr

1646179392 275 Android Materialdesign Schaltflachenstile
Ehtesham Hasan

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

  • Sie müssen nicht angeben android.support.v7.widget.AppCompatButton da das Build-Tool dies automatisch verwendet, wenn Sie es angeben Button

    – Kennzeichen

    27. April 2018 um 3:45 Uhr

  • Funktioniert das automatische Aktivieren/Deaktivieren? oder müssen wir Stile dafür erneut angeben?

    – Sundeep1501

    4. Juli 2018 um 6:31 Uhr

  • Dadurch wird die Zustandsliste auf Pre-Lollipop für mich entfernt, was zu einer Schaltfläche ohne Klickeffekte führt

    – Florian Walther

    28. August 2018 um 17:31 Uhr

  • Scheint auf Android P zu funktionieren, außer dass textColor überschreibt die Textfarbe für deaktiviert Zustand.

    – l33t

    2. Dezember 2018 um 20:40 Uhr

  • @Sundeep1501 Hat sich für nicht in Grau geändert Widget.MaterialComponents.Button.OutlinedButtonwenigstens.

    – Dr.jacky

    13. Mai 2019 um 10:54 Uhr

1646179393 899 Android Materialdesign Schaltflachenstile
Alex Korovyansky

Wenn ich dich richtig verstehe, willst du so etwas machen:
Geben Sie hier die Bildbeschreibung ein

In einem solchen Fall sollte es gerade ausreichen, Folgendes zu verwenden:

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

Oder für API kleiner als 21:

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

Zusätzlich zu Lernprogramm zum Verwenden von Materialdesigns.

Animierte Variante ist Hier.

  • @androiddeveloper hat das Beispiel auf GitHub gepusht, Kernsache ist hier — github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/…,

    – Alex Korovyansky

    17. November 2014 um 12:10 Uhr

  • Ich denke, Sie müssen die Compat-Bibliothek für ältere Versionen verwenden.

    – Alex Korovyansky

    18. November 2014 um 14:28 Uhr

  • 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, was der beste Weg ist, es zu tun.

    – Android-Entwickler

    19. November 2014 um 19:57 Uhr

  • Kann ich mit diesem Ansatz mehrere Farben haben? scheint es nur eins nach dem anderen zuzulassen.

    – Gerfmarquez

    21. September 2015 um 15:43 Uhr

  • @gerfmarquez Du musst tk haben unterschiedliche Stile für verschiedene Schaltflächen

    – KISHORE_ZE

    15. Oktober 2015 um 12:58 Uhr


Android Materialdesign Schaltflachenstile
Gabriele Marotti

Du kannst den … benutzen
Materialkomponentenbibliothek.

Addieren die Abhängigkeit zu deinem build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.3.0’ }

Fügen Sie dann die hinzu MaterialButton zu deiner Anlage:

<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 überprüfen vollständige Dokumentation hier und API hier.

Um es zu ändern Hintergrundfarbe du hast 2 möglichkeiten.

  1. Verwendung der backgroundTint Attribut.

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

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 mindestens die Version 1.1.0.

Geben Sie hier die Bildbeschreibung einGeben Sie hier die Bildbeschreibung ein

Sie können einen dieser Stile verwenden:

  • Gefüllte Schaltfläche (Standard): style="@style/Widget.MaterialComponents.Button
  • Text-Schaltfläche: style="@style/Widget.MaterialComponents.Button.TextButton"
  • OutlinedButton: style="@style/Widget.MaterialComponents.Button.OutlinedButton"

ALTE Support-Bibliothek:

Mit dem Neuen Unterstützungsbibliothek 28.0.0enthält die Designbibliothek 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 gefüllte Hintergrundfarbe der Schaltflächen zusammen mit Weiß für die Textfarbe der Schaltflächen.

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

  • app:rippleColor: Die Farbe, die für den Welleneffekt der Schaltfläche verwendet werden soll

  • app:backgroundTint: Wird verwendet, um einen Farbton auf den Hintergrund der Schaltfläche anzuwenden. Wenn Sie die Hintergrundfarbe der Schaltfläche ändern möchten, verwenden Sie dieses Attribut anstelle von background.

  • app:strokeColor: Die Farbe, die für den Tastenstrich verwendet werden soll

  • app:strokeWidth: Die für den Tastenstrich zu verwendende Breite

  • app:cornerRadius: Wird verwendet, um den Radius zu definieren, der für die Ecken der Schaltfläche verwendet wird

Android Materialdesign Schaltflachenstile
xsorifc28

Hier ist, wie ich bekam, was ich wollte.

Erstellen Sie zuerst eine Schaltfläche (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 Drawable 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, nach dem ich suchte.

  • Der Eckenradius sollte 2 dp betragen, um den Framework-Assets zu entsprechen. Darüber hinaus sollte translationZ nicht in XML festgelegt werden, und es besteht keine Notwendigkeit, die Standardhöhe, minWidth, minHeight oder den Rand zu überschreiben.

    – alanv

    13. Oktober 2014 um 22:15 Uhr


  • Der Standardrand wird 0, wenn ein benutzerdefinierter Stil angewendet wird, aus irgendeinem Grund werden die Eigenschaften nicht geerbt.

    – xsorifc28

    14. Oktober 2014 um 21:15 Uhr

  • Ah, ich habe nicht bemerkt, dass Sie einen übergeordneten Stil vermissen. Sie sollten parent=”Widget.Material.Button” hinzufügen oder das Erstellen eines benutzerdefinierten Stils ganz überspringen und einfach den Hintergrund auf der Schaltfläche selbst festlegen.

    – alanv

    15. Oktober 2014 um 1:20 Uhr

  • Oh! Ich wusste nicht, dass es das gibt, bin in keiner Dokumentation darauf gestoßen. Ich werde das versuchen.

    – xsorifc28

    16. Oktober 2014 um 21:58 Uhr

  • Obwohl ich mir nicht sicher bin, wie ich es ohne einen benutzerdefinierten Stil machen soll. Können Sie mir ein Beispiel zeigen?

    – xsorifc28

    16. Oktober 2014 um 22:05 Uhr

1646179394 389 Android Materialdesign Schaltflachenstile
ʍѳђઽ૯ท

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

Es gibt auch eine andere Button Widget aufgerufen com.google.android.material.button.MaterialButton die verschiedene Stilrichtungen hat und sich erstreckt 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 (Ursprünglich): Geben Sie hier die Bildbeschreibung ein

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

Gefüllt, ungehoben Button: Geben Sie hier die Bildbeschreibung ein

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

Text Button: Geben Sie hier die Bildbeschreibung ein

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

Symbol Button: 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 Button mit Symbol:: Geben Sie hier die Bildbeschreibung ein


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

Eine praktische Klasse zum Erstellen einer neuen Materialschaltfläche.

Diese Klasse stellt aktualisierte Materialstile für die Schaltfläche im Konstruktor bereit. Das Widget zeigt die korrekten Standard-Materialstile ohne Verwendung des Stil-Flags an.

  • Der Eckenradius sollte 2 dp betragen, um den Framework-Assets zu entsprechen. Darüber hinaus sollte translationZ nicht in XML festgelegt werden, und es besteht keine Notwendigkeit, die Standardhöhe, minWidth, minHeight oder den Rand zu überschreiben.

    – alanv

    13. Oktober 2014 um 22:15 Uhr


  • Der Standardrand wird 0, wenn ein benutzerdefinierter Stil angewendet wird, aus irgendeinem Grund werden die Eigenschaften nicht geerbt.

    – xsorifc28

    14. Oktober 2014 um 21:15 Uhr

  • Ah, ich habe nicht bemerkt, dass Sie einen übergeordneten Stil vermissen. Sie sollten parent=”Widget.Material.Button” hinzufügen oder das Erstellen eines benutzerdefinierten Stils ganz überspringen und einfach den Hintergrund auf der Schaltfläche selbst festlegen.

    – alanv

    15. Oktober 2014 um 1:20 Uhr

  • Oh! Ich wusste nicht, dass es das gibt, bin in keiner Dokumentation darauf gestoßen. Ich werde das versuchen.

    – xsorifc28

    16. Oktober 2014 um 21:58 Uhr

  • Obwohl ich mir nicht sicher bin, wie ich es ohne einen benutzerdefinierten Stil machen soll. Können Sie mir ein Beispiel zeigen?

    – xsorifc28

    16. Oktober 2014 um 22:05 Uhr

1646179396 416 Android Materialdesign Schaltflachenstile
Samkya

Hier ist ein Beispiel, das dabei hilft, den Schaltflächenstil konsistent in Ihrer App 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 Materialthema konsistent halten.

  • Tut mir leid, dass ich spät antworte, aber es ist nicht abwärtskompatibel, da Themen ziemlich spät eingeführt wurden.

    – Samkya

    3. Juli 2018 um 8:51 Uhr

906250cookie-checkAndroid-Materialdesign-Schaltflächenstile

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy