studio - Estilos de botones de diseño de material Android

paleta de colores android studio

Question

Estoy confundido en los estilos de botones para el diseño de materiales. Me gustaría obtener botones coloridos levantados como en el enlace adjunto, como los botones "forzar parada" 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 botones 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 intento 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, las esquinas redondeadas, etc.

Answer 1

La solución más simple

Paso 1: Usa la última biblioteca de soporte

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

Paso 2: Usa AppCompatActivity como tu clase de actividad principal

public class MainActivity extends AppCompatActivity

Paso 3: Usa el espacio de nombres de la aplicación en tu 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"/>

Answer 2

1) Puede crear un botón de esquina redondeada definiendo xml drawable y puede aumentar o disminuir el radio para aumentar o disminuir la redondez de la esquina de botón. Establecer este dibujo xml como fondo de 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>

2) Para cambiar la animación predeterminada de transición de sombra y sombra entre los estados de los botones, 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

Answer 3

Acabo de crear una biblioteca de Android, que te permite modificar fácilmente el color del botón y el color de la onda.

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 es necesario crear un estilo para cada botón que desee con un color diferente, lo que le permite personalizar los colores al azar

Answer 4

Además de android.support.design.button.MaterialButton ( mencionado por Gabriele Mariotti ),

También hay otro widget de Button llamado com.google.android.material.button.MaterialButton que 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"

Button lleno, elevado (predeterminado) :

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

Button lleno, no levantado :

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

Button texto :

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

Button icono :

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

Un Button texto con un icono :

Lea: 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.

Answer 5

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

Con la biblioteca de soporte 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 :

Widget.AppCompat.Button.Colored :

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored :

Para responder a la pregunta, el estilo a utilizar es por lo tanto

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

Como cambiar el color.

Para toda la aplicación:

El atributo colorAccent administra el color de todos los controles de la IU (no solo los botones, sino también los botones de acción flotantes, las casillas de verificación, etc.) como se explica here . 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 los colores de fondo y 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 necesitas 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>

donde @style/btn es 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

Answer 6

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

Aquí hay una muestra de tema 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 de los botones 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 2dp son para mantenerlo consistente con el tema Material.

Answer 7

Así es como obtuve lo que quería.

Primero, hizo un botón (en 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 del botón, como 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 de onda que estaba buscando.

Answer 8

Con la nueva versión 28.0.0-alpha1 de la Biblioteca de soporte , la Biblioteca de diseño ahora contiene el Material Button .

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

De forma predeterminada, esta clase utilizará el color de acento de su tema para los colores de fondo rellenos de los botones, junto con el blanco para el color del texto de los botones.

Puedes 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 de fondo.

• app:strokeColor : el color que se utilizará para el botón pulsador

• app:strokeWidth : el ancho que se utilizará para el botón pulsado
• app:cornerRadius : se utiliza para definir el radio utilizado para las esquinas del botón

Answer 9

Intenté muchas respuestas y librerías de terceros, pero ninguna mantuvo el borde y aumentó el efecto en el pre-lollipop mientras tenía el efecto dominó en el lollipop sin inconveniente. Aquí está mi solución final combinando varias respuestas (el borde / levantado no está bien representado en gifs debido a la profundidad de color en escala de grises):

Pirulí

Pre-piruleta

construir.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>

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

Actividad de onCreate

 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;
}
});

Answer 10

Si te entiendo correctamente, quieres hacer algo como esto:

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 Material Theme Tutorial .

Variante animada está here .

Answer 11

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