Android Customizing Background of Button

0

In this article, we will see how to customize a button style to replace the button’s background image with a drawable XML resource that defines the images for each state of the button.

Since based on state, the image of the button changes, the drawable resource is also called state list drawable.

Once you’ve defined a state list drawable in XML, you can apply it to your Button using the android:background attribute.

State wise bitmaps for the button background

We will create two bitmaps for the button background that represent the default and pressed button states. The images will be created in form of nine-patch bitmaps so that they can be stretched to fit buttons of various sizes.
The images are placed into the res/drawable/ directory of your project. It is advisable to name the file indicating the state of the button.

ic_about_tutor_normal.9.png:

Button normal state image

Normal State

ic_about_tutor_pressed.9.png:

Button pressed state 9-patch image

Pressed State

Create Button Background Drawable

Create a new XML file in the res/drawable/ directory. Chose selector as the root element. Each child element <item> will represent one state of the button. Based on the drawable resource, the image will change based on the current state of the button. There is another state that represents focus on button which we haven’t used in this example. The default state represents a state which is neither focused or pressed.
The order of <item>s is another important aspect to take a note of. Make sure the default state is the last item as the selector traverses the items in-order and will pick the first item that matches the state of the view.

If the default item is placed first, IDE will issue warning.

This item is unreachable because a previous item (item #1) is a more general match than this one.

piano_tuto.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_about_tutor_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_about_tutor_normal"/>    
</selector>

Specify the drawable XML file as the button background.

main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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.javarticles.android.MainActivity">
    
     <Button
        android:id="@+id/btn_tutor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/piano_tutor"
        android:text="@string/about_tutor"
        android:onClick="aboutTutor"/>

</LinearLayout>

When you press the tutor button, it takes use to the ‘About Tutor’ page.

tutor_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/about_tutor" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/tutor_details" />
</LinearLayout>

strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">JavArticles</string>
    <string name="welcome">Button State Example</string>
    <string name="about_tutor">Piano Tutor</string>
    <string name="tutor_details">He is training students in Piano for ABRSM university, UK for the past 10 years. He is known for his specified and individual approaches to each and every student.</string>
</resources>

Here is the main activity.

MainActivity:

package com.javarticles.android;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_activity);
	}

	public void aboutTutor(View view) {
		startActivity(new Intent(this, AboutTutorActivity.class));
	}
}

And the tutor activity.

AboutTutorActivity:

package com.javarticles.android;

import android.app.Activity;
import android.os.Bundle;

public class AboutTutorActivity extends Activity {
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	
		setContentView(R.layout.tutor_layout);
	}
}

Run the application

First the button shows up with the normal image as the background.

Button state - Pressed

Button state – Normal

And when you press the button you can see the image changing to the pressed one.

Button state - Normal

Button state – Pressed

When you press the button ‘About Tutor’ opens up.

About Tutor

About Tutor

Download source code

This was an example about customizing background of a button.

You can download the source code here: buttonStateExample.zip
Share.

Comments are closed.