Boton Flat en Android Material Design

publicado por: Anonymous

Por defecto cuando se crea un botón en Android Studio, su aspecto hereda el diseño de Material Design, en la guía de estilo de Material Design, habla de botones Flat, Raised Raised creo que es el por defecto

Botón Flat

introducir la descripción de la imagen aquí

Botón Raised

introducir la descripción de la imagen aquí

Resumen de lo que pregunto

  • Veo que el raised le añaden ese efecto de glow para elevarlo, como
    se le asigna?
  • ¿Cómo se especifica que sea estilo como flat button?

solución

Resultado final

introducir la descripción de la imagen aquí

Debes añadir primeramente la librería de soporte.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X'
}

Respuesta para Raised Button.

Defines tu propio estilo.

<style name="MiRaisedBoton" parent="Theme.AppCompat.Light">  
    <item name="colorControlHighlight">#FF4081</item>
    <item name="colorButtonNormal">#00BCD4</item>
</style>

Aplicas el estilo.

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RAISED BUTTON"
    android:theme="@style/MiRaisedBoton"/>

Respuesta para Raised Button con elevación (API +19)

Defines tu propia animación.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="@dimen/button_pressed_z_material"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType"/>
    </set>
</item>
<item android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="0"
                        android:startDelay="@integer/button_pressed_animation_delay"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType" />
    </set>
</item>

Asignas la animación.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RAISED BUTTON ELEVADO"
    android:stateListAnimator="@anim/mi_animacion"/>

Respuesta para Flat Button.

Asignas el estilo Borderless.

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="FLAT BUTTON"
    style="@style/Widget.AppCompat.Button.Borderless"/>

En caso de querer definir tu propio estilo.

<style name="MiFlatBoton" parent="Theme.AppCompat.Light">  
    <!-- tus propios cambios -->
</style> 

Y tras definir tu propio estilo por supuesto indicarlo para usarlo.

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="FLAT BUTTON"
    android:theme="@style/MiFlatBoton"
    style="@style/Widget.AppCompat.Button.Borderless"/>

Más información: ENLACE

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *