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


¿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. Ellos enfatizan>   funciones en espacios ocupados o amplios.

raised buttons


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

flat buttons

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


73
2017-11-07 15:43


origen


Respuestas:


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>

Entonces necesitas crear un raised_button_background.xml archivo 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 mediante el uso de 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"
/>

120
2017-11-07 21:34



Para implementar los botones planos, puedes 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.


84
2017-11-12 01:31



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


4
2018-01-23 11:31



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í esta la enlazar.


2
2018-01-03 18:59



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 drawable carpeta:

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

2
2017-11-09 22:18



Para obtener una descripción de cómo hacer esto usando la biblioteca appcompat, verifique mi respuesta a otra pregunta: https://stackoverflow.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)!


1
2017-12-30 17:54



Tú pediste botones de diseño de material Biblioteca - lo tienes - https://github.com/navasmdc/MaterialDesignLibrary


1
2018-01-15 10:43