Android Image Button with Text Example in both Java and Kotlin. In this blog learn how to create an Image Button with text in Android Studio using XML code.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

Though we have a widget in Android Studio known as Android ImageButton, but an ImageButton can’t have an image and a text together.

So if you’re building an app where you want to show the user the image and text both on a button, there is a smarter way to achieve the result as shown below using a RelativeLayout in Android.

android image button with text
Android Image Button with Text

Understanding Image Button Layout

To create a custom image button with a text we will create a relative layout with a custom background. Inside the relative layout, there will be an ImageView and a textView widget.

Creating a custom background for Button

We will first start with crating a custom background for our image button. Here is the XML code to create custom background.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="@color/colorAccent" android:endColor="@color/colorAccent"  />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dp" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="7dip" />
            <stroke android:width="0dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="@color/colorAccent" android:endColor="@color/colorAccent"  />
        </shape>
    </item>
</selector>

To know more about Custom Backgrounds in android click here.

Android Image Button (XML Code)

Now lets code the android image button with textView inside it.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/image_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/round_btn"
        tools:layout_editor_absoluteX="9dp"
        tools:layout_editor_absoluteY="26dp">

        <ImageView
            android:layout_margin="10dp"
            android:id="@+id/image"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_computer_black_24dp"/>

        <TextView
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/image"
            android:layout_margin="10dp"
            android:fontFamily="sans-serif-smallcaps"
            android:textStyle="bold"
            android:paddingStart="20dp"
            android:paddingEnd="20dp"
            android:text="Connect to Laptop"
            android:textAllCaps="false"
            android:textColor="#FFF"
            android:textSize="20sp" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

As you can interpret from the code above, we have used an android relative layout inside which we have an ImageView and a TextView both together formaing an Image Button for our project.

Custom Image Button Java Code

Here is an OnClickListener Java Code for our custom image button

package com.aaveti.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        RelativeLayout compBtn = findViewById(R.id.image_btn);
        compBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("I am an Image Button");
            }
        });

    }

    void showToast(String msg){
        Toast.makeText(MainActivity.this,"The day of the week is " + msg,Toast.LENGTH_LONG).show();
    }
}

Custom Image Button Kotlin Code

Here is an OnClickListener Kotlin Code for our custom image button

package com.aaveti.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        RelativeLayout compBtn = findViewById(R.id.image_btn);
        compBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("I am an Image Button");
            }
        });

    }

    void showToast(String msg){
        Toast.makeText(MainActivity.this,"The day of the week is " + msg,Toast.LENGTH_LONG).show();
    }
}

TaDa! That’s all. You’re done with creating your own Custom Image Button for your Android Project.

However, if you want to add a custom more styling like a gradient effect to your image button, view here.

Is Relative Layout something new to you or you want to refresh your knowledge about it? You can View some of our more detailed tutorial with illustrations about Relative Layout here.

1 comment
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like