Android ImageButton example

In Android, you can use “android.widget.ImageButton” to display a normal “Button“, with a customized background image.

In this tutorial, we show you how to display a button with a background image named “android_button.png“, when user click on it, display a short message. As simple as that.

Note
You may also like this Android ImageButton selector example, which allow to change button’s images depends on button states.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Add Image to Resources

Put image “android_button.png” into “res/drawable-?dpi” folder. So that Android know where to find your image.

2. Add ImageButton

Open “res/layout/main.xml” file, add a “ImageButton” tag, and defined the background image via “android:src“.

File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android_button" />
 
</LinearLayout>

3. Code Code

Here’s the code, add a click listener on image button.

File : MyAndroidAppActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.Toast;
import android.view.View;
import android.view.View.OnClickListener;
 
public class MyAndroidAppActivity extends Activity {
 
	ImageButton imageButton;
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		addListenerOnButton();
 
	}
 
	public void addListenerOnButton() {
 
		imageButton = (ImageButton) findViewById(R.id.imageButton1);
 
		imageButton.setOnClickListener(new OnClickListener() {
 
			@Override
			public void onClick(View arg0) {
 
			   Toast.makeText(MyAndroidAppActivity.this,
				"ImageButton is clicked!", Toast.LENGTH_SHORT).show();
 
			}
 
		});
 
	}
 
}

4. Demo

Run the application.

1. Result, a button with a customized background image.

android imagebutton demo1

2. Click on the button, a short message is displayed.

android imagebutton demo2

Download Source Code

Download it – Android-ImageButton-Example.zip (28 KB)

