Malvorlagen in Android mit Material Design und AppCompat


256

Bevor das AppCompatUpdate heute veröffentlicht wurde, konnte ich die Farbe der Schaltflächen in Android L ändern, jedoch nicht in älteren Versionen. Nach dem Einfügen des neuen AppCompat-Updates kann ich die Farbe für beide Versionen nicht ändern. Wenn ich es versuche, verschwindet die Schaltfläche einfach. Weiß jemand, wie man die Tastenfarbe ändert?

Die folgenden Bilder zeigen, was ich erreichen möchte:

Bild zeigt das gewünschte Ergebnis

Die weiße Taste ist die Standardeinstellung, die rote ist das, was ich will.

Dies ist, was ich zuvor getan habe, um die Farbe der Schaltflächen in styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

und um es dynamisch zu machen:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

Außerdem habe ich das übergeordnete Thema von @android:style/Theme.Material.Light.DarkActionBarauf geändertTheme.AppCompat.Light.DarkActionBar


Ich habe das gleiche versucht, aber nichts hat die Farbe des Buttons verändert. Ich habe auch Android entfernt: aus dem Attribut, weil es aus der Support-Bibliothek und nicht Teil des Android-Namespace ist
Informatic0re

Wenn Sie android: colorButtonNormal mit Android 5.0 verwenden, funktioniert es - aber es scheint nicht abwärtskompatibel zu sein
Informatic0re

Ja, genau das habe ich erlebt
mail929

Ich habe auch herausgefunden, dass die Akzentfarbe die CheckBox-Farbe nicht ändert, aber in älteren Versionen
Informatic0re

plus eins für diese dynamische Methode. :)
theapache64

Antworten:


222

Offiziell festgelegt in der Support Library Rev. 22 (Fr 13. März 2015). Siehe relevantes Google Code-Problem:

https://issuetracker.google.com/issues/37008632

Anwendungsbeispiel

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

v21 / theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

17
Gibt es ein Beispiel für die Verwendung? Wie kann ich Farben auf nur eine Schaltfläche einstellen?
Intrications

3
@WindRider Ich habe jedoch ein Problem. Ich möchte damit Schaltflächen mit verschiedenen Farben erstellen. Ich erstelle Stile Button.Red, Button.Green, alle mit Eltern gleich Button Basisstil. Ich setze item colorButtonNormal auf die gewünschte Farbe und setze dies als Schaltflächenthema. Leider färbt es nur Schaltflächen für 21. Unten überschreibt es nicht colorButtonNormal, das im Thema definiert ist.
dominik4142

71
Mit AppCompat 22.1.1 funktioniert es für mich unter 2.3.7, 4.4.4 und 5.1 auch nur für eine Schaltfläche: Festlegen von Schaltflächen android:theme="@style/ColoredButton"und in styles.xml <style name="ColoredButton" parent="Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/button_yellow</item> </style>
hunyadym

2
@hunyadym: Wenn Sie der Schaltfläche ein Thema hinzufügen, wird onClick aus irgendeinem Grund unterbrochen. Ich würde dies als Problemumgehung klassifizieren, bis die Designbibliothek einen besseren Weg bietet.
freute sich am

3
@gladed: Es scheint in Ihrem Fall das Problem ist dieser Fehler: code.google.com/p/android/issues/detail?id=62795#c1
hunyadym

148

Bearbeiten (22.06.2016):

Die Appcompat- Bibliothek begann, Materialschaltflächen zu unterstützen, nachdem ich die ursprüngliche Antwort veröffentlicht hatte. In diesem Beitrag Sie die einfachste Implementierung von erhöhten und flachen Schaltflächen.

Ursprüngliche Antwort:

Da AppCompat die Schaltfläche noch nicht unterstützt, können Sie XML als Hintergrund verwenden. Dazu habe ich mir den Quellcode von Android angesehen und die zugehörigen Dateien für das Styling von Materialschaltflächen gefunden.

1 - Sehen Sie sich die ursprüngliche Implementierung der Materialschaltfläche aus der Quelle an.

Schauen Sie sich die btn_default_material.xml im Android-Quellcode an .

