Android Custom Button

In this Android Tutorial for beginners we are going to see about android basic widgets. We have already seen about how to display words using TextView, changin its color, face properties, setting up action listener and background for our button, and using Toast to display a notification in the previous tutorials. But now we are going to discuss about Android ImageButton – a dedicated button for image usage.

Image Button is a subclass of TextView, so everything discussed in the preceding section in terms of formatting the face of the button still holds.

The properties are already seen in the previous Android TextView Tutorial.

    <ImageButton
        android:id="@+id/pinkBtn"
        android:layout_width="112dp"
        android:layout_height="30dp"
        android:contentDescription="@string/desc"
        android:src="@drawable/pink_btn" />

Below you can find the description of each properties.

For this tutorial you need to create Three ImageButton. Paste the following code in your main.xml layout button, and play with the property values till you get your desire result.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <ImageButton
        android:id="@+id/pinkBtn"
        android:layout_width="112dp"
        android:layout_height="30dp"
        android:contentDescription="@string/desc"
        android:src="@drawable/pink_btn" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <ImageButton
        android:id="@+id/blueBtn"
        android:layout_width="112dp"
        android:layout_height="30dp"
        android:contentDescription="@string/desc"
        android:src="@drawable/blue_btn" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <ImageButton
        android:id="@+id/yellowBtn"
        android:layout_width="112dp"
        android:layout_height="30dp"
        android:contentDescription="@string/desc"
        android:src="@drawable/yellow_btn" />
</LinearLayout>

AndroidImageButtonActivity

package com.vimaltuts.android.androidwidget;
import android.R.anim;
import android.R.color;
import android.R.layout;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
public class AndroidImageButtonActivity extends Activity {
    private ImageButton pink;
	private ImageButton blue;
	private ImageButton yellow;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        pink=(ImageButton)findViewById(R.id.pinkBtn);
        blue=(ImageButton)findViewById(R.id.blueBtn);
        yellow=(ImageButton)findViewById(R.id.yellowBtn);
        pink.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				 findViewById(R.id.myLayout).setBackgroundColor(Color.parseColor("#8d395b"));
			}
		});
        blue.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				 findViewById(R.id.myLayout).setBackgroundColor(Color.parseColor("#3b597a"));
			}
		});
        yellow.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				 findViewById(R.id.myLayout).setBackgroundColor(Color.parseColor("#e09a00"));
			}
		});
    }
}

To set BackgroundColor to our current layout from the java code we need to set id to our layout in the xml file (main.xml).

To be able to point out the various button states (focused, selected, and so on.), you are able to specify an alternative graphic for every state just like the one we performed in the previous tutorial Android Button Tutorial E.g., A simple way to get this done is by using an XML drawable “selector.”

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/button_pressed" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/button_focused" /> <!-- focused -->
     <item android:drawable="@drawable/button_normal" /> <!-- default -->
 </selector>

In this Android Custom Button Tutorial we have seen about the Image Button from basic to advance, from setting background image to onclick listener. In the next tutorial we are going to see about the CheckBox.

Google+