Open In App

How to Change the Shape of ImageButton in Android?

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 

 



Last Updated : 16 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads