Bouton Android standard avec une couleur différente

J'aimerais changer légèrement la couleur d'un bouton Android standard afin de mieux correspondre à la marque d'un client.

Le meilleur moyen que j'ai trouvé pour le faire jusqu'à présent est de changer le Buttondessinable du en dessinable situé dans 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>

Mais cela nécessite que je crée en fait trois dessins différents pour chaque bouton que je souhaite personnaliser (un pour le bouton au repos, un lorsqu'il est concentré et un lorsqu'il est enfoncé). Cela semble plus compliqué et non SEC que je n'en ai besoin.

Tout ce que je veux vraiment faire, c'est appliquer une sorte de transformation de couleur au bouton. Existe-t-il un moyen plus simple de changer la couleur d'un bouton que je ne le fais?

J'ai découvert que tout cela peut être fait assez facilement dans un seul fichier. Placez quelque chose comme le code suivant dans un fichier nommé custom_button.xml, puis définissez-le background="@drawable/custom_button"dans la vue de votre bouton:

<?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>

À la suite de la réponse de Tomasz, vous pouvez également définir par programme l'ombre de l'ensemble du bouton en utilisant le mode multiplicateur PorterDuff. Cela changera la couleur du bouton plutôt que juste la teinte.

Si vous commencez avec un bouton ombré gris standard:

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

vous donnera un bouton ombré rouge,

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

vous donnera un bouton ombré vert, etc., où la première valeur est la couleur au format hexadécimal.

Cela fonctionne en multipliant la valeur de couleur actuelle du bouton par votre valeur de couleur. Je suis sûr que vous pouvez faire beaucoup plus avec ces modes.

Mike, vous pourriez être intéressé par les filtres de couleur.

Un exemple:

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

essayez ceci pour obtenir la couleur désirée.

C'est ma solution qui fonctionne parfaitement à partir de l'API 15 . Cette solution conserve tous les effets de clic de bouton par défaut, comme le matériau RippleEffect. Je ne l'ai pas testé sur des API inférieures, mais cela devrait fonctionner.

Il vous suffit de:

1) Créez un style qui ne change que colorAccent:

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

Je recommande d'utiliser ThemeOverlay.AppCompatou votre principal AppThemecomme parent, pour garder le reste de vos styles.

2) Ajoutez ces deux lignes à votre buttonwidget:

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

Parfois, votre nouveau colorAccentn'est pas affiché dans Android Studio Preview, mais lorsque vous lancez votre application sur le téléphone, la couleur sera modifiée.

Exemple de widget de bouton

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

Vous pouvez maintenant utiliser de appcompat-v7 AppCompatButton avec l' backgroundTintattribut:

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

J'aime la suggestion de filtre de couleur dans les réponses précédentes de @conjugatedirection et @Tomasz; Cependant, j'ai trouvé que le code fourni jusqu'à présent n'était pas aussi facile à appliquer que prévu.

Tout d'abord, il n'a pas été indiqué où appliquer et effacer le filtre de couleur. Il est possible qu'il existe d'autres bons endroits pour le faire, mais ce qui m'est venu à l'esprit était un OnTouchListener .

D'après ma lecture de la question d'origine, la solution idéale serait celle qui n'implique aucune image. La réponse acceptée en utilisant custom_button.xml de @emmby est probablement mieux adaptée que les filtres de couleur si c'est votre objectif. Dans mon cas, je commence par une image png d'un concepteur d'interface utilisateur de ce à quoi le bouton est censé ressembler. Si je définit l'arrière-plan du bouton sur cette image, le retour de surbrillance par défaut est complètement perdu. Ce code remplace ce comportement par un effet d'obscurcissement programmatique.

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();
    }
});

J'ai extrait ceci en tant que classe distincte pour une application à plusieurs boutons - montré comme classe interne anonyme juste pour avoir l'idée.

Si vous créez des boutons de couleur avec XML, vous pouvez rendre le code un peu plus propre en spécifiant l'état focalisé et enfoncé dans un fichier séparé et les réutiliser. Mon bouton vert ressemble à ceci:

<?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>

La solution la plus courte qui fonctionne avec n'importe quelle version d'Android:

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

Notes / Exigences :

• Utilisez l' app:espace de noms et non l' android:espace de noms!

• version compatible avec l'application> 24.2.0

  dépendances {compiler 'com.android.support:appcompat-v7:25.3.1'}

Explication :

J'utilise cette approche

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>

Comme vous pouvez le voir ci-dessus, j'utilise un style personnalisé pour mon bouton. La couleur du bouton correspond à la couleur d'accent. Je trouve que c'est une bien meilleure approche que la configuration, android:backgroundcar je ne perdrai pas l'effet d'entraînement que Google fournit.

Il existe maintenant un moyen beaucoup plus simple: android-holo-colors.com

Il vous permettra de changer facilement les couleurs de tous les holo drawables (boutons, filateurs, ...). Vous sélectionnez la couleur, puis téléchargez un fichier zip contenant des dessins pour toutes les résolutions.

Utilisez-le de cette façon:

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

En cours d' <Button>utilisation android:background="#33b5e5". ou mieuxandroid:background="@color/navig_button"

La bibliothèque de composants DroidUX dispose d'un ColorButtonwidget dont la couleur peut être modifiée facilement, à la fois via la définition xml et par programme au moment de l'exécution, de sorte que vous pouvez même laisser l'utilisateur définir la couleur / le thème du bouton si votre application le permet.

Vous pouvez également utiliser cet outil en ligne pour personnaliser votre bouton http://angrytools.com/android/button/ et l'utiliser android:background="@drawable/custom_btn"pour définir le bouton personnalisé dans votre mise en page.

Vous pouvez définir le thème de votre bouton sur ce

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

Un moyen simple consiste à simplement définir une classe Button personnalisée qui accepte toutes les propriétés que vous souhaitez comme le rayon, le dégradé, la couleur pressée, la couleur normale, etc. Un échantillon est ici

Ceci est extrêmement utile si vous avez beaucoup de boutons avec les mêmes propriétés comme le rayon, la couleur sélectionnée, etc. Vous pouvez personnaliser votre bouton hérité pour gérer ces propriétés supplémentaires.

Résultat (aucun sélecteur d'arrière-plan n'a été utilisé).

Bouton Normal

Bouton enfoncé

La façon dont je fais un bouton de style différent qui fonctionne assez bien est de sous-classer l'objet Button et d'appliquer un filtre de couleur. Cela gère également les états activés et désactivés en appliquant un alpha au bouton.

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;
        }
    }

}

values ​​\ 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>

puis:

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

Selon les directives de conception des matériaux, vous devez utiliser le style comme le code ci-dessous

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

et dans la mise en page, ajoutez cette propriété à votre bouton

    android:theme="@style/MyButton"

C'est simple .. ajoutez cette dépendance dans votre projet et créez un bouton avec 1. N'importe quelle forme 2. N'importe quelle couleur 3. N'importe quelle bordure 4. Avec des effets de matière

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