Estilos de botones de diseño de material de Android

308

Estoy confundido sobre los estilos de botones para el diseño de materiales. Me gustaría obtener botones con relieve coloridos como en el enlace adjunto, como los botones "forzar detención" y "desinstalar" que se ven en la sección de uso. ¿Hay estilos disponibles o necesito definirlos?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

No pude encontrar los estilos de botón predeterminados.

Ejemplo:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

Si trato de cambiar el color de fondo del botón agregando

    android:background="@color/primary"

todos los estilos desaparecen, como la animación táctil, la sombra, la esquina redondeada, etc.

xsorifc28
fuente
I este Wii será más útil en el botón personalizado angrytools.com/android/button
Kharak

Respuestas:

750

Agregaré mi respuesta ya que no uso ninguna de las otras respuestas proporcionadas.

Con Support Library v7, todos los estilos ya están definidos y listos para usar, para los botones estándar, todos estos estilos están disponibles:

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

Widget.AppCompat.Button: ingrese la descripción de la imagen aquí

Widget.AppCompat.Button.Colored: ingrese la descripción de la imagen aquí

Widget.AppCompat.Button.Borderless ingrese la descripción de la imagen aquí

Widget.AppCompat.Button.Borderless.Colored: ingrese la descripción de la imagen aquí


Para responder a la pregunta, el estilo a usar es

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

Cómo cambiar el color

Para toda la aplicación:

El atributo gestiona el color de todos los controles de la interfaz de usuario (no solo botones, sino también botones de acción flotantes, casillas de verificación, etc.) colorAccentcomo se explica aquí . Puede modificar este estilo y aplicar su propio color en la definición de su tema:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

Para un botón específico:

Si necesita cambiar el estilo de un botón específico, puede definir un nuevo estilo, heredando uno de los estilos principales descritos anteriormente. En el siguiente ejemplo, acabo de cambiar el fondo y los colores de fuente:

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

Entonces solo necesita aplicar este nuevo estilo en el botón con:

android:theme="@style/AppTheme.Button"

Para establecer un diseño de botón predeterminado en un diseño, agregue esta línea al tema styles.xml:

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

¿Dónde @style/btnestá el tema de tu botón? Esto establece el estilo del botón para todos los botones en un diseño con un tema específico

Yoann Hercouet
fuente
66
Creo que esta es la mejor manera de hacerlo a partir de ahora.
xsorifc28
55
¿Lo probaste en el dispositivo Kitkat?
maohieng
14
colorButtonNormalattr no funciona para mí en Android 4.1.2. No se puede establecer el color del botón (se android:backgroundrompe el estilo del material del botón).
Konstantin Konopko
2
@YoannHercouet, ¿en qué versión de Android hiciste estas imágenes? En mis Andro 4.1.2 y 4.4.2, los botones con style = ".. AppCompat.Button" no se muestran.
Grzegorz Dev
55
@konopko Si usted es como yo, que utilizó style=""en lugar de Android:theme=""cambiar a este último problema que se fija para mí
John Snow,
84

La solución más simple


Paso 1: use la última biblioteca de soporte

compile 'com.android.support:appcompat-v7:25.2.0'

Paso 2: use AppCompatActivity como su clase de actividad principal

public class MainActivity extends AppCompatActivity

Paso 3: use el espacio de nombres de la aplicación en su archivo XML de diseño

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Paso 4: use AppCompatButton en lugar de Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

ingrese la descripción de la imagen aquí

Ehtesham Hasan
fuente
77
No es necesario que especifique android.support.v7.widget.AppCompatButtonporque la herramienta de compilación la usa automáticamente cuando especificaButton
Marque el
2
habilitará / deshabilitará automáticamente el trabajo? o necesitamos especificar estilos nuevamente para ello?
Sundeep1501
Esto elimina la lista de estados en pre-lollipop para mí, lo que resulta en un botón sin ningún efecto de clic
Florian Walther
Parece funcionar en Android P, excepto que textColoranula el color del texto para el estado deshabilitado .
l33t
@ Sundeep1501 Al menos no cambió a gris Widget.MaterialComponents.Button.OutlinedButton.
Dr.jacky
66

Si te entiendo correctamente, quieres hacer algo como esto:
ingrese la descripción de la imagen aquí

En tal caso, debería ser suficiente para usar:

<item name="android:colorButtonNormal">#2196f3</item>

O para API menos de 21:

<item name="colorButtonNormal">#2196f3</item>

Además de usar Tutorial de tema material .

La variante animada está aquí .

AlexKorovyansky
fuente
1
@androiddeveloper empujado muestra a GitHub, lo central es aquí - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/... ,
AlexKorovyansky
Creo que tienes que usar la biblioteca de compatibilidad para versiones anteriores.
AlexKorovyansky
2
No lo hace, pero puede configurarlo en caso de que la API sea 21 o superior. He encontrado una manera, pero no sé cuál es la mejor manera de hacerlo.
Desarrollador de Android
44
¿Puedo tener múltiples colores con este enfoque? Parece que solo permite uno a la vez.
gerfmarquez
2
@gerfmarquez U necesita tk tener diferentes estilos para diferentes botones
KISHORE_ZE
39

Así es como obtuve lo que quería.

Primero, hice un botón (in styles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

La ondulación y el fondo para el botón, como dibujable primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Esto agregó el efecto dominó que estaba buscando.

xsorifc28
fuente
3
El radio de la esquina debe ser de 2dp para que coincida con los activos del marco. Además, translationZ no debe establecerse en XML y no es necesario anular la elevación predeterminada, minWidth, minHeight o margin.
alanv
El margen predeterminado se convierte en 0 cuando se aplica un estilo personalizado, por alguna razón las propiedades no se heredan.
xsorifc28
3
Ah, no me di cuenta de que te falta un estilo de padre. Debe agregar parent = "Widget.Material.Button" o simplemente omitir la creación de un estilo personalizado por completo y simplemente establecer el fondo en el botón.
alanv
Oh! No sabía que existía, no lo he encontrado en ninguna documentación. Probaré eso.
xsorifc28
Sin embargo, no estoy seguro de cómo debería hacerlo sin un estilo personalizado. ¿Podrías mostrarme un ejemplo?
xsorifc28
33

Con el lanzamiento estable de Android Material Components en noviembre de 2018, Google ha movido los componentes de material del espacio de nombres android.support.designa com.google.android.material.
La biblioteca de componentes de material es un reemplazo de la biblioteca de soporte de diseño de Android.

Agregue la dependencia a su build.gradle:

dependencies { implementation com.google.android.material:material:1.0.0 }

Luego agregue el MaterialButtona su diseño:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Puede consultar la documentación completa aquí y la API aquí .

Para cambiar el color de fondo tienes 2 opciones.

  1. Usando el backgroundTintatributo.

Algo como:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Será la mejor opción en mi opinión. Si desea anular algunos atributos del tema de un estilo predeterminado, puede usar un nuevo materialThemeOverlayatributo.

Algo como:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

La opción # 2 requiere el 'com.google.android.material:material:1.1.0'.

ingrese la descripción de la imagen aquíingrese la descripción de la imagen aquí

Biblioteca de soporte antigua:

Con la nueva Biblioteca de soporte 28.0.0 , la Biblioteca de diseño ahora contiene el MaterialButton.

Puede agregar este botón a nuestro archivo de diseño con:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Por defecto, esta clase usará el color de acento de su tema para el color de fondo lleno de botones junto con el blanco para el color de texto de los botones.

Puede personalizar el botón con estos atributos:

  • app:rippleColor: El color que se utilizará para el efecto de ondulación del botón
  • app:backgroundTint: Se utiliza para aplicar un tinte al fondo del botón. Si desea cambiar el color de fondo del botón, use este atributo en lugar del fondo.

  • app:strokeColor: El color que se utilizará para el trazo del botón

  • app:strokeWidth: El ancho que se utilizará para la pulsación del botón
  • app:cornerRadius: Se utiliza para definir el radio utilizado para las esquinas del botón.
Gabriele Mariotti
fuente
android.support.design.button.MaterialButton no parece compilar
IgorGanapolsky
3
@IgorGanapolsky Tienes razón. Acabo de actualizar la respuesta con la versión estable.
Gabriele Mariotti
20

Aquí hay una muestra que ayudará a aplicar el estilo del botón de manera consistente en su aplicación.

Aquí hay un tema de muestra que utilicé con los estilos específicos.

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

Así es como definí la forma y los efectos del botón dentro de la carpeta res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Las esquinas de 2dp deben ser consistentes con el tema Material

samkya
fuente
66
¿Compatible con versiones anteriores?
Skynet
Lo siento, llegué tarde en responder, sin embargo, no es compatible con versiones anteriores, ya que los temas se introdujeron bastante tarde.
samkya
18

Al lado android.support.design.button.MaterialButton( que mencionó Gabriele Mariotti ),

También hay otro Buttonwidget llamado com.google.android.material.button.MaterialButtonque tiene diferentes estilos y se extiende desde AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Lleno, elevado Button(predeterminado) :ingrese la descripción de la imagen aquí

style="@style/Widget.MaterialComponents.Button"

Lleno, sin levaduraButton :ingrese la descripción de la imagen aquí

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

TextoButton : ingrese la descripción de la imagen aquí

style="@style/Widget.MaterialComponents.Button.TextButton"

ÍconoButton : ingrese la descripción de la imagen aquí

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Un texto Buttoncon un icono ::ingrese la descripción de la imagen aquí


Leer: https://material.io/develop/android/components/material-button/

Una clase de conveniencia para crear un nuevo botón de Material.

Esta clase proporciona estilos de material actualizados para el botón en el constructor. El widget mostrará los estilos de material predeterminados correctos sin el uso de la bandera de estilo.

ʍѳђ ઽ ૯ ท
fuente
1
¿Sabes cómo puedes cambiar el color?
Daniel Gómez Rico el
1
app:backgroundTinty app:backgroundTintModede la documentación .
ʍѳђ ઽ ૯ ท
cómo están asignando el color del estado deshabilitado
Zaid Mirza
6

Probé muchas respuestas y libs de terceros, pero ninguna estaba manteniendo el borde y aumentó el efecto en pre-lollipop mientras tenía el efecto dominó en lollipop sin inconvenientes. Aquí está mi solución final que combina varias respuestas (el borde / en relieve no se representa bien en los gifs debido a la profundidad de color en escala de grises):

Chupete

ingrese la descripción de la imagen aquí

Pre-piruleta

ingrese la descripción de la imagen aquí

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

La actividad está en Crear

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });
Rémy DAVID
fuente
Estaba buscando un ejemplo completo, sorprendido de que no se haya votado más alto, gracias.
XMAN
4

1) Puede crear un botón de esquina redondeada definiendo xml dibujable y puede aumentar o disminuir el radio para aumentar o disminuir la redondez de la esquina del botón. Establezca este xml dibujable como fondo del botón.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

botón de esquina redondeada

2) Para cambiar la animación predeterminada de sombra y transición de sombra entre estados de botón, debe definir el selector y aplicarlo al botón usando la propiedad android: stateListAnimator. Para una referencia completa de personalización de botones: http://www.zoftino.com/android-button

Arnav Rao
fuente
1

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

xgc1986
fuente
1
La biblioteca produce un error: rippleColor has already been definedalgunos usuarios ya lo mencionaron en los 'problemas'
SagiLow
0

puede darle aviación a la vista agregándole eje z y puede tener sombra predeterminada. Esta característica se proporcionó en la vista previa L y estará disponible después de su lanzamiento. Por ahora, simplemente puede agregar una imagen que le da este aspecto para el fondo del botón

Suhail Mehta
fuente
Veo. Tengo que hacerlo manualmente entonces. ¿Cómo haría para agregar el efecto de toque radial? ¿Solo un efecto de transición para el botón?
xsorifc28