Android Studio - round button inside square

Question

I want to make a round button in Android Studio. I have created a separate xml that I saved in drawable called round_button.xml

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

Then I used it in my button function.

<Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/round_button"
        android:text="ME"
        android:id="@+id/button7"
        android:layout_below="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="119dp"

        android:layout_alignParentEnd="false" />

The problem is that my round button seems to be inside a square shape. How can I get rid of it? Any ideas?

enter image description here

Add a selector as background and in that selector link to your shape http://stackoverflow.com/questions/5790454/disable-button-with-custom-background-android — A.S., Mar 04 '15 at 12:06
tried ImageButton ? or use ImageView and make it clickable.. — Thilek, Mar 04 '15 at 12:09
This is a problem with the visual editor. It does not exist in the actual application, so no need to worry. — jyoonPro, Mar 04 '15 at 13:03

score 0 · Answer 1 · answered Mar 04 '15 at 12:07

You can use ImageButton that has the src attribute. Use that to set the drawable, and put the background to null.

 <ImageButton
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/round_button"
    android:background="@null"
    android:text="ME"
    android:id="@+id/button7"
    android:layout_below="@+id/textView4"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="119dp"
    android:layout_alignParentEnd="false" />

score 0 · Answer 2 · answered Mar 04 '15 at 12:14

If you want to use Button, you could define corners
http://developer.android.com/guide/topics/resources/drawable-resource.html#corners-element
for rectangle, for example:

<shape android:shape="rectangle" >
    <solid android:color="#002244" />
    <corners android:radius="15dp" />
</shape>

Android Studio - round button inside square

2 Answers2