studio - Botones de diseño de material Android-Pre lollipop

round button material design

Question

¿Cómo implemento el "botón elevado" y el "botón plano" como se describe en las pautas de diseño de materiales de google?

Los botones elevados añaden dimensión a los diseños en su mayoría planos. Destacan> funciones en espacios ocupados o amplios.

Use botones planos para barras de herramientas y diálogos para evitar capas excesivas.

Fuente: http://www.google.com/design/spec/components/buttons.html

Answer 1

Es posible que también necesite agregar un margen inferior a su botón, para poder ver el efecto de sombra del botón resaltado:

<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item>
<item name="android:elevation">1dp</item>

Answer 2

Estoy trabajando en una biblioteca de compatibilidad de materiales. La clase de botón está allí y admite sombras animadas y la ondulación táctil. Tal vez lo encuentres útil. Aquí está el link .

Answer 3

Lo uso como fondo para un botón con AppCompat y representa un botón elevado (con ondulaciones n todas), espero que ayude.

myRaisedButton.xml - dentro de la carpeta dibujable :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <solid android:color="@color/yourColor"/>
            <corners android:radius="6dp"/>
        </shape>
    </item>
    <item android:drawable="?android:selectableItemBackground"/>
</layer-list>

styles.xml :

<resources>

    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat">

</resources>

styles.xml (v21) :

...
<style name="AppTheme" parent="AppTheme.Base">

layout.xml :

...
android:background="@drawable/myRaisedButton"

Answer 4

Para implementar los botones planos, puede agregar style="?android:attr/borderlessButtonStyle" .

Ejemplo:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
    />

Aquí está la referencia para el atributo.

Answer 5

Para una descripción de cómo hacer esto usando la biblioteca de appcompat, verifique mi respuesta a otra pregunta: https://.com/a/27696134/1932522

Esto mostrará cómo utilizar los botones elevados y planos tanto para Android 5.0 como antes (¡hasta API nivel 11)!

Answer 6

Puede usar MaterialDesignLibrary . Es una biblioteca de terceros.

Esta es una biblioteca con componentes de Android L para usar en Android 2.2. Si desea utilizar esta biblioteca, solo tiene que descargar el proyecto de MaterialDesign, importarlo en su espacio de trabajo y agregar el proyecto como una biblioteca en la configuración de su proyecto de Android.

Answer 7

Usted solicitó los botones de diseño de materiales Biblioteca - lo consiguió - MaterialDesignLibrary

Answer 8

Esto requiere Android 5.0

Botón elevado

Hereda el estilo de tu botón desde Widget.Material.Button, y la acción estándar de elevación y elevación se aplicará automáticamente.

<style name="Your.Button" parent="android:style/Widget.Material.Button">
    <item name="android:background">@drawable/raised_button_background</item>
</style>

Luego debe crear un archivo raised_button_background.xml con el color de fondo de su botón dentro de una etiqueta ripple:

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

Botón plano

Editar: En lugar de mis consejos previos para botones planos, en su lugar debes usar seguir los consejos dados por Stephen Kaiser a continuación:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
/>

Editar: si está utilizando la Biblioteca de soporte, puede lograr el mismo resultado en dispositivos Pre-Lollipop utilizando style="?attr/borderlessButtonStyle" . (observe la ausencia de android: El ejemplo anterior se convierte en

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?attr/borderlessButtonStyle"
/>