Android ImageButton Tutorial With Example

Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners. Also, if you are interested in content writing, you can mail us at tutorialwing@gmail.com.

Hello Readers! In this post, we are going to learn about how to use android imageButton widget in any android application. We will also go through different attributes of imageButton widget that can be used to customise it.

Output

Tutorialwing Android ImageButton Output Android ImageButton tutorial with example

Tutorialwing Android ImageButton Output

Getting Started

Android ImageButton widget can be defined as below –

ImageButton is subclass of imageView that displays a button with an image that can be clicked or pressed by the user.

By default, imageButton looks like a simple button that changes states during different button states. You can use android:src attribute to set image on this imageButton view.

Attributes of Android ImageButton Widget

Some of the popular attributes of android imageButton widget inherited from ImageView are –

Sr. XML Attributes Description
1 android:adjustViewBounds This is responsible for auto adjust of view’s boundary to maintain the aspect ratio of it’s drawable.
2 android:baseline It sets the offset of the baseline within this view.
3 android:baselineAlignBottom If true, it sets the baseline aligned with it’s bottom edge.
4 android:cropToPadding If true, image will be cropped to fit within it’s padding.
5 android:maxHeight Sets maximum height of the view.
6 android:maxWidth Sets maximum width of the view.
7 android:scaleType It defines the way image will be resized or moved to match the size of the imageView
8 android:src Sets a drawable of the imageView
9 android:tint It tints the color of the image.
10 android:tintMode Sets blending mode used to apply the image tint

Some of the popular attributes of ImageButton inherited from View are –

Sr. XML Attributes Description
1 android:alpha Sets alpha of the view
2 android:autofillHints Sets the data to be shown to auto fill in the view
3 android:background Sets background of the view
4 android:backgroundTint Sets tint to apply to the background
5 android:backgroundTintMode Blending mode used to apply the background tint
6 android:clickable Sets whether this view is clickable or not
7 android:elevation Sets elevation to the view
8 android:fitsSystemWindows It is used to adjust view layout based on system windows
9 android:focusable Controls whether this view can take focus
10 android:id Sets unique id to the view
11 android:onClick Sets what to do when this view is clicked
12 android:padding Sets padding to the view
13 android:tag Sets tag to the view
14 android:tooltipText Sets tooltip text to be shown when hovered on the view
15 android:visibility Sets visibility of the view



Example of Android ImageButton Widget

At first, we will create android application. Then, we will use imageButton widget in this application.

1. Creating New Project

Follow steps below to create new project. Please ignore the steps if you have already created a new application.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as ImageButton. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Now, we will modify xml and java file to use ImageButton widget in the application.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">ImageButton</string>
	<string name="this_is_imagebutton">This is imageButton</string>
	<string name="image_button_clicked">You clicked imageButton</string>
</resources>

No other values folders have been modified. So, we are not going to mention them here.

3. Use ImageButton Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

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

	<ImageButton
		android:id="@+id/imageButton"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:contentDescription="@string/this_is_imagebutton"
		app:srcCompat="@mipmap/ic_launcher"/>

</LinearLayout>

In activity_main.xml file, we have used imageButton widget. Attribute app:srcCompat=”” is being used to set image to the imageButton widget. Now, we will access this widget in java file to perform some action on it.

4. Access imageButton Widget in java file

Open src/main/java/com.tutorialwing.imagebutton/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.imagebutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

		ImageButton imageButton = findViewById(R.id.imageButton);
		if (imageButton != null) {
			imageButton.setOnClickListener(new View.OnClickListener() {
				@Override
				public void onClick(View v) {
					Toast.makeText(MainActivity.this, R.string.image_button_clicked, Toast.LENGTH_SHORT).show();
				}
			});
		}
	}
}

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.imagebutton"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of tutorial on Android ImageButton widget.

Support Us

If you like Tutorialwing and would like to contribute, you can email an article on any educational topic at tutorialwing@gmail.com. We would love to publish your article. See your article on Tutorialwing and help others with your knowledge. Follow Facebook, LinkedIn, Google+, Twitter, Youtube for latest updates.
Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners