How to Change the Shape of ImageButton in Android?

Last Updated : 16 Oct, 2021

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

Circular
Rectangular
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:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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:

android:background="@drawable/custombutton1"
android:background="@drawable/custombutton2"
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:

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:

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