how to create a circular imageButton in android?

Question

Guys i have created a imageButton in my layout file and set a circular png image as its background.but when i am running my application, its displaying me a square button with my given image placed in the middle of it.

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/sliderr" />

you can do this by code. – Ankit Sharma Jan 21 '15 at 12:35 — Ankit Sharma, Jan 21 '15 at 12:35

score 35 · Accepted Answer · answered Jan 21 '15 at 12:32

35

add android:background="@null"

answered Jan 21 '15 at 12:32

klimat

24,711
7
63
70

5

This solution is good and simple, but if you want to add Ripple Effect to your ImageButton, this might not be the best solution, as the ripple effect will still run through the whole square, not only the image. – Vinícius Queiroz Nov 29 '18 at 19:47
2

android:background="?selectableItemBackgroundBorderless" android:padding="10dp" adding this will create round imagebutton with ripples – karatuno Sep 01 '20 at 16:55
@ViniciusQueiroz you're right. The answer is older than ripples in Android SDK though :) – klimat Sep 02 '20 at 08:17

score 15 · Answer 2 · edited Mar 19 '20 at 11:04

Make a new shape XML in res/drawable/round_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient 
        android:startColor="#FFFF0000" 
        android:endColor="#80FF00FF"
        android:angle="270" />
</shape>

Use this shape as the button's background:

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/round_button"
    android:src="@drawable/sliderr" />

You may also want to add android:scaleType="fitCenter" to your button to make the image the same size as the button, and android:adjustViewBounds="true" if your image has unequal height/width.

score 7 · Answer 3 · answered Jan 21 '15 at 12:35

try to add this xml..

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="8dip"
    android:bottomLeftRadius="8dip"  
    android:topRightRadius="8dip"
    android:topLeftRadius="8dip"/>
</shape>

how to create a circular imageButton in android?

3 Answers3

Linked