How to Combine Text and Image on a Button or ImageButton in Android?
Last Updated :
17 Jul, 2022
Image Buttons are used in many android applications for performing some actions. Some of the users of mobile applications sometimes are not aware of the images which are present on that specific buttons. So for informing the user about that button we also add a simple text to our button so that the user will get to know what is the use of the button. In this article, we will take a look at How to Combine Text and Image on a Button or Image Button in Android. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the code below. Comments are added in the code to get to know in detail.
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:id="@+id/idRLContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--on below line we are creating
a text for our app-->
<TextView
android:id="@+id/idTVHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:padding="10dp"
android:text="Combine Text and Image on a Button or ImageButton"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold" />
<!--on below line we are creating
a text for our app-->
<TextView
android:id="@+id/idTVHead1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:padding="4dp"
android:text="Simple Button"
android:textAlignment="center"
android:textSize="20sp"
android:textStyle="bold" />
<!--on below line we are creating a simple button-->
<Button
android:id="@+id/idSimpleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableTop="@drawable/ic_android"
android:drawablePadding="20dp"
android:text="Android"
android:textAllCaps="false"
android:textStyle="bold" />
<!--on below line we are creating a text for image button-->
<TextView
android:id="@+id/idTVHead2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:padding="4dp"
android:text="Image Button"
android:textAlignment="center"
android:textSize="20sp"
android:textStyle="bold" />
<!--on below line we are creating a frame
layout for overlapping views-->
<FrameLayout
android:id="@+id/idFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<!--on below line we are creating an image button-->
<ImageButton
android:id="@+id/idImgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/purple_200"
android:padding="10dp"
android:src="@drawable/ic_android" />
<!--on below line we are creating a
text for our image button-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="45dp"
android:clickable="false"
android:text="Android"
android:textColor="@color/white"
android:textStyle="bold" />
</FrameLayout>
</LinearLayout>
Step 3: Working with the MainActivity file
Navigate to app > java > your app's package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject
import android.os.Bundle
import android.widget.Button
import android.widget.ImageButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
// on below line creating a variable.
lateinit var simpleBtn: Button
lateinit var imgBtn: ImageButton
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// on below line we are initializing our variables.
simpleBtn = findViewById(R.id.idSimpleBtn)
imgBtn = findViewById(R.id.idImgBtn)
// on below line we are adding click listener
// for our simple button
simpleBtn.setOnClickListener {
// on below line we are displaying a toast message.
Toast.makeText(this, "This is a simple button", Toast.LENGTH_SHORT).show()
}
// on below line we are adding click listener
// for our image button
imgBtn.setOnClickListener {
// on below line we are displaying a toast message.
Toast.makeText(this, "This is a image button", Toast.LENGTH_SHORT).show()
}
}
}
package com.gtappdevelopers.kotlingfgproject;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
// on below line we are creating variables.
private Button simpleBtn;
private ImageButton imgBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// on below line we are initializing our variables.
simpleBtn = findViewById(R.id.idSimpleBtn);
imgBtn = findViewById(R.id.idImgBtn);
// on below line we are adding click listener
// for our simple button
simpleBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line we are displaying a toast message.
Toast.makeText(MainActivity.this, "This is a simple button", Toast.LENGTH_SHORT).show();
}
});
// on below line we are adding click listener for our image button
imgBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line we are displaying a toast message.
Toast.makeText(MainActivity.this, "This is a image button", Toast.LENGTH_SHORT).show();
}
});
}
}
Now run your application to see the output of it.
Output:
Similar Reads
How to Add Image on Floating Action Button in Android? A floating action button (FAB) is a user interface element in the mobile application that is typically circular and floats above the main content. It usually has a prominent color and icon, and it is used to provide quick access to the most commonly used action within the app. Step-by-Step Implement
1 min read
How to Change the Shape of ImageButton in Android? Android ImageButton is a user interface widget that is used to display a button having an image and to perform exactly like a button when we click on it but here, we add an image on the Image button instead of text. Below is a sample image of ImageButton. In the android studio, the default shape of
2 min read
How to Handle IME Options on Action Button Click in Android? We often observe that a keyboard pops up when we try to enter input in editable fields. These inputs are generally accepted by the application for performing specific functions and display desired results. One of the most common editable fields, that we can see in most of the applications in daily u
3 min read
How to Create an ImageButton in Android? Nowadays, image buttons play a big role in making the android application more interactive and user-friendly. Be it any social media app like Instagram or Facebook or any shopping app or streaming app, each application uses this feature widely. In this article, we will take a look at the implementat
3 min read
How to Remove an Image from ImageView in Android? ImageView in Android is a UI element used to display all types of pictures, images, and drawable. So if the width and height of the ImageView are set to wrap content, then the ImageView shall occupy the area on the screen equivalent to the image dimensions. So if we wish to collapse an ImageView as
3 min read
How to Add Text Drawable to ImageView in Android? In many android apps, you will get to see a feature in which you can see a simple text is displayed inside an ImageView or you can get to see that a text is displayed in a specific image or a shape. Mostly this type of view is seen in the Contacts application which is present on your Android device.
5 min read
How to change Input Method Action Button in Android? In this article, IME(Input Method Action) Option is changed in android according to our requirement. Input Method Action Button is located in the bottom right corner of the soft keyboard. By default, the system uses this button for either a Next or Done action unless your text field allows multi-lin
2 min read
Android Jetpack Compose Button with Icon and Text Many times in android applications while using a button we have to display an image along with the text in our button. So that users will get to know about what the button actually does rather than simply displaying icons within the button. In this article, we will take a look at How to combine text
2 min read
How to Add Image on EditText in Android? In Android, An EditText is an overlay over a TextView that makes it editable using text by invoking a soft keyboard in run time. It is generally implemented to collect text data from the user. EditText is most commonly used in forms that require users to fill in details and for passing a search quer
3 min read
How to Set Buttons Inside an Alert Dialog in Android? In this article, we are going to see how can we set two buttons inside an Alert Dialog. For example, we can see when an alert dialog is pop up then their two types of buttons available one is the Ok or Positive Button another one is Cancel or Negative Button. Alert dialogs are most frequently used i
4 min read