CODEWITHSUNDEEP
androidxmlshapes
Clicker
Clicker

Reputation: 121

How to make a circular Button?

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?

Upvotes: 0

Views: 9512

Answers (4)

KKSINGLA
KKSINGLA

Reputation: 1344

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>

Upvotes: 2

Rockney
Rockney

Reputation: 10650

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

Upvotes: 0

Hammad Ali Khan
Hammad Ali Khan

Reputation: 138

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" />

Upvotes: 0

2hamed
2hamed

Reputation: 9047

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>

Upvotes: 0

Related Questions