Colorear botones en Android con diseño de materiales y AppCompat


256

Antes de que AppCompatsaliera la actualización hoy, pude cambiar el color de los botones en Android L pero no en versiones anteriores. Después de incluir la nueva actualización de AppCompat, no puedo cambiar el color de ninguna de las versiones, cuando lo intento, el botón simplemente desaparece. ¿Alguien sabe cómo cambiar el color del botón?

Las siguientes imágenes muestran lo que quiero lograr:

imagen que muestra el resultado deseado

El botón blanco es el predeterminado, el rojo es lo que quiero.

Esto es lo que estaba haciendo anteriormente para cambiar el color de los botones en styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

y hacerlo dinámicamente:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

También cambié el tema padre de @android:style/Theme.Material.Light.DarkActionBaraTheme.AppCompat.Light.DarkActionBar


Intenté lo mismo pero nada cambió el color del botón. También eliminé Android: del atributo porque es de la biblioteca de soporte y no forma parte del espacio de nombres de Android
Informatic0re

Si está utilizando Android: colorButtonNormal con Android 5.0 funciona, pero parece que no es compatible con versiones anteriores
Informatic0re

Sí, eso es exactamente lo que estaba experimentando
mail929

También descubrí que el color de acento no cambia el color de CheckBox, pero lo hace en versiones anteriores
Informatic0re

más uno para ese método dinámico. :)
theapache64

Respuestas:


222

Corregido oficialmente en Support Library rev.22 (viernes 13 de marzo de 2015). Ver problema relevante del código de google:

https://issuetracker.google.com/issues/37008632

Ejemplo de uso

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

v21 / theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

17
¿Hay algún ejemplo de cómo usarlo? ¿Cómo puedo configurar los colores en un solo botón?
Intrications

3
@WindRider Tengo un problema, sin embargo, quiero usarlo para crear botones con diferentes colores. Creo estilos Button.Red, Button.Green, todos con padre es igual al estilo base de Button. Establecí el elemento colorButtonNormal en el color solicitado, configuré esto como tema de botón. Desafortunadamente, solo colorea los botones para 21. A continuación, no anula el colorButtonNormal definido en el tema.
dominik4142

71
Con AppCompat 22.1.1 también funciona para mí en 2.3.7, 4.4.4 y 5.1 solo para un botón: configuración de botones android:theme="@style/ColoredButton"y en styles.xml <style name="ColoredButton" parent="Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/button_yellow</item> </style>
hunyadym

2
@hunyadym, agregar un tema al botón se rompe en Haga clic por alguna razón. Clasificaría esto como una solución alternativa hasta que la biblioteca de Diseño proporcione una mejor manera.
Claro

3
@gladed: Parece que en su caso el problema es este error: code.google.com/p/android/issues/detail?id=62795#c1
hunyadym

148

Editar (22.06.2016):

La biblioteca de Appcompat comenzó a admitir botones de material después de que publiqué la respuesta original. En esta publicación puede ver la implementación más fácil de botones planos y elevados.

Respuesta original

Dado que AppCompat aún no admite el botón, puede usar xml como fondo. Para hacerlo, eché un vistazo al código fuente de Android y encontré los archivos relacionados para los botones de material de estilo.

1 - Mira la implementación original del botón de material desde la fuente.

Eche un vistazo a btn_default_material.xml en el código fuente de Android .

Puede copiar el archivo en la carpeta drawable-v21 de su proyecto. Pero no toques el color attr aquí. El archivo que necesita cambiar es el segundo archivo.

drawable-v21 / custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2 - Obtenga la forma del botón de material original

Como se da cuenta, hay una forma utilizada dentro de este dibujo que puede encontrar en este archivo del código fuente .

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3 - Obtener dimensiones del botón de material

Y en este archivo hay algunas dimensiones utilizadas del archivo que puede encontrar aquí . Puede copiar todo el archivo y ponerlo en su carpeta de valores . Esto es importante para aplicar el mismo tamaño (que se usa en los botones de material) a todos los botones

4 - Crear otro archivo dibujable para versiones anteriores

Para versiones anteriores, debe tener otro dibujable con el mismo nombre. Estoy poniendo directamente los elementos en línea en lugar de hacer referencia. Es posible que desee hacer referencia a ellos. Pero, de nuevo, lo más importante son las dimensiones originales del botón de material.

drawable / custom_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

Resultado

Su botón tendrá un efecto dominó en los dispositivos Lollipop. Las versiones anteriores tendrán exactamente el mismo botón, excepto el efecto dominó. Pero dado que proporciona elementos extraíbles para diferentes estados, también responderán a eventos táctiles (como en la forma anterior).


44
Sí exactamente. Si usa el mismo fondo para todos los botones y no desea agregar esto una y otra vez, defina un estilo de botón en su styles.xml <style name = "ButtonStyle" parent = "android: Widget.Button"> < item name = "android: background"> ​​@ drawable / custom_btn </item> </style> y agregue un estilo de botón en su tema <item name = "android: buttonStyle"> @ style / ButtonStyle </item>
eluleci

1
¿Cómo puedo agregar elevación a este botón en pre-21? Según tengo entendido, debería agregar una nueva forma con la sombra debajo del botón, pero ¿dónde exactamente debería ponerla?
xakz

77
Muy molesto que esto no sea compatible de fábrica
Sam

39
Estoy totalmente de acuerdo contigo. El botón es el widget más utilizado, pero no está incluido en la biblioteca de soporte para material. Me pregunto qué estaban pensando.
eluleci

1
Además, siguiendo su guía, parece que el fondo no se muestra en absoluto ...
JMRboosties

111

Esto se ha mejorado en v23.0.0 de la biblioteca AppCompat con la adición de más temas, incluidos

Widget.AppCompat.Button.Colored

En primer lugar, incluya la dependencia de appCompat si aún no lo ha hecho

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

ahora ya que necesita usar v23 de la aplicación compatible, ¡también tendrá que apuntar a SDK-v23!

    compileSdkVersion = 23
    targetSdkVersion = 23

En tus values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

En tus values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

En tus values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

Dado que el tema de su botón se basa en Widget.AppCompat.Button.Colored El color del texto en el botón es por defecto blanco!

pero parece que hay un problema cuando deshabilita el botón, el botón cambiará su color a gris claro, ¡pero el color del texto seguirá siendo blanco!

¡Una solución para esto es establecer específicamente el color del texto en el botón en blanco! como lo hice en el estilo que se muestra arriba.

ahora puede simplemente definir su botón y dejar que AppCompat haga el resto :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Estado discapacitado Estado desactivado

Estado habilitado Estado habilitado

Editar:

Para agregar <Button android:theme="@style/BrandButtonStyle"/>


19
¡Esa es la mejor manera de hacerlo, ahora! También puede usar el estilo en botones individuales con <Button android:theme="@style/BrandButtonStyle"/>. Tiene que ser el themeatributo y no el styleatributo.
mohlendo

77
@Muhammad Alfaifi ¿Tiene un proyecto de muestra o una idea general para esto? He creado un proyecto limpio y no funciona: github.com/Bresiu/ThemeTest . En los colores del botón Lolipop con color de acento y en API v16, el botón permanece gris: i.imgur.com/EVwkpk2.png
Bresiu

44
Esto solo funcionó cuando especifiqué el atributo android: theme. No pude conseguir que el estilo de atributo funcionara para mí con la etiqueta del botón.
Ray Hunter

8
Usando v23.1 lib, esto no funcionaba correctamente, siempre mostraba el color de acento como bg, no el definido, cuando intentaba configurarlo para todo el tema
Patrick Favre

3
El mismo problema aquí, en v23.1, el botón deshabilitado es del mismo color que el botón habilitado. Muy frustrante. Alguien resolver esto?
AhmedW

63

En la Biblioteca de soporte de Android 22.1.0, Google notó el Buttontinte. Entonces, otra forma de personalizar el color de fondo del botón es usar elbackgroundTint atributo.

Por ejemplo,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

1
¡Finalmente! Publicación de
GuillermoMP

