Botón estándar de Android con un color diferente
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 Button
elemento 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?
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.xml
y 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>
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.
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.
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.AppCompat
o tu mainAppTheme
como padre, para mantener el resto de tus estilos.
2) Añade estas dos líneas a tu button
widget:
style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"
A veces, lo nuevo
colorAccent
no 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" />
Ahora también puedes usar AppCompatButton de appcompat-v7 con el backgroundTint
atributo:
<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"/>