Home / Questions / 4628
Accepted
Codelaby
Asked: 2020-02-24 02:59:36 +0800 CST 2020-02-24 02:59:36 +0800 CST

Flat Button in Android Material Design

  • 772

By default when a button is created in Android Studio, its appearance inherits the Material Design layout, in the Material Design style guide, it talks about Flat, RaisedRaised buttons, I think it is the default

flat button

enter image description here

Raised button

enter image description here

Summary of what I'm asking

  • I see that the raised add that effect glowto raise it, how is it assigned?
  • How do you specify it to be styled as a flat button?
android

2 Answers

  1. Best Answer

    Final score

    enter image description here

    You must first add the support library.

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

    answer toRaised Button.

    You define your own style.

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

    You apply the style.

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

    Response for Raised Button con elevación(API +19)

    You define your own animation.

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

    You assign the animation.

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

    answer toFlat Button.

    You assign the Borderless style.

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

    In case you want to define your own style.

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

    And after defining your own style, of course indicate it to use it.

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

    More information: LINK

    • 6

  2. Another solution is to use the styles from the compatibility library, over one ButtonorAppCompatButton

    Flat Button

    For text-only buttons, text button, flat button:

    enter image description here

    Set the style to:style="@style/Widget.AppCompat.Button.Borderless"

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/button1"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

    Colorful The color of the text will be the one defined in colorAccentthe theme.

    Set the style to:style="@style/Widget.AppCompat.Button.Borderless.Colored"

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/button2"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

    Personalization

    For customization we can define our own style, in order to change the color of the text, wave color when pressed, only in those buttons that we want.

    We change the color of the text in <item name="colorAccent">and the color of the shock wave in<item name="colorControlHighlight">

    PrimaryFlatButton style

    <style name="PrimaryFlatButton" parent="Theme.AppCompat.Light">
    <item name="android:buttonStyle">@style/Widget.AppCompat.Button.Borderless.Colored</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

    to use it on the use buttonandroid:theme="@style/PrimaryFlatButton

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome3"
    android:theme="@style/PrimaryFlatButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text=" Button" />
    • 0