Botones de diseño de material de Android – Pre lollipop

6 minutos de lectura

avatar de usuario
rickyalberto

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

botones levantados


Utilice botones planos para las barras de herramientas y los cuadros de diálogo para evitar la superposición de capas.

botones planos

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

  • La mejor solución stackoverflow.com/questions/1521640/…

    – Zar E. Ahmer

    5 de diciembre de 2014 a las 13:23

  • Posible duplicado de stackoverflow.com/questions/26346727/…

    – rds

    5 mayo 2015 a las 11:30

  • Quizás esto debería ser un duplicado (no estoy claro). Pero esta razón cercana es simplemente incorrecta.

    – Yishai

    10 de agosto de 2016 a las 17:29

avatar de usuario
gabriel

Esto requiere Android 5.0

Botón elevado

Herede su estilo de botón de Widget.Material.Button, y la elevación estándar y la acción de elevación se aplicarán 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 de onda:

<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 mi consejo anterior para los botones planos, en su lugar, debe seguir el consejo dado 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 usando style="?attr/borderlessButtonStyle". (nótese 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"
/>

  • Gracias y perdón por esta respuesta tardía. ¿Hay alguna manera de lograr el mismo resultado con la biblioteca de soporte? Heredé mi tema de Theme.AppCompat.Light.DarkActionBar y en Android Studio puedo ver el elevado pero quiero, pero cuando ejecuto la aplicación en mi teléfono (api 17) veo el botón habitual

    – rickyalberto

    10 de noviembre de 2014 a las 13:45

  • ¿Alguna forma de hacer que el estilo de botón en relieve funcione en pre-lollipop? ¿Incluso un estilo falso?

    – desarrollador de Android

    27 de diciembre de 2014 a las 20:29

  • Los estados deshabilitado/habilitado tienen el mismo aspecto. ¿Cómo arreglar eso?

    – ViliusK

    23 de marzo de 2015 a las 7:34

  • ¿Por qué el botón plano (sin bordes) no resalta el estilo de color cuando se usa Material Design? ¿Es mejor usar buttonBarButtonStyle?

    – perdido en la traducción

    20 de mayo de 2015 a las 1:23

  • @lostintranslation Porque en el tema base de AppCompat el borderlessButtonStyle se establece en @style/Widget.AppCompat.Button.Borderless. Si desea que se acentúe el color, configure el borderlessButtonStyle en su tema para @style/Widget.AppCompat.Button.Borderless.Colored.

    – pastel de calabaza65

    1 de julio de 2016 a las 1:12

Para implementar los botones planos, simplemente 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 por el atributo.

  • Fantástico, y es compatible con el nivel 11 de API.

    – gabriel

    12 de noviembre de 2014 a las 7:22

  • @StephenKaiser ¿Qué hay de los botones en relieve?

    – Farbod Salamat-Zadeh

    20 de julio de 2015 a las 9:02

  • style="@style/Widget.AppCompat.Button.Borderless" al usar la biblioteca AppCompat

    – Michael Kazarian

    26 de mayo de 2016 a las 8:26

Puedes usar MaterialDiseñoBiblioteca. Es una biblioteca de terceros.

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

Estoy trabajando en una biblioteca de compatibilidad de materiales. La clase de botón está ahí y admite sombras animadas y la onda táctil. Tal vez lo encuentres útil. Aquí esta la Enlace.

avatar de usuario
thanoschatz

Lo uso como fondo para un botón con AppCompat y muestra un botón elevado (con ondas y todo), 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>

estilos.xml:

<resources>

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

</resources>

estilos.xml (v21):

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

diseño.xml:

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

  • ¿Dónde usas este xml? ¿En una carpeta dibujable?

    – rickyalberto

    10 de noviembre de 2014 a las 13:43

  • Sí, asígnele el nombre, por ejemplo, myRaisedButton.xml y acceda a él desde su diseño con android:background=”@drawable/myRaisedButton”

    – thanos chatz

    10 de noviembre de 2014 a las 13:51


  • ¡Gracias, funciona! Tuve que eliminar la última línea porque obtuve una excepción, ¿cómo puedo solucionarlo? Lo siento pero sigo teniendo problemas para trabajar con estilos en xml

    – rickyalberto

    10 de noviembre de 2014 a las 13:57

  • ¿Por qué hizo que los archivos styles.xml apuntaran al mismo estilo (“AppTheme.Base”)? No veo la funcionalidad añadida aquí…

    – desarrollador de Android

    17 de noviembre de 2014 a las 23:28

  • Este código genera una excepción y no crea un botón elevado.

    – Steve M.

    13 de diciembre de 2014 a las 19:48

avatar de usuario
Comunidad

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

¡Esto le mostrará cómo usar los botones elevados y planos para Android 5.0 y versiones anteriores (hasta el nivel de API 11)!

  • ¿Dónde usas este xml? ¿En una carpeta dibujable?

    – rickyalberto

    10 de noviembre de 2014 a las 13:43

  • Sí, asígnele el nombre, por ejemplo, myRaisedButton.xml y acceda a él desde su diseño con android:background=”@drawable/myRaisedButton”

    – thanos chatz

    10 de noviembre de 2014 a las 13:51


  • ¡Gracias, funciona! Tuve que eliminar la última línea porque obtuve una excepción, ¿cómo puedo solucionarlo? Lo siento pero sigo teniendo problemas para trabajar con estilos en xml

    – rickyalberto

    10 de noviembre de 2014 a las 13:57

  • ¿Por qué hizo que los archivos styles.xml apuntaran al mismo estilo (“AppTheme.Base”)? No veo la funcionalidad añadida aquí…

    – desarrollador de Android

    17 de noviembre de 2014 a las 23:28

  • Este código genera una excepción y no crea un botón elevado.

    – Steve M.

    13 de diciembre de 2014 a las 19:48

avatar de usuario
uniedro

Usted pidió botones de material design Bibliotecalo entendistehttps://github.com/navasmdc/MaterialDesignLibrary

¿Ha sido útil esta solución?