44

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.

3 Answers 3

94

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

6
9

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.