CODEWITHSUNDEEP
androidandroid-layoutbutton
James Parsons
James Parsons

Reputation: 6057

Android create a "flat button"

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

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.

Upvotes: 44

Views: 32284

Answers (3)

Michael Hathi
Michael Hathi

Reputation: 2151

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:

enter image description here

Upvotes: 4

pha
pha

Reputation: 604

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"

Upvotes: 9

Skizo-ozᴉʞS ツ
Skizo-ozᴉʞS ツ

Reputation: 20646

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

Upvotes: 94

Related Questions