Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!