Android: Material buttons

Emrullah Lüleci
Android Bits
Published in
2 min readAug 16, 2016

--

Credit: material.io

From Google Material Design docs: “Buttons communicate the action that will occur when the user touches them.”. Adding them to your app is very straightforward.

Adding resources

Add the latest appcompat library to your project.

dependencies {
//replace X.X.X with the latest version
compile 'com.android.support:appcompat-v7:X.X.X'
}

Make your activity extend AppCompatActivity.

public class ButtonActivity extends AppCompatActivity {
...
}

Add the button to the layout.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/action_click_me" />

At this point you’ll have the material button in your app.

Styling

To apply your custom colors you can define the button style in the styles.xml. Add colorButtonNormal and colorControlHighlight to your app theme. This will apply the same design for all buttons in the app.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">@color/colorPrimary</item>
<item name="colorControlHighlight">@color/colorAccent</item>
</style>

If you want to style your buttons individually, create a button theme in your styles.xml

<style name="PrimaryButton" parent="Theme.AppCompat">
<item name="colorButtonNormal">@color/colorPrimary</item>
<item name="colorControlHighlight">@color/colorAccent</item>
</style>

and reference the theme on your button.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/action_click_me"
android:theme="@style/PrimaryButton" />

Alternatively you can set the background color by simply adding android:backgroundTint to your button directly if you target API 21+. But be aware that this isn’t going to work in older versions.

Flat button

For using flat button, create a style for it in your styles.xml

<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/colorPrimary</item>
</style>

and reference the style on your button.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button_normal"
android:theme="@style/PrimaryFlatButton" />

And here is your flat button. Voilà !

--

--

Emrullah Lüleci
Android Bits

Co-founder of Mentornity, Software Engineer, Sailor