References

  1. Android ImageButton example
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: 4 types of electricians()

  • Pingback: electricians phoenix()

  • Pingback: house blue()

  • Pingback: zak?ad szklarski piotrk√≥w trybunalski()

  • Pingback: bottled alkaline water()

  • Pingback: water ionizer loan()

  • Pingback: does plumbers putty need to dry()

  • Pingback: plumbing companies in cedar rapids iowa()

  • Pingback: paypal loans()

  • Pingback: car parking()

  • Pingback: pay per day loan plans()

  • Pingback: water ionizer machine()

  • Pingback: laan penge()

  • Pingback: fue()

  • Pingback: laan her og nu()

  • Pingback: car parking()

  • Pingback: Google()

  • Pingback: alkaline water benefits()

  • Pingback: alkaline water()

  • Pingback: alkaline water()

  • Pingback: watch free movies online()

  • Pingback: watch free movies online()

  • Pingback: stream movies()

  • Pingback: Blue Coaster33()

  • Pingback: My app crashes when I try to add Image Button to itCopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery, copyquery.com, android doubt, ios question, sql query, sqlite query, nodejsquery, dns query()

  • http://www.hargaterbaru.net harga terbaru

    very helpful…thx

  • Pingback: Android ImageButton Example ???? - ????? - ???()

  • http://www.gmxmultimedia.com Gerardo Flores

    When i make a imagebutton the image (png file) seems low quality and with a padding inside the button, there’s a way to make it exactly of the size of the png image and without that padding? Thank you so much.

  • http://testing2.site90.net/Eleanor57 Check out this website

    Awesome blog! Is your theme custom made or did you download it from
    somewhere? A design like yours with a few simple adjustements would really make my blog shine.
    Please let me know where you got your design. Thanks a lot

  • Josh F.

    This info saved me a lot of time. I was originally trying to assign a view with a drawable to a Button, but it obviously wasn’t working. So, thanks a ton for posting this example source code for an ImageButton.

  • Josh F.

    This information saved me a lot of time. It worked perfectly. Thanks for posting this.

  • Chandra

    Can you please help me how to add imagebutton dynamically in my activity…
    Please I am new to android….

  • Pingback: Android: Multicolor Button or nesting Views/Buttons : Android Community - For Application Development()

  • Anurag
     public class Mp3Player extends Activity implements OnClickListener {
     
        @Override
        public void onCreate(Bundle savedInstanceState) {
     
     ImageButton ib1=(ImageButton) findViewById(R.id.Playbutton);
     ImageButton ib2=(ImageButton) findViewById(R.id.Pausebutton);
     ImageButton ib3=(ImageButton) findViewById(R.id.Forwardbutton);
     ImageButton ib4=(ImageButton) findViewById(R.id.Rewindbutton);
     
     
     ib1.setOnClickListener(this);
     
            super.onCreate(savedInstanceState);     
            setContentView(R.layout.activity_mp3_player);
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.activity_mp3_player, menu);
            return true;
        }
     
    	@Override
    	public void onClick(View arg0) {
    		// TODO Auto-generated method stub
     
    		switch(arg0.getId()) {
    		case R.id.Playbutton:
    			Log.d(&quot;MediaPlayer&quot;, &quot;Play button was clicked&quot;);
    			break;
     
    		case R.id.Pausebutton:
    			Log.d(&quot;MediaPlayer&quot;, &quot;Pause button was clicked&quot;);
    		default:
    			break;
    		}
     
    	}
    }
     &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        xmlns:tools=&quot;http://schemas.android.com/tools&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot; &gt;
     
        &lt;ImageView
            android:id=&quot;@+id/imageView1&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignParentBottom=&quot;true&quot;
            android:layout_alignParentLeft=&quot;true&quot;
            android:layout_alignParentTop=&quot;true&quot;
            android:src=&quot;@drawable/mp_img&quot; /&gt;
     
        &lt;ImageButton
            android:id=&quot;@+id/Playbutton&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignParentBottom=&quot;true&quot;
            android:layout_alignParentLeft=&quot;true&quot;
            android:layout_marginBottom=&quot;80dp&quot;
            android:src=&quot;@drawable/play&quot; /&gt;
     
        &lt;ImageButton
            android:id=&quot;@+id/Pausebutton&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignTop=&quot;@+id/Playbutton&quot;
            android:layout_toRightOf=&quot;@+id/Playbutton&quot;
            android:src=&quot;@drawable/pause&quot; /&gt;
     
        &lt;ImageButton
            android:id=&quot;@+id/Rewindbutton&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignParentRight=&quot;true&quot;
            android:layout_alignTop=&quot;@+id/Pausebutton&quot;
            android:src=&quot;@drawable/rewind&quot; /&gt;
     
        &lt;ImageButton
            android:id=&quot;@+id/Forwardbutton&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignBottom=&quot;@+id/Rewindbutton&quot;
            android:layout_toLeftOf=&quot;@+id/Rewindbutton&quot;
            android:src=&quot;@drawable/forward&quot; /&gt;
     
    &lt;/RelativeLayout&gt;

    Why is my application not running?

  • sanket mehta

    hey dude u r awsome… I found it is better to search anything in ur blog instead of android blog…
    Ver good keep working…

  • Pingback: Android Tutorial()

  • luki

    good job… thanks for ur sample

  • http://stuffilike.net Lane

    Thanks for the quick instruction, it was much clearer than the Android for Abosolute Beginners book I was using (it’s not bad, just a little, uh, incomprehensible on this topic). Does this mean that each button on a form gets its own listener function? Does this apply to radio group buttons as well?

  • sss

    Hi,
    thanks for the article :) I was wondering if I can do this without the xml part. Because i have an array of images and I need to put one of the images to the button. Do I have to create the array in xml or can I write it normally in java? I am quite begginer in xml and the concept of moving from xml to java and back.
    Thanks :)

  • http://www.applanet.net/index.php?s=0952250e93819af2388c1c734b835583 store

    I’m really inspired along with your writing abilities as well as with the structure on your weblog. Is this a paid topic or did you customize it yourself? Anyway keep up the nice high quality writing, it is uncommon to look a nice blog like this one nowadays..

    • http://stuffilike.net Lane

      You may want to delete this comment. Smells like spam.

  • http://www.allandroidgadget.com android gadget

    nice info..!!
    See : http://www.allandroidgadget.com
    For Android Gadget Review Portal
    Thank’s…

    • khan

      nice

  • Pingback: Change appearance of button/imageview/imagebutton in android in different states « Say hello to python!()

  • Pingback: Android button example()

  • Pingback: Android ImageButton selector example()