Standard-Android-Button mit einer anderen Farbe

Question

Ich mag die Farbe einer Standard-Android-Taste, um leicht anzupassen Branding der einen Kunden besser ändern.

Der beste Weg, die ich gefunden habe, dies zu tun, so weit ist die Button des ziehbar zum ziehbar in res/drawable/red_button.xml mich zu ändern:

<?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 das tut es erforderlich, dass ich tatsächlich schaffen drei verschiedene Drawables für jede Taste I anpassen wollen (eine für die Taste in der Ruhestellung ein, wenn konzentriert, und eine, wenn sie gedrückt). Das scheint komplizierter und nicht-DRY, als ich brauche.

Alles, was ich möchte wirklich tun gilt eine Art von Farbe auf die Schaltfläche verwandeln. Gibt es einen einfacheren Weg zu gehen, um eine Schaltfläche Farbe ändern, als ich tue?

Answer 1

Ich entdeckte, dass dies alles in einer Datei leicht ziemlich erfolgen. Setzen Sie so etwas wie der folgenden Code in einer Datei mit dem Namen custom_button.xml und dann Satz background="@drawable/custom_button" in Ihrer Schaltfläche Ansicht:

<?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 Tomasz Antwort, können Sie auch die Schatten der gesamten Schaltfläche mit der PorterDuff Multiplikationsmode programmatisch festgelegt. Dadurch wird die Schaltfläche Farbe ändern und nicht nur die Tönung.

Wenn Sie mit einer Standard-grau schattierte Taste starten:

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

gibt Ihnen eine rote schattierte Taste,

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

werden Sie eine grün getönte Taste etc., wobei der erste Wert die Farbe in Hex-Format ist.

Es funktioniert durch den aktuellen Schaltfläche Farbwert von Ihrem Farbwert multipliziert wird. Ich bin sicher, dass es auch viel mehr Sie mit diesem Modi tun können.

Answer 3

Mike, Sie könnten in Farbfiltern interessiert sein.

Ein Beispiel:

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

versuchen, dies um die Farbe zu erzielen, die Sie wollen.

Answer 4

Das ist meine Lösung, die perfekt funktioniert Start von API 15 . Diese Lösung hält alle Klick-Effekte Standardschaltfläche, wie Material RippleEffect. Ich habe es nicht auf niedrigere APIs getestet, aber es sollte funktionieren.

Alles, was Sie tun müssen, ist:

Erstellen

1) mit einem Stil, der nur colorAccent ändert:

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

  

Ich empfehle, mit ThemeOverlay.AppCompat oder Ihrer Haupt AppTheme als Eltern, den Rest Ihres Designs zu halten.

2) Fügen Sie diese beiden Zeilen in button widget:

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

  

Manchmal werden Ihr neuer colorAccent im Android Studio Vorschau nicht angezeigt wird, aber wenn Sie Ihre App auf dem Handy starten, wird die Farbe geändert werden.

---

Proben Knopf-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 nun auch AppCompat-v7 verwenden ist AppCompatButton mit dem backgroundTint Attribute:

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

Answer 6

Ich mag die Farbfilter-Vorschlag in früheren Antworten von @conjugatedirection und @Tomasz; Allerdings fand ich, dass der Code bereitgestellt bisher nicht so leicht angewendet, wie ich erwartet hatte.

Erstens, es wurde nicht erwähnt Dabei gilt: zu übernehmen und das Farbfilter zu löschen. Es ist möglich, dass es auch andere gute Plätze sind, dies zu tun, aber was kam mir in den Sinn war ein OnTouchListener .

Aus meiner Lektüre der ursprünglichen Frage, wäre die ideale Lösung sein, die keine Bilder beinhalten. Die akzeptierte Antwort custom_button.xml von @emmby verwendet, ist wahrscheinlich eine bessere Passform als Farbfilter, wenn das ist Ihr Ziel. In meinem Fall beginne ich mit einem PNG-Bild von einem UI-Designern, was die Schaltfläche aussehen soll wie. Wenn ich auf die Schaltfläche Hintergrund dieses Bild gesetzt, wird das Standard Highlight Feedback vollständig verloren. Dieser Code ersetzt das Verhalten mit einer programmatischen Abdunklungseffekt.

