How to make a circular Button?

Question

I'm a new to Android Development. While working on Android Studio 2.2, I tried to create a circular Button. As read from here, I tried to create a new Drawable Resource File. But I was unable to change Root Element to Shape. There was no such options. Could anyone help?

Yes, here are the rules: http://stackoverflow.com/help/how-to-ask — Peter Bruins, May 15 '17 at 06:21

score 2 · Answer 1 · answered May 15 '17 at 06:27

There are two solutions. Floating Action Button: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

else: You create a oval shape in xml. and put that shape as background on button and make sure button have equal layout_height and layout_width.

Example: oval_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval">

    <solid android:color="@color/colorAccent"/>

</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

  <Button
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:background="@drawable/oval_shape"/>



</FrameLayout>

score 0 · Answer 2 · answered May 15 '17 at 05:58

0

No option is needed here. Just use <shape>.
Check this example:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorPrimary" />
    <corners android:radius="@dimen/btn_radius" />
</shape>

answered May 15 '17 at 05:58

2hamed

8,719
13
69
112

As you said, I created the file. But it contained.. ` ` – Clicker May 15 '17 at 06:01
@JosephVM just replace everything with what you want. Doesn't have to be a `selector`. – 2hamed May 15 '17 at 06:03
OK.. That worked. Thanks @Hamed. Meanwhile, can you clarify what is a **Root Element**? Also what is a **Selector**? I like to learn more about these. – Clicker May 15 '17 at 06:08
The root element is the first element after the ` – 2hamed May 15 '17 at 06:10

score 0 · Answer 3 · answered May 15 '17 at 06:02

Use xml drawable like this:

Save the following contents as round_button.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="oval">
        <solid android:color="#fa09ad"/>
    </shape>
</item>
<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="#c20586"/>
    </shape>
</item>

And set it as background of Button in xml like this:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

I changed `android:shape="oval"` to `android:shape="ring"`. But nothing in preview?? — Clicker, May 15 '17 at 06:16

score 0 · Answer 4 · answered May 15 '17 at 06:07

0

You are probably looking for the FloatingActionButton It is available in the support-library. The documation of the class.

answered May 15 '17 at 06:07

Rockney

10,380
2
20
26

How to make a circular Button?

4 Answers4