Change Material Design Android Button Style in Studio

How to create material style button using appcompat theme and change button color & hover color.

In this tutorial we would create Material style button using appcompat library and after that we would change the material button background color, highlight clicked time color using theme. So here is the complete step by step tutorial for Change Material Design Android Button Style in Studio .

Follow the below steps to add appcompat-V7 library in your project:

1. Import the com.android.support:appcompat-v7 library in your project’s build.gradle ( Module:app ) file.

2. Add compile ‘com.android.support:appcompat-v7:25.1.0’ in dependencies scope .

How to Change Material Design Android Button Style in Studio .

Code for MainActivity.java file.

package com.android_examples.buttonstyle_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.buttonstyle_android_examplescom.MainActivity">

    <Button
        android:text="Button 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="120dp"
        android:theme="@style/Button1Style"
        android:textColor="#ffffff"/>

    <Button
        android:text="Button 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:id="@+id/button2"
        android:theme="@style/Button2Style"
        android:textColor="#ffffff"
        android:layout_marginTop="10dp"/>

    <Button
        android:text="Button 3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:id="@+id/button3"
        android:theme="@style/Button3Style"
        android:textColor="#ffffff"/>

</RelativeLayout>

Code for styles.xml file.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Button1Style" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">#FFCCBC</item>
        <item name="colorButtonNormal">#FF5722</item>
    </style>

    <style name="Button2Style" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">#E0F2F1</item>
        <item name="colorButtonNormal">#009688</item>
    </style>

    <style name="Button3Style" parent="Theme.AppCompat.Light">
        <item name="colorButtonNormal">#E91E63</item>
        <item name="colorControlHighlight">#FCE4EC</item>
    </style>

</resources>

Screenshot :

Change Material Design Android Button Style in Studio

Leave a Reply

Your email address will not be published. Required fields are marked *