imagebutton

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

imagebutton

Android Image Button with Text Example | Java & Kotlin