Sie können die Datei in den Ordner drawable-v21 Ihres Projekts kopieren. Berühren Sie hier jedoch nicht den Farbattr. Die Datei, die Sie ändern müssen, ist die zweite Datei.

drawable-v21 / custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2 - Erhalten Sie die Form des Originalmaterialknopfes

Wie Sie feststellen, wird in diesem Zeichenbild eine Form verwendet, die Sie in dieser Datei des Quellcodes finden .

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3 - Abmessungen der Materialschaltfläche abrufen

Und in dieser Datei gibt es einige Dimensionen, die aus der Datei verwendet werden , die Sie hier finden . Sie können die gesamte Datei kopieren und in Ihren Werteordner ablegen. Dies ist wichtig, um allen Schaltflächen dieselbe Größe (die in Materialschaltflächen verwendet wird) zuzuweisen

4 - Erstellen Sie eine weitere zeichnbare Datei für alte Versionen

Für ältere Versionen sollten Sie eine andere Zeichnung mit demselben Namen haben. Ich setze die Elemente direkt inline, anstatt sie zu referenzieren. Vielleicht möchten Sie sie referenzieren. Aber auch hier sind die ursprünglichen Abmessungen des Materialknopfs das Wichtigste.

drawable / custom_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

Ergebnis

Ihre Taste hat auf Lollipop-Geräten einen Welleneffekt. Die alten Versionen haben bis auf den Ripple-Effekt genau die gleiche Schaltfläche. Da Sie jedoch Drawables für verschiedene Zustände bereitstellen, reagieren diese auch auf Berührungsereignisse (wie bisher).


4
Ja genau. Wenn Sie für alle Schaltflächen denselben Hintergrund verwenden und diesen nicht immer wieder hinzufügen möchten, definieren Sie einen Schaltflächenstil in Ihrer styles.xml <style name = "ButtonStyle" parent = "android: Widget.Button"> < item name = "android: background"> ​​@ drawable / custom_btn </ item> </ style> und fügen Sie Ihrem Thema einen Schaltflächenstil hinzu <item name = "android: buttonStyle"> @ style / ButtonStyle </ item>
eluleci

1
Wie kann ich dieser Schaltfläche in Pre-21 eine Höhe hinzufügen? Wie ich verstehe, sollte ich eine neue Form mit Schatten unter der Schaltfläche hinzufügen, aber wo genau sollte ich sie platzieren?
Xakz

7
Sehr ärgerlich, dass dies nicht
Sam

39
Ich stimme dir vollkommen zu. Button ist das am häufigsten verwendete Widget, ist jedoch nicht in der Support-Bibliothek für Material enthalten. Ich frage mich, was sie gedacht haben.
Eluleci

1
Wenn

111

Dies wurde in Version 23.0.0 der AppCompat-Bibliothek um weitere Themen erweitert

Widget.AppCompat.Button.Colored

Schließen Sie zunächst die appCompat-Abhängigkeit ein, falls Sie dies noch nicht getan haben

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

Jetzt, da Sie v23 der App-Kompatibilität verwenden müssen, müssen Sie auch auf SDK-v23 abzielen!

    compileSdkVersion = 23
    targetSdkVersion = 23

In deinem values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

In deinem values/style

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

In deinem values-v21/style

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

Da basiert dein Button-Thema auf Widget.AppCompat.Button.Colored Die Textfarbe auf der Schaltfläche ist standardmäßig weiß!

Es scheint jedoch ein Problem zu geben, wenn Sie die Schaltfläche deaktivieren. Die Schaltfläche ändert ihre Farbe in hellgrau, aber die Textfarbe bleibt weiß!

Eine Problemumgehung besteht darin, die Textfarbe auf der Schaltfläche speziell auf Weiß einzustellen! wie ich es in dem oben gezeigten Stil getan habe.

Jetzt können Sie einfach Ihre Schaltfläche definieren und AppCompat den Rest erledigen lassen :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Deaktivierter Zustand Deaktivierter Status

Aktivierter Status Aktivierter Status

Bearbeiten:

Hinzufügen <Button android:theme="@style/BrandButtonStyle"/>


