Open In App

How to Change the Shape of ImageButton in Android?

Last Updated : 16 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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 the ImageButton is square. In this article, we will see how to change the default shape from Square to the following shapes 

  1. Circular
  2. Rectangular
  3. Square with curved edges

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Create a simple ImageButton in the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context=".MainActivity">
 
    <ImageButton
        android:id="@+id/imagebutton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/gfg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>


 
 

Step 3: Create Drawable Resource File 

 

Go to the app > res > drawbe > right-click > New > Drawable Resource File and name the file as custom_button1, custom_button2, cutom_button3 and apply them one by one in ImageButton like this:

 

  1. android:background=”@drawable/custombutton1″
  2. android:background=”@drawable/custombutton2″
  3. android:background=”@drawable/custombutton3″

 

1. custombutton1.xml file (Circular) 

 

XML




<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 
    <solid android:color="@color/white"/>
    <corners android:radius="500dp"/>
    <size android:width="100dp"
          android:height="100dp"/>
   
</shape>


 
 

Output:

 

fig = circular image button 

 

2. custombutton2.xml file (Rectangular) 

 

XML




<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 
    <solid android:color="@color/white"/>
    <size android:height="50dp"
          android:width="100dp"/>
   
</shape>


 
 

Output:

 

fig = rectangular image button 

 

3. custombutton3.xml file (Square with curved edges)

 

XML




<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 
    <solid android:color="@color/white"/>
    <corners android:radius="50dp"/>
 
</shape>


 
 

Output:

 

fig = square with curved edges 

 



Similar Reads

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 implementation of this section in Android. We will be buildin
3 min read
How to Combine Text and Image on a Button or ImageButton in Android?
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 butto
4 min read
Dynamic ImageButton in Kotlin
Android ImageButton is a user interface widget which is used to display a button having image and to perform exactly like button when we click on it but here, we add an image on Image button instead of text. There are different types of buttons available in android like ImageButton, ToggleButton etc. We can add an image to the button simply by usin
3 min read
ImageButton in Kotlin
Android ImageButton is a user interface widget which is used to display a button having image and to perform exactly like button when we click on it but here, we add an image on Image button instead of text. There are different types of buttons available in android like ImageButton, ToggleButton etc. We can add an image to the button simply by usin
3 min read
Different Ways to Change Android SDK Path in Android Studio
Android SDK is one of the most useful components which is required to develop Android Applications. Android SDK is also referred to as the Android Software Development Kit which provides so many features which are required in Android which are given below: A sample source code.An Emulator.Debugger.Required set of libraries.Required APIs for Android
5 min read
How to Change App Icon of Android Programmatically in Android?
In this article, we are going to learn how to change the App Icon of an App on the Button Click. This feature can be used when we have an app for different types of users. Then as per the user type, we can change the App Icon Dynamically. Step by Step Implementation Step 1: Create a New Project To create a new project in Android Studio please refer
3 min read
How to change the color of Action Bar in an Android App?
In this article, you will learn how to change the colour of the Action Bar in an Android App. There are two ways to change color. By changing styles.xml file: Just go to res/values/styles.xml file edit the xml file to change the color of action bar. Code for styles.xml is given below C/C++ Code &lt;resources&gt; &lt;!-- Base application theme. --
2 min read
How to change the Text Color of a Substring in android using SpannableString class?
In this article, we will learn about how to change the text color of a substring of a string. It is easy to change the color of the whole string but to change the color of a substring we have to use a special class SpannableString. But SpannableString class is not really helpful when it comes to change the background color of the text. So for that,
2 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-line text, in which case the action button is a carri
2 min read
How to Change the API SDK Level in Android Studio?
Generally, API level means the Android Version. This determines which version the developers are targeting their application and what is going to be the minimum level of the android version in their application will run. For setting the Minimum level and Maximum level android studio provides two terminologies. minSdkVersion: This means the minimum
2 min read
Article Tags :