Implementing Custom

ImageButtons in Android

by Liyema Swartbooi
In Android, ImageButton is used to display a normal
button with a custom image in a button. In simple
words we can say, ImageButton is a button with an
image that can be pressed or clicked by the users. By
default it looks like a normal button with the standard
button background that changes the color during
different button states.
Introduction to ImageButtons
What is an ImageButton? Difference from a Regular Why use ImageButton in
Button: Android UI?
A UI element that combines the
functionalities of an ImageView and a Buttons display text, while ImageButtons Enhances visual appeal and user
Button. It inherits from ImageView and display images and can also show text. experience, allows for icon-based actions,
Button classes. provides more design flexibility than
standard buttons.
Basic Implementation in XML

id src background
The `id` attribute is used to uniquely The `src` attribute is used to set the The `background` attribute is used to
identify an image button. It is used to source file of the image that will be set the background of the image
reference the button in your code. displayed in the image button. button. You can set a color or a
drawable as the background.
1. id: id is an attribute used to uniquely identify a
image button. Below is the example code in which we
set the id of a image button.

<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
2. src: src is an attribute used to set a source file of
image or you can say image in your image button to
make your layout look attractive.
Below is the example code in which we set the source of an image button. Make sure you have saved an image in drawable folder name home
before using below code.

<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home"/> <!--src(source)file from drawable folder which display an imagebutton-->
3.a drawable is a general concept for a graphic that
can be drawn on the screen. It is typically used for
defining images, shapes, and other visual elements in
an app. Drawables can be used as backgrounds, icons,
buttons, and more.
Types of Drawables in Android

<ImageView android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my_image"/>
Setting Image Source In ImageButton Using Java
class:
We can also set the source image at run time programmatically in java class. For that we use setImageResource() function as shown in below
example code.

/*Add in Oncreate() funtion after setContentView()*/

ImageButton simpleImageButton = (ImageButton)findViewById(R.id.simpleImageButton);
simpleImageButton.setImageResource(R.drawable.home); //set the image programmatically
3. background: background attribute is used to set the
background of an image button. We can set a color or a
drawable in the background of a Button.
Below is the example code in which we set the black color for the background and an home image as the source of the image button.

<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home"
android:background="#000"/><!-- black background color for image button-->
Setting Background In ImageButton Using Java class:
Below is the example code in which we set the black background color of a image button programmatically means in java class.

/*Add in Oncreate() funtion after setContentView()*/

ImageButton simpleImageButton = (ImageButton) findViewById(R.id.simpleImageButton);
simpleImageButton.setBackgroundColor(Color.BLACK); //set black background color for image button
4. padding: padding attribute is used to set the
padding from left, right, top or bottom of the
ImageButton.
paddingRight : set the padding from the right side of the image button.
paddingLeft : set the padding from the left side of the image button.
paddingTop : set the padding from the top side of the image button.
paddingBottom : set the padding from the bottom side of the image button.
padding : set the padding from the all side¾s of the image button.

Below is the example code of padding attribute in which we set the 20dp padding from all the side¾s of a image button.

<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/home"
android:padding="30dp"/><!-- set 30dp padding from all the sides of the view-->
Step 1: Create an Android project called
ImageButtonExample
Step 2:Clean The Project
Step 3 : Right click on drawable -> New -> Drawable
resource file and create new xml file
name custom_image-buttton.xml and add following
code

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#900" /><!-- background color for imagebutton-->
<corners android:radius="20dp" /><!-- round corners for imagebutton-->
</shape>

In this Step we create drawable xml in which we used solid and corner properties, solid is used to set the background color for the image
button and corner is used to set the radius for button corners.

<!--Make sure to save two images home and youtube in drawable folder-->
<ImageButton
android:id="@+id/simpleImageButtonHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="@drawable/custom_image_buttton"
android:contentDescription="TODO"
android:padding="20dp"
android:src="@drawable/home" />

<ImageButton
android:id="@+id/simpleImageButtonYouTube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/simpleImageButtonHome"
android:layout_centerHorizontal="true"
android:layout_marginTop="200dp"
android:background="#005"
android:contentDescription="TODO"
android:padding="20dp"
android:src="@drawable/youtube" />
// initiate view's
ImageButton simpleImageButtonHome = (ImageButton)findViewById(R.id.simpleImageButtonHome);
ImageButton simpleImageButtonYouTube = (ImageButton)findViewById(R.id.simpleImageButtonYouTube);

// perform click event on button's

simpleImageButtonHome.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"Home Button",Toast.LENGTH_LONG).show();// display the toast on
home button click
}
});
simpleImageButtonYouTube.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"YouTube Button",Toast.LENGTH_LONG).show();// display the toast on
you tube button click
}
});
Output: Run the application and then click on any ImageButton and see the message on screen which button is clicked.