Standard Android Button mit einer anderen Farbe

Question

Ich möchte die Farbe einer Standard-Android-Schaltfläche leicht ändern, um sie besser an das Branding eines Kunden anzupassen.

Die beste Methode, die ich bisher gefunden habe, ist die Änderung der Button auf die Ziehharmonika, die sich in res/drawable/red_button.xml :

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

Aber tun, dass erfordert, dass ich tatsächlich drei verschiedene Drawables für jede Schaltfläche, die ich anpassen möchten (eine für die Schaltfläche im Ruhezustand, eine, wenn fokussiert, und eine, wenn gedrückt) erstellen. Das scheint komplizierter und non-DRY als ich brauche.

Alles, was ich wirklich tun möchte, ist eine Art von Farbumwandlung auf die Schaltfläche anwenden. Gibt es einen einfacheren Weg zu gehen, über die Änderung einer Schaltfläche die Farbe als ich tun?

Answer 1

Ich habe herausgefunden, dass dies alles ganz einfach in einer Datei erledigt werden kann. Fügen Sie etwas wie den folgenden Code in eine Datei namens custom_button.xml und setzen dann background="@drawable/custom_button" in Ihrer Schaltflächenansicht:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/orange4"
                android:startColor="@color/orange5"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/blue2"
                android:startColor="@color/blue25"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Answer 2

Im Anschluss an die Antwort von Tomasz können Sie auch programmatisch den Farbton der gesamten Schaltfläche mithilfe des PorterDuff-Multiplikationsmodus festlegen. Dadurch wird die Farbe der Schaltfläche und nicht nur der Farbton geändert.

Wenn Sie mit einer grau schattierten Standardtaste beginnen:

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

erhalten Sie eine rot schattierte Schaltfläche,

button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

erhalten Sie eine grün schattierte Schaltfläche usw., wobei der erste Wert die Farbe im Hex-Format ist.

Dazu wird der aktuelle Farbwert der Schaltfläche mit Ihrem Farbwert multipliziert. Ich bin sicher, dass man mit diesen Modi noch viel mehr machen kann.

Answer 3

Mike, vielleicht sind Sie an Farbfiltern interessiert.

Ein Beispiel:

button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

Versuchen Sie dies, um die gewünschte Farbe zu erzielen.

Answer 4

Dies ist meine Lösung, die perfekt funktioniert ab API 15 . Diese Lösung behält alle Standard-Klick-Effekte, wie Material RippleEffect . Ich habe es nicht mit niedrigeren APIs getestet, aber es sollte funktionieren.

Alles, was Sie tun müssen, ist:

1) Erstellen Sie einen Stil, der sich nur ändert colorAccent :

<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

Ich empfehle die Verwendung von ThemeOverlay.AppCompat oder Ihr Haupt AppTheme als Elternteil, um den Rest Ihrer Stile zu behalten.

2) Fügen Sie diese beiden Zeilen zu Ihrem button Widget:

style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"

Manchmal ist Ihr neuer colorAccent wird in Android Studio Preview nicht angezeigt, aber wenn Sie Ihre App auf dem Telefon starten, wird die Farbe geändert.

---

Beispiel-Schaltflächen-Widget

<Button
    android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/sign_in_facebook"
    android:textColor="@android:color/white"
    android:theme="@style/Facebook.Button" />

Answer 5

Sie können jetzt auch die appcompat-v7-Funktion AppCompatButton mit dem backgroundTint Attribut:

<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/>