19
Das ist jetzt der beste Weg! Sie können den Stil auch für einzelne Schaltflächen mit verwenden <Button android:theme="@style/BrandButtonStyle"/>. Es muss das themeAttribut sein und nicht das styleAttribut.
Kohlendo

7
@ Muhammad Alfaifi Haben Sie ein Beispielprojekt oder einen Kern dafür? Ich habe ein sauberes Projekt erstellt und es funktioniert nicht: github.com/Bresiu/ThemeTest . In Lolipop-Schaltflächenfarben mit Akzentfarbe und in API v16 bleibt die Schaltfläche grau: i.imgur.com/EVwkpk2.png
Bresiu

4
Dies funktionierte nur bei der Angabe des Attributs android: theme. Ich konnte den Attributstil mit dem Schaltflächen-Tag nicht für mich verwenden.
Ray Hunter

8
Mit v23.1 lib funktionierte dies nicht richtig, es zeigte immer die Akzentfarbe als bg, nicht die definierte, wenn versucht wurde, es auf das gesamte Thema einzustellen
Patrick Favre

3
Gleiches Problem hier auf, in Version 23.1 hat die deaktivierte Schaltfläche dieselbe Farbe wie die aktivierte Schaltfläche. sehr frustrierend. hat jemand das herausgefunden?
AhmedW

63

In der Android Support Library 22.1.0 machte Google den ButtonFarbton bekannt. Eine andere Möglichkeit, die Hintergrundfarbe der Schaltfläche anzupassen, besteht darin, das backgroundTintAttribut zu verwenden.

Beispielsweise,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

1
Schließlich! Blog-Beitrag über die 22.1-Version: android-developers.blogspot.no/2015/04/…
GuillermoMP

5
In der Dokumentation heißt es: "Dies wird automatisch verwendet, wenn Sie Button in Ihren Layouts verwenden. Sie sollten diese Klasse nur manuell verwenden müssen, wenn Sie benutzerdefinierte Ansichten schreiben." developer.android.com/reference/android/support/v7/widget/… bedeutet dies, dass wir nicht alle Layouts und Java-Codes manuell ändern müssen?
Stephane

@Stephane nein, wir sollten Layouts ändern. chris.banes.me/2015/04/22/support-libraries-v22-1-0
Anton Holovin

GENIAL! Gibt es jetzt einen AppCompatToggleButton, mit dem Sie den Hintergrund von ToggleButtons ändern können? Vielleicht kann ich den Code plagiieren ...
swooby

19
Leider funktioniert dies nur mit API 21+. Das android: backgroundTint-Attribut funktioniert unter Pre-Lollipop auch mit der AppCompat-Bibliothek nicht. Nur colorButtonNormal vom Thema funktioniert auf Pre-Lollipop.
Timur_C

42

Verwenden Sie zur Unterstützung farbiger Schaltflächen die neueste AppCompat-Bibliothek (> 23.2.1 ) mit:

aufblasen - XML

AppCompat Widget:

android.support.v7.widget.AppCompatButton

AppCompat-Stil:

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

NB! So legen Sie eine benutzerdefinierte Farbe in XML fest: Verwenden Sie appstatt attr :.android

(verwenden alt+enteroder deklarieren xmlns:app="http://schemas.android.com/apk/res-auto"zu verwendenapp )

App : backgroundTint = "@ color / your_custom_color"

Beispiel:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

oder programmgesteuert einstellen - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

Ihr Java-Code hat bei mir funktioniert. Die Antwort von Muhammad Alfaifi half dabei, die Textfarbe der Schaltfläche festzulegen.
Micro

Gibt es eine einfache Möglichkeit, den Farbton programmgesteuert einzustellen (nicht den Hintergrund)?
Gewölbe

Wunderbar! Funktioniert auch mit 4.4.4! Und der Selektorzustand bleibt auch ganz gut erhalten!
Sud007

Gemäß den Dokumenten : Dies wird automatisch verwendet, wenn Sie Schaltflächen in Ihren Layouts festlegen. Sie müssen nur AppCompatButton angeben, wenn Sie benutzerdefinierte Ansichten erstellen.
gMale

