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.
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
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