Android create a "flat button"

Question

Supposedly, in the material theme, there are two types of buttons: raised, and flat:

When I create a <Button>, it looks like the "raised" button. How, using markup, can I make the "flat button". Is there any style or attribute to do it? I found this image in the theme editor.

Solution 1

You can use the style="?android:attr/borderlessButtonStyle on your Button as follows:

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

BorderlessButtonStyle

Style for buttons without an explicit border, often used in groups.

Also you can use those Flat Buttons

Solution 2

Add dependency to build.gradle

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

Then in your layout XML file, add a style attribute to the Button

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

You can change the color when the button is pressed by defining a custom style

<style name="FlatButtonStyle" parent="Theme.AppCompat.Dark">
    <item name="colorControlHighlight">@color/transparent</item>
</style>

and applying this style in layout XML

android:theme="@style/FlatButtonStyle"

Solution 3

With the availability of Material Components Library, it is now easy to add a Flat Button in your layout. Here are the steps:

Add dependency to your app module's build.gradle

dependencies {
    implementation 'com.google.android.material:material:1.2.0-alpha04'
}

Note: Find the latest version number at https://mvnrepository.com/artifact/com.google.android.material/material

Then add a MaterialButton with the following style to your XML layout

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

And that's it. The style property and its value style="@style/Widget.MaterialComponents.Button.TextButton" takes care of enabled and disabled states and its text color.

Final result:

Comments

[James Parsons]

Thanks. I wish Google would make this stuff easier to find. There is still too many Holo themes left over.

[James Parsons]

Oh and do these still respond with a material "ripple" when pressed?

[James Parsons]

Like this: google.com/design/spec/animation/…

[Noitidart]

Can we apply borderlessButtonStyle progrmatically?

[Noitidart]

@Skizo-ozᴉʞS i posted it here please - stackoverflow.com/q/50295530/1828637

[Noitidart]

I also posted this question please sir - stackoverflow.com/q/50295600/1828637