button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 0x6D6D6D sets how much to darken - tweak as desired
                setColorFilter(v, 0x6D6D6D);
                break;
            // remove the filter when moving off the button
            // the same way a selector implementation would 
            case MotionEvent.ACTION_MOVE:
                Rect r = new Rect();
                v.getLocalVisibleRect(r);
                if (!r.contains((int) event.getX(), (int) event.getY())) {
                    setColorFilter(v, null);
                }
                break;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setColorFilter(v, null);
                break;
        }
        return false;
    }

    private void setColorFilter(View v, Integer filter) {
        if (filter == null) v.getBackground().clearColorFilter();
        else {
            // To lighten instead of darken, try this:
            // LightingColorFilter lighten = new LightingColorFilter(0xFFFFFF, filter);
            LightingColorFilter darken = new LightingColorFilter(filter, 0x000000);
            v.getBackground().setColorFilter(darken);
        }
        // required on Android 2.3.7 for filter change to take effect (but not on 4.0.4)
        v.getBackground().invalidateSelf();
    }
});

ich das als eine separate Klasse extrahierte für die Anwendung auf mehrere Tasten -. Als anonyme innere Klasse gezeigt nur die Idee zu bekommen

Answer 7

Wenn Sie machen Farbtasten mit XML können Sie den Code ein bisschen sauberer machen durch die Angabe der fokussierten und gedrückten Zustand in einer separaten Datei und sie wiederverwenden. Meine grüne Taste sieht wie folgt aus:

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

    <item android:state_focused="true" android:drawable="@drawable/button_focused"/>
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient android:startColor="#ff00ff00" android:endColor="#bb00ff00" android:angle="270" />
            <stroke android:width="1dp" android:color="#bb00ff00" />
            <corners android:radius="3dp" />
            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>

Answer 8

Die kürzeste Lösung, die mit jeder Android-Version funktioniert:

<Button
     app:backgroundTint="@color/my_color"

Notes / Anforderungen: :

• Verwenden Sie den app: Namespace und nicht die android: Namespace!

• appcompat version> 24.2.0

  Abhängigkeiten {     Kompilierung ‚com.android.support:appcompat-v7:25.3.1‘ }

Erklärung :

Answer 9

Ich bin mit diesem Ansatz

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimaryDark">#413152</item>
    <item name="android:colorPrimary">#534364</item>
    <item name="android:colorAccent">#534364</item>
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">#534364</item>
    <item name="android:textColor">#ffffff</item>
</style>

Wie man es von oben sehen kann, ich bin ein benutzerdefinierten Stil für meine Taste. Die Schaltfläche Farbe entspricht die Akzentfarbe. Das finde ich ein viel besserer Ansatz als die Einstellung android:background wie ich nicht die sich allmählich ausbreitende Wirkung verlieren Google zur Verfügung stellt.

Answer 10

Es gibt eine viel einfachere Art und Weise jetzt: android-holo-colors.com

Es wird Ihnen die Farben aller Holo Drawables ändern (Tasten, Spinnern, ...) leicht. Sie wählen die Farbe und dann eine Zip-Datei herunterladen Drawables für alle Auflösungen enthält.

Answer 11

Verwenden Sie es auf diese Weise:

buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);

Answer 12

In <Button> Verwendung android:background="#33b5e5". oder besser android:background="@color/navig_button"

Answer 13

Die DroidUX Komponentenbibliothek hat eine ColorButton Widget, deren Farbe leicht geändert werden kann, sowohl über xML-Definition und programmatisch zur Laufzeit so können Sie auch die Benutzer lassen die Schaltfläche Farbe / Thema zu setzen, wenn Ihre Anwendung es erlaubt.

Answer 14

Sie können auch dieses Online-Tool verwenden, um Ihre Schaltfläche http://angrytools.com/android/button/ anpassen und Verwendung android:background="@drawable/custom_btn" die benutzerdefinierte Schaltfläche in Ihrem Layout zu definieren.

Answer 15

Sie können Thema Ihrer Taste auf diese

gesetzt

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
 <item name="colorButtonNormal">@color/HEXColor</item>
 <item name="android:textColor">@color/HEXColor</item>
</style>

Answer 16

Eine einfache Möglichkeit ist, einfach eine benutzerdefinierte Button-Klasse zu definieren, die alle die Eigenschaften annehmen, dass Sie wie Radius wünschen, Steigung, gepresste Farbe, normale Farbe usw. und verwenden Sie dann nur, dass in der XML-Layout statt Einrichten den Hintergrunds mit XML. Eine Probe ist hier

Dies ist sehr nützlich, wenn Sie eine Menge von Tasten mit gleichen Eigenschaften wie Radius, ausgewählte Farbe usw. Sie Ihre geerbt Schaltfläche anpassen können diese zusätzliche Eigenschaften zu behandeln.

Ergebnis (kein Hintergrund-Selektor verwendet wurde).

Normal Taste

gedrückte Taste

Answer 17

So wie ich eine andere gestylten Taste tun, die ganz gut funktioniert, ist das Button-Objekt, Unterklasse und einen Farbfilter anwenden. Dies hat auch Griffe aktiviert und deaktiviert Zustände durch eine Alpha auf die Schaltfläche Anwendung.

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.Button;

public class DimmableButton extends Button {

    public DimmableButton(Context context) {
        super(context);
    }

    public DimmableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void setBackgroundDrawable(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackgroundDrawable(layer);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void setBackground(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackground(layer);
    }

    /**
     * The stateful LayerDrawable used by this button.
     */
    protected class DimmableButtonBackgroundDrawable extends LayerDrawable {

        // The color filter to apply when the button is pressed
        protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
        // Alpha value when the button is disabled
        protected int _disabledAlpha = 100;
        // Alpha value when the button is enabled
        protected int _fullAlpha = 255;

        public DimmableButtonBackgroundDrawable(Drawable d) {
            super(new Drawable[] { d });
        }

        @Override
        protected boolean onStateChange(int[] states) {
            boolean enabled = false;
            boolean pressed = false;

            for (int state : states) {
                if (state == android.R.attr.state_enabled)
                    enabled = true;
                else if (state == android.R.attr.state_pressed)
                    pressed = true;
            }

            mutate();
            if (enabled && pressed) {
                setColorFilter(_pressedFilter);
            } else if (!enabled) {
                setColorFilter(null);
                setAlpha(_disabledAlpha);
            } else {
                setColorFilter(null);
                setAlpha(_fullAlpha);
            }

            invalidateSelf();

            return super.onStateChange(states);
        }

        @Override
        public boolean isStateful() {
            return true;
        }
    }

}

Answer 18

Werte \ styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="RedAccentButton" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">#ff0000</item>
</style>

dann:

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

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text" />

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

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text"
    android:theme="@style/RedAccentButton" />

Answer 19

Pro Material Design-Richtlinien, müssen Sie den Stil verwenden, wie     Code unten

<style name="MyButton" parent="Theme.AppCompat.Light>
    <item name="colorControlHighlight">#F36F21</item>
    <item name="colorControlHighlight">#FF8D00</item>
</style>

und in Layout hinzufügen, um dieses Eigentum auf Ihre Taste

    android:theme="@style/MyButton"

Answer 20

Die einfache .. diese Abhängigkeit in Ihrem Projekt hinzufügen und erstellen Sie eine Schaltfläche mit 1. Jede Form 2. Jede Farbe 3. Jede Grenze 4. Mit wesentlichen Auswirkungen

https://github.com/manojbhadane/QButton

<com.manojbhadane.QButton
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="OK"
       app:qb_backgroundColor="@color/green"
       app:qb_radius="100"
       app:qb_strokeColor="@color/darkGreen"
       app:qb_strokeWidth="5" />