Interessanterweise funktionierten die XML-Änderungen in einem Fragment perfekt, jedoch nicht in einem Aktivitätslayout. Die Aktivitätsschaltflächen verwendeten nur colorAccent. Die programmatische Version hat jedoch funktioniert.
Leon

25

Mit neuesten Support - Bibliothek können Sie nur erben Sie Aktivität von AppCompatActivity, so wird es Ihr aufblasen Buttonwie AppCompatButtonund geben Ihnen die Möglichkeit, Stil Farbe jeder einzelnen Taste auf der Anlage mit der Verwendung von android:theme="@style/SomeButtonStyle", wo SomeButtonStyleist:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

Arbeitete für mich in 2.3.7, 4.4.1, 5.0.2


Vielen Dank!!! Ich habe gerade den übergeordneten Wert für "Widget.AppCompat.EditText" geändert, da ich den EditText-Stil aktualisieren muss.
Juan Saravia

3
Danke, habe auch für mich gearbeitet. Stellen Sie sicher, zu verwenden android:themeund nicht style. Sie können auch hinzufügen colorControlHighlightund colorControlActivated.
Rachel

funktioniert nicht, API 22, AppCompatActivity, Thema Material.Light
Andrey Uglev

1
@AndreyUglev versuchen Theme.AppCompat.Lightstattdessen zu verwenden .
Artem

Hallo, es ändert die gewünschte Farbe, entfernt aber die Schatten.
Amio.io

16

wenn Sie unter Stil wollen

Geben Sie hier die Bildbeschreibung ein

Fügen Sie diesen Stil Ihrer Schaltfläche hinzu

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

wenn du diesen Stil willst

Geben Sie hier die Bildbeschreibung ein

Fügen Sie den folgenden Code hinzu

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

1
compile 'com.android.support:appcompat-v7:23.1.0'Sie müssen hinzufügen.
Pratik Butani

1
Die Frage ist jedoch, wie man Materialschaltflächen mit unterschiedlichen Farben hat, damit nicht alle die Primärfarbe des Themas haben.
Apostrofix

15

Die Antwort ist in THEMA nicht Stil

Das Problem ist, dass die Button-Farbe dem colorButtonNormal des Themas entspricht. Ich habe versucht, den Stil auf viele verschiedene Arten zu ändern, ohne Glück. Also habe ich das Button-Thema geändert .

Erstellen Sie ein Thema mit colorButtonNormal und colorPrimary:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

Verwenden Sie dieses Thema in der Schaltfläche

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

Der "AppTheme.Button" kann beliebig erweitert werden. Button-Stil wie hier Ich verwende Primärfarbe für Textfarbe:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

Und Sie erhalten den Knopf in jeder gewünschten Farbe, die mit dem Materialdesign kompatibel ist.


Was sind andere Attribute, die ich in Stile hinzufügen kann.
Sagar Nayak

4

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


4

Diese Arbeit für mich mit Appcompat-v7: 22.2.0 in Android + 4.0

in Ihrer styles.xml

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

in Ihrer Layoutdatei

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

Hallo, es ändert die gewünschte Farbe, entfernt aber die Schatten.
Amio.io

Hallo nochmal, ich kann sehen. Es ist jetzt richtiges Verhalten.
Amio.io

Wie können Sie dies in Java tun?
Micro

@MicroR Überprüfen Sie die Antwort oben.
Ingyesid

4

Layout:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color / button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

color / button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

3

Für diejenigen, die eine ImageButton hier verwenden, ist, wie Sie es tun:

In style.xml:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

in v21 / style.xml:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

Dann in Ihrer Layoutdatei:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

Dies hat geholfen ... Ich denke, es ist wichtig zu beachten, dass der Schaltflächenstil als Thema anstelle eines Stils im Schaltflächen-Widget angewendet wird. Ich habe es unter style = "@ style / BlueImageButton" angewendet und es hat nicht funktioniert
velval

3

Wenn Sie eine Style-Lösung mit colorButtonNormal verwenden , vergessen Sie nicht, von Widget.AppCompat.Button.Colored zu erben damit der Ripple-Effekt funktioniert;)

Mögen

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

2