55
La documentación dice: "Esto se usará automáticamente cuando use Button en sus diseños. Solo debería usar esta clase manualmente al escribir vistas personalizadas". developer.android.com/reference/android/support/v7/widget/… ¿esto significa que no tenemos que cambiar manualmente todos nuestros diseños y código java?
Stephane

@Stephane no, deberíamos cambiar los diseños. chris.banes.me/2015/04/22/support-libraries-v22-1-0
Anton Holovin

¡INCREÍBLE! Ahora, ¿hay un AppCompatToggleButton que te permita cambiar el fondo de ToggleButtons? Tal vez pueda plagiar el código ...
swooby

19
Desafortunadamente, esto solo funciona en API 21+. El atributo android: backgroundTint no funciona en pre-Lollipop incluso con la biblioteca AppCompat. Solo colorButtonNormal del tema funciona en pre-Lollipop.
Timur_C

42

Para admitir botones de colores, use la última biblioteca de AppCompat (> 23.2.1 ) con:

inflar - XML

AppCompat Widget:

android.support.v7.widget.AppCompatButton

AppCompat Style:

style="@style/Widget.AppCompat.Button.Colored"

¡NÓTESE BIEN! Para establecer un color personalizado en xml: use attr: en applugar deandroid

(usar alt+entero declarar xmlns:app="http://schemas.android.com/apk/res-auto"usar app)

aplicación : backgroundTint = "@ color / your_custom_color"

Ejemplo:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

o configurarlo mediante programación - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

Tu código Java funcionó para mí. Y la respuesta de Muhammad Alfaifi ayudó a establecer el color del texto del botón.
Micro

¿Hay alguna manera fácil de configurar mediante programación el tinte (no el fondo)?
bóveda

¡Maravilloso! Funciona en 4.4.4 también! ¡Y el estado del selector también se mantiene bastante bien!
sud007

Según los documentos : esto se usa automáticamente al configurar botones en sus diseños. Solo necesita especificar AppCompatButton al crear vistas personalizadas.
gMale

Curiosamente, los cambios XML funcionaron perfectamente en un fragmento pero no en un diseño de Actividad. Los botones de Actividad solo usaban colorAccent. Sin embargo, la versión programática funcionó.
Leon

25

Con la última Biblioteca de soporte, podría heredar su actividad AppCompatActivity, por lo que se inflará Buttoncomo AppCompatButtony le dará la oportunidad de diseñar el color de cada botón en el diseño con el uso de android:theme="@style/SomeButtonStyle", donde SomeButtonStyleestá:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

Trabajó para mí en 2.3.7, 4.4.1, 5.0.2


¡¡¡Gracias!!! Acabo de cambiar el valor principal para "Widget.AppCompat.EditText", ya que necesito actualizar el estilo EditText.
Juan Saravia

3
Gracias, trabajó para mí también. Asegúrese de usar android:themey no style. También puedes agregar colorControlHighlighty colorControlActivated.
Rachel

no funciona, API 22, AppCompatActivity, tema Material.Light
Andrey Uglev

1
@AndreyUglev intenta usar Theme.AppCompat.Lighten su lugar.
Artem

Hola, cambia el color deseado PERO elimina las sombras.
Amio.io

16

si quieres debajo del estilo

ingrese la descripción de la imagen aquí

agrega este estilo a tu botón

style="@style/Widget.AppCompat.Button.Borderless.Colored"

si quieres este estilo

ingrese la descripción de la imagen aquí

agregue el siguiente código

style="@style/Widget.AppCompat.Button.Colored"

1
compile 'com.android.support:appcompat-v7:23.1.0'Debes tener que agregar.
Pratik Butani

1
pero la pregunta es cómo tener botones de material con diferentes colores, para que no todos tengan el color primario del tema.
Apostrofix

15

La respuesta está en TEMA, no en estilo.

El problema es que el color del botón se adhiere al colorButtonNormal del tema. He tratado de cambiar el estilo de muchas maneras diferentes sin suerte. Así que cambié el tema del botón .

Cree un tema con colorButtonNormal y colorPrimary:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

Usa este tema en el botón

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

El "AppTheme.Button" puede ser cualquier cosa que extienda el estilo del botón como aquí. Uso el color primario para el color del texto:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

