752 votes

Android Standard Bouton avec une couleur différente

J'aimerais changer la couleur d'un standard Android bouton légèrement afin de mieux correspondre à un client de la marque. Voir, par exemple, pour Trouver une Table" pour le OpenTable application:

alt text

Le meilleur moyen que j'ai trouvé pour ce faire jusqu'à présent est de changer l' Buttons'drawable à la suite de drawable situé en 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 me créer trois un drawable pour chaque bouton que je veux personnaliser (un pour le bouton au repos, quand un concentré, et une fois pressé). Cela semble plus compliqué et SEC que j'ai besoin.

Tout ce que je veux vraiment faire, c'est faire une sorte de transformation de couleurs pour le bouton. Est-il un moyen plus facile d'aller sur la modification d'un bouton de couleur que je suis en train de faire?

740voto

emmby Points 35359

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

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

312voto

conjugatedirection Points 2134

A la suite de Tomasz réponse, vous pouvez également définir par programmation à l'ombre de l'intégralité du bouton à l'aide de la PorterDuff mode multiplier. Cela va changer le bouton de couleur plutôt que de simplement la teinte.

Si vous commencez avec un standard gris ombragé bouton:

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

vous donnera un ombragée rouge bouton,

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

vous donnera un vert sombre bouton etc., dans lequel la première valeur est la couleur au format hexadécimal.

Il fonctionne en multipliant le bouton de la valeur de la couleur couleur de la valeur. Je suis sûr qu'il y est aussi beaucoup plus que vous pouvez faire avec ces modes.

151voto

Tomasz Points 1817

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

Un exemple:

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

essayez ceci pour obtenir la couleur que vous voulez.

24voto

Stan Kurdziel Points 1603

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

Tout d'abord, il n'était pas mentionné à 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 pour moi a été une OnTouchListener.

De ma lecture de la question d'origine, la solution idéale serait celle qui ne comporte pas d'images. La accepté de répondre à l'aide de custom_button.xml @emmby est probablement un meilleur choix que les filtres de couleur si c'est votre but. Dans mon cas, je commence avec une image png à partir d'un concepteur d'INTERFACE utilisateur de ce que le bouton est censé ressembler. Si j'ai mis le bouton arrière-plan de cette image, le défaut de mettre en évidence la rétroaction est complètement perdu. Ce code remplace ce comportement avec des programmes effet d'obscurcissement.

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 comme une catégorie distincte pour l'application de plusieurs boutons sont affichés en tant qu'anonyme intérieure classe juste pour se faire une idée.

17voto

haemish Points 271

Si vous effectuez des boutons de couleur avec XML, vous pouvez rendre le code un peu plus propre en spécifiant le concentré et l'état enfoncé dans un fichier séparé et de 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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X