Botón estándar de Android con un color diferente

Resuelto emmby asked hace 54 años • 20 respuestas

Me gustaría cambiar ligeramente el color de un botón estándar de Android para que coincida mejor con la marca del cliente.

La mejor manera que he encontrado para hacer esto hasta ahora es cambiar el Buttonelemento de diseño por el elemento de diseño ubicado 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>

Pero hacer eso requiere que realmente cree tres elementos de diseño diferentes para cada botón que quiero personalizar (uno para el botón en reposo, uno cuando está enfocado y otro cuando se presiona). Eso parece más complicado y no SECO de lo que necesito.

Todo lo que realmente quiero hacer es aplicar algún tipo de transformación de color al botón. ¿Existe una manera más fácil de cambiar el color de un botón que la que estoy haciendo?

emmby avatar Jan 01 '70 08:01 emmby
Aceptado

Descubrí que todo esto se puede hacer en un solo archivo con bastante facilidad. Coloque algo como el siguiente código en un archivo llamado custom_button.xmly luego configúrelo background="@drawable/custom_button"en la vista de su botón:

<?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>
emmby avatar Nov 13 '2009 00:11 emmby

Siguiendo con la respuesta de Tomasz, también puede configurar mediante programación el tono de todo el botón usando el modo de multiplicación de PorterDuff. Esto cambiará el color del botón en lugar de solo el tono.

Si comienza con un botón estándar sombreado en gris:

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

le dará un botón sombreado en rojo,

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

le dará un botón sombreado en verde, etc., donde el primer valor es el color en formato hexadecimal.

Funciona multiplicando el valor de color del botón actual por su valor de color. Estoy seguro de que también puedes hacer mucho más con estos modos.

conjugatedirection avatar Aug 15 '2010 01:08 conjugatedirection

Quizás te interesen los filtros de color.

Un ejemplo:

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

Pruebe esto para lograr el color que desea.

Tomasz avatar Aug 09 '2010 23:08 Tomasz

Esta es mi solución que funciona perfectamente a partir de API 15 . Esta solución mantiene todos los efectos de clic en los botones predeterminados, como el material RippleEffect. No lo he probado en API inferiores, pero debería funcionar.

Todo lo que necesitas hacer es:

1) Crea un estilo que solo cambie colorAccent:

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

Recomiendo usar ThemeOverlay.AppCompato tu main AppThemecomo padre, para mantener el resto de tus estilos.

2) Añade estas dos líneas a tu buttonwidget:

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

A veces, lo nuevo colorAccentno se muestra en Android Studio Preview, pero cuando inicias tu aplicación en el teléfono, el color cambiará.


Widget de botón de muestra

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

Botón de muestra con color personalizado

RediOne1 avatar Jul 19 '2016 20:07 RediOne1

Ahora también puedes usar AppCompatButton de appcompat-v7 con el backgroundTintatributo:

<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"/>
Nilhcem avatar Jan 16 '2016 20:01 Nilhcem