Eine weitere einfache Lösung mit dem AppCompatButton

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />

2

Verwenden:

android:backgroundTint="@color/customColor"

Oder auch :

android:background="@color/customColor"

und das gibt der Schaltfläche eine benutzerdefinierte Farbe.


1

Wenn Sie nur die Materialschaltfläche "Flach" möchten, können Sie den Hintergrund mithilfe des Attributs selectableItemBackground anpassen , wie hier erläutert .


Wenn Sie keine der "Farbton" -Farben oder ausgewählten Farben ändern möchten, ist dies definitiv eine einfache Lösung, um dennoch ein Feedback mit farbigen Schaltflächen zu erhalten. Vielen Dank!
Theblang

1

So ändern Sie die Farbe einer einzelnen Schaltfläche

ViewCompat.setBackgroundTintList(button, getResources().getColorStateList(R.color.colorId));

1

Für mich war das Problem, dass in Android 5.0 das android:colorButtonNormalkeine Wirkung hatte und tatsächlich kein Element aus dem Thema (wie android:colorAccent), aber in Android 4.4.3 zum Beispiel. Das Projekt wurde mit compileSdkVersionund targetSdkVersionauf 22 konfiguriert , daher habe ich alle Änderungen als @Muhammad Alfaifi vorgeschlagen, aber am Ende habe ich festgestellt, dass das Problem die buildToolsVersion war , die nicht aktualisiert wurde. Sobald ich auf 23.0.1 umgestiegen bin, funktioniert alles fast wie gewohnt . Jetzt hat das android:colorButtonNormalnoch keine Wirkung, aber zumindest reagiert der Knopf daraufandroid:colorAccent , was für mich akzeptabel ist.

Ich hoffe, dass dieser Hinweis jemandem helfen konnte. Hinweis: Ich habe den Stil direkt auf die Schaltfläche angewendet, da die Schaltfläche android:theme=[...]auch keine Wirkung hatte.


Sie haben fast die 100% richtige Methode gefunden, wie Sie new @ style / Widget.AppCompat.Button.Colored verwenden;) - siehe diese Antwort stackoverflow.com/a/35811157/19733911
sosite

1

Eine Möglichkeit, dies zu erreichen, ermöglicht es Ihnen, nur auf einen Stil zu zeigen und NICHT ALLE Schaltflächen in Ihrer App gleich zu gestalten.
Fügen Sie in der Datei theme.xml ein Thema hinzu

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

Jetzt in styles.xml hinzufügen

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

Zeigen Sie jetzt in Ihrem Layout einfach auf den STIL in Ihrer Schaltfläche

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

1

AKTUALISIEREN

Verwenden Sie die unten stehende Design Support Library (23.2.0) und Appcompatwidgets

In der Android Support Library 22.1 :

Dies erfolgt automatisch beim Aufblasen von Layouts. Ersetzen Sie Button durch AppCompatButton, TextView durch AppCompatTextView usw., um sicherzustellen, dass jedes die Tönung unterstützt. In dieser Version sind diese tönungsbewussten Widgets jetzt öffentlich verfügbar, sodass Sie die Tönungsunterstützung auch dann beibehalten können, wenn Sie eines der unterstützten Widgets in Unterklassen unterteilen müssen.

Die vollständige Liste der Farbton-Widgets:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

Materialdesign für Pre-Lollipop-Geräte :

AppCompat (auch bekannt als ActionBarCompat) wurde als Backport der Android 4.0 ActionBar-API für Geräte gestartet, die auf Gingerbread ausgeführt werden. Es bietet eine gemeinsame API-Schicht zusätzlich zur Backport-Implementierung und der Framework-Implementierung. AppCompat v21 bietet eine API und einen Funktionsumfang, die mit Android 5.0 auf dem neuesten Stand sind



1

Wenn Sie einen AppCompat-Stil wie Widget.AppCompat.Button , Base.Widget.AppCompat.Button.Colored verwenden möchten usw. verwenden , müssen Sie diese Stile mit kompatiblen Ansichten aus der Support-Bibliothek verwenden.

Der folgende Code funktioniert nicht für Pre-Lolipop-Geräte:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

Sie müssen AppCompatButton verwenden, um AppCompat-Stile zu aktivieren:

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

2
Werden App-kompatible Widgets nicht automatisch beim Aufblasen von XML-Layouts verwendet? Ich glaube, ImageViewwird durch ersetzt AppCompatImageViewund es sollte mit allen Widgets, die die entsprechende AppCompatVersion haben, gleich sein.
d.aemon

Nein, wenn Sie nicht auf die letzte Zielversion abzielen, müssen Sie diese android.support.v7.widget.AppCompatImageViewexplizit definieren .
Farukcankaya

Was meinst du mit last target version@power?
d.aemon

1

Ich benutze das. Ripple-Effekt und Schattenklick funktionieren.

style.xml

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>

Schaltfläche im Layout:

<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

0

Eigentlich wollte ich meine benutzerdefinierten Schaltflächenstile nicht ändern, aber leider funktionierten sie nicht mehr.

Meine App hat eine minSdkVersion von 9 und alles hat vorher funktioniert.

Ich weiß nicht warum, aber seit ich das Android entfernt habe: Vor dem ButtonStyle scheint es wieder zu funktionieren

jetzt = arbeiten:

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

vor = nur graue Materialknöpfe:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

Ich habe keinen speziellen Ordner für die neue Android-Version, da meine Schaltflächen ziemlich flach sind und in allen Android-Versionen gleich aussehen sollten.

Vielleicht kann mir jemand sagen, warum ich das "android:" entfernen musste. Der ImageButton arbeitet immer noch mit "android:"

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

0

Nachdem ich 2 Tage lang nach Antworten gesucht hatte, funktionierte das Button-Theming in API <21 für mich nicht.

Meine einzige Lösung besteht darin, die AppCompatButton-Tönung nicht nur mit dem Basis-App-Thema "colorButtonNormal", sondern auch mit der Ansicht backgroundTint wie folgt zu überschreiben:

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

Sie können dann Ihre Schaltflächenfarbe wie folgt definieren:

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

0

Diese SO-Antwort hat mir geholfen, eine Antwort zu finden: https://stackoverflow.com/a/30277424/3075340

Ich benutze diese Dienstprogrammmethode, um den Hintergrundton einer Schaltfläche festzulegen. Es funktioniert mit Pre-Lollipop-Geräten:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

Verwendung im Code:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

Auf diese Weise müssen Sie keine ColorStateList angeben, wenn Sie nur die Hintergrundfarbe ändern möchten und nichts weiter, als die hübschen Schaltflächeneffekte beizubehalten und was nicht.


0

Ich android:textColorhabe @nullin meinem Button-Thema eingestellt und es hilft.

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

Jetzt ist colorAccentdie Textfarbe der Schaltfläche in definiertAppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

0

Wenn Sie Kotlin verwenden, sehen Sie, dass alle Attribute von MaterialButton unterstützt werden. Verwenden Sie nicht das Attribut android: background. MaterialButton verwaltet seinen eigenen Hintergrund, der gezeichnet werden kann. Wenn Sie einen neuen Hintergrund festlegen, kann die deaktivierte Farbe der Materialschaltfläche nicht mehr garantieren, dass die neu eingeführten Attribute ordnungsgemäß funktionieren. Wenn der Standardhintergrund geändert wird, kann die Materialschaltfläche kein genau definiertes Verhalten garantieren. Bei MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        buttonClick.setOnClickListener {
            (it as MaterialButton).apply {
                backgroundTintList = ColorStateList.valueOf(Color.YELLOW)
                backgroundTintMode = PorterDuff.Mode.SRC_ATOP
            }
        }
    }
}

Bei activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Material Button Normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:text="Material Button Background Red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonNormal" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTintMode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:backgroundTintMode="multiply"
        android:text="Tint Red + Mode Multiply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTint" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Click To Change Background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTintMode" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ressource: Materialschaltfläche Farbbeispiel ändern


0

Wenn Sie dies per Code in einer beliebigen Farbe tun möchten, verwenden Sie Folgendes:

DrawableCompat.setTintList(button.getBackground(), ColorStateList.valueOf(yourColor));
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.