Add an image in the middle of button?

Question

So I have created a button in my layout, but I wanted it to be a circle. So I created an .xml drawable like this -

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#673ab7"/>
    <stroke android:width="2sp" android:color="#fff" />
</shape>

Then in the button bit in the layout i added this

android:background="@drawable/circle_button"

But now I wish to have an image inside the circler button. How can I achieve this? Can I simply add something in the drawable xml?

I've tried searching for answers but I am confused to what I should search for.

see my answer and give me feedback to it. – Zar E Ahmer Jul 15 '14 at 07:58 — Zar E Ahmer, Jul 15 '14 at 07:58

score 4 · Accepted Answer · answered Jul 15 '14 at 07:51

4

Try following:

<ImageButton
        android:id="@+id/imgBtn"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@drawable/circle_button"
        android:src="@drawable/image_to_insert"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

answered Jul 15 '14 at 07:51

A.Vynohradov

276
1
8

Thanks, I had to change circle_button to src and then I made background my image. seemed to work fine. – Robin Jul 15 '14 at 07:54
Glad, you found the solution. – A.Vynohradov Jul 15 '14 at 07:59
this solution has defects read this http://stackoverflow.com/questions/7719617/imageview-adjustviewbounds-not-working. – Zar E Ahmer Jul 15 '14 at 09:07

score 1 · Answer 2 · answered Jul 15 '14 at 07:53

Why don't you go for relativelayout. Just take relative layout having circle shaped image to its background. Only the thing is you need circle shaped image.

For example,

    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle">  //circular shaped image circle.png
    </RelativeLayout>

Finally you just have to apply listener to your layout. This will solve your problem.

Explain me how it takes an image in middle. Read the question once again and edit your answer. — Zar E Ahmer, Jul 15 '14 at 09:01

score 1 · Answer 3 · answered Jul 15 '14 at 07:54

1

The easiest way is to create a RelativeLayout instead of button and put your image inside the layout and set its attribute android:layout_centerInParent="true" to true;

so it will be in the middle of the RelativeLayout. And set the android:background="@drawable/circle_button" to the RelativeLayout. Now get the RelativeLayout using it id and add a click listener to RelativeLayout

answered Jul 15 '14 at 07:54

Zar E Ahmer

33,936
20
234
300

If correct answer is already present, then you don't need add same answer. You can just upvote to that answer. This is how stackoverflow works. – VVB Jul 15 '14 at 08:22
first of all take a name user3811114 . the given answer is not as correct as mine. And in stackoverflow you can submit multiple answer. so that you can find multiple approaches to get the work done. – Zar E Ahmer Jul 15 '14 at 08:55

Add an image in the middle of button?

3 Answers3