Y obtienes el botón en cualquier color que quieras que sea compatible con el diseño del material.


¿Cuáles son otros atributos que puedo agregar a los estilos?
Sagar Nayak

4

Acabo de crear una biblioteca de Android, que le permite modificar fácilmente el color del botón y el color ondulado

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

No necesita crear un estilo para cada botón que desee con un color diferente, lo que le permite personalizar los colores al azar


4

esto funciona para mí con appcompat-v7: 22.2.0 en android + 4.0

en tu styles.xml

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

en su archivo de diseño

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

Hola, cambia el color deseado PERO elimina las sombras.
Amio.io

Hola de nuevo, puedo ver. Es un comportamiento adecuado ahora.
Amio.io

¿Cómo puedes hacer esto en Java?
Micro

@MicroR verifica la respuesta anterior.
ingyesid

4

Diseño:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color / button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

color / button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

3

Para aquellos que usan un ImageButtonaquí, así es como lo haces:

En style.xml:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

en v21 / style.xml:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

Luego, en su archivo de diseño:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

Esto ayudó ... Supongo que es importante tener en cuenta aplicar el estilo del botón como tema en lugar de un estilo en el widget Botón. Lo estaba aplicando en style = "@ style / BlueImageButton" y no funcionó
velval

3

Si usa una solución de estilo con colorButtonNormal , no olvide heredar de Widget.AppCompat.Button.Colored para que el efecto dominó funcione;)

Me gusta

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

2

Otra solución simple usando el AppCompatButton

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />

2

Utilizar:

android:backgroundTint="@color/customColor"

O incluso :

android:background="@color/customColor"

y eso le dará un color personalizado al botón.


1

Si solo desea el botón de material "Plano", puede personalizar su fondo usando el atributo selectableItemBackground como se explica aquí .


Si no desea cambiar ninguno de los colores de "tinte" o colores seleccionados, esta es definitivamente una solución fácil para obtener comentarios con botones de colores. ¡Gracias!
theblang

1

Para cambiar el color de un solo botón

ViewCompat.setBackgroundTintList(button, getResources().getColorStateList(R.color.colorId));

1

Para mí, el problema era que en Android 5.0 android:colorButtonNormalno tenía ningún efecto, y en realidad, ningún elemento del tema (como android:colorAccent), pero en Android 4.4.3, por ejemplo, sí. El proyecto se configuró con compileSdkVersiony targetSdkVersionpara 22, así que hice todos los cambios como @Muhammad Alfaifi sugirió, pero al final, me di cuenta de que el problema era buildToolsVersion , que no se actualizó. Una vez que cambié a 23.0.1 , todo comenzó a funcionar casi de manera normal. Ahora, el android:colorButtonNormaltodavía no tiene efecto, pero al menos el botón reacciona aandroid:colorAccent , lo que para mí es aceptable.

Espero que esta pista pueda ayudar a alguien. Nota: He aplicado el estilo directamente al botón, ya que el botón android:theme=[...]tampoco tuvo efecto.


Casi encuentra la manera 100% correcta de cómo usar new @ style / Widget.AppCompat.Button.Colored;) - vea esta respuesta stackoverflow.com/a/35811157/19733911
sosite

1

Una forma de lograr esto le permite señalar un estilo y NO tema TODOS los botones de su aplicación de la misma manera.
En themes.xml agrega un tema

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

Ahora en styles.xml agregar

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

Ahora en su diseño, simplemente apunte al ESTILO en su Botón

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

1

ACTUALIZAR

Use la biblioteca de soporte de diseño (23.2.0) y los widgets compactos de aplicaciones como se muestra a continuación

En la Biblioteca de soporte de Android 22.1 :

Esto se hace automáticamente al inflar diseños, reemplazando Button con AppCompatButton, TextView con AppCompatTextView, etc. para asegurarse de que cada uno pueda admitir tintado. En esta versión, esos widgets con reconocimiento de tinte ahora están disponibles públicamente, lo que le permite mantener el soporte de tinte incluso si necesita subclasificar uno de los widgets compatibles.

La lista completa de widgets con tinte:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

Diseño de materiales para dispositivos pre-piruletas :

AppCompat (también conocido como ActionBarCompat) comenzó como un backport de la API de Android 4.0 ActionBar para dispositivos que se ejecutan en Gingerbread, proporcionando una capa API común en la parte superior de la implementación backportada y la implementación del marco. AppCompat v21 ofrece una API y un conjunto de características que está actualizado con Android 5.0



1

Si desea utilizar el estilo AppCompat como Widget.AppCompat.Button , Base.Widget.AppCompat.Button.Colored , etc., debe usar estos estilos con vistas compatibles de la biblioteca de soporte.

El siguiente código no funciona para dispositivos pre-lolipop:

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

Debe usar AppCompatButton para habilitar los estilos de AppCompat:

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

2
¿No se utilizan automáticamente los widgets de compatibilidad de aplicaciones al inflar diseños XML? Creo que ImageViewse reemplaza AppCompatImageViewy debería ser lo mismo con todos los widgets, que tienen la AppCompatversión correspondiente .
d.aemon

No, si no tiene como objetivo la última versión de destino, debe definirla android.support.v7.widget.AppCompatImageViewexplícitamente.
farukcankaya

¿Qué quieres decir con last target version@power?
d.aemon

1

Yo uso esto. Efecto ondulación y botón de sombra de trabajo.

style.xml

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>

Botón en el diseño:

<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

0

En realidad, no quería un cambio en mis estilos de botones personalizados, pero desafortunadamente ya no funcionaban.

Mi aplicación tiene una minSdkVersion de 9 y todo funcionó antes.

No sé por qué, pero desde que eliminé el Android: antes del buttonStyle parece funcionar nuevamente

ahora = trabajando:

<item name="buttonStyle">@style/ButtonmyTime</item>

antes = solo botones de material gris:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

No tengo una carpeta especial para la nueva versión de Android ya que mis botones son bastante planos y deberían verse igual en todas las versiones de Android.

Tal vez alguien pueda decirme por qué tuve que eliminar "android:". ImageButton todavía funciona con "android:"

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

0

Después de 2 días buscando respuestas, el tema de botones no funcionó para mí en API <21.

Mi única solución es anular el tinte AppCompatButton no solo con el tema básico de la aplicación "colorButtonNormal" sino también con el fondo de la vista.

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

Luego puede definir el color de su botón de esta manera:

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

0

Esta respuesta SO me ayudó a llegar a una respuesta https://stackoverflow.com/a/30277424/3075340

Utilizo este método de utilidad para configurar el tono de fondo de un botón. Funciona con dispositivos pre-lollipop:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

Cómo usar en código:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

De esta manera, no tiene que especificar una ColorStateList si solo desea cambiar el tono del fondo y nada más que mantener los bonitos efectos de los botones y demás.


0

Me puse android:textColora @nullmi botón de tema y me ayuda.

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

Ahora el color del texto del botón se colorAccentdefine enAppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

0

si usa kotlin, ¿puede ver que todos los atributos de MaterialButton son compatibles? No use el atributo android: background. MaterialButton gestiona su propio fondo dibujable, y establecer un nuevo fondo significa que el color desactivado del botón Material ya no puede garantizar que los nuevos atributos que introduce funcionarán correctamente. Si se cambia el fondo predeterminado, el botón Material no puede garantizar un comportamiento bien definido. En MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        buttonClick.setOnClickListener {
            (it as MaterialButton).apply {
                backgroundTintList = ColorStateList.valueOf(Color.YELLOW)
                backgroundTintMode = PorterDuff.Mode.SRC_ATOP
            }
        }
    }
}

En activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Material Button Normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:text="Material Button Background Red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonNormal" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTintMode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:backgroundTintMode="multiply"
        android:text="Tint Red + Mode Multiply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTint" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Click To Change Background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTintMode" />
</androidx.constraintlayout.widget.ConstraintLayout>

recurso: ejemplo de color de cambio de botón de material


0

si desea hacer esto mediante un código en cualquier color, use esto:

DrawableCompat.setTintList(button.getBackground(), ColorStateList.valueOf(yourColor));
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.