how to make oval button in android?

Question

i have this button i saw on a website and I want to recreate it in xml. But, i cannot get the dimensions right to match it exactly. Below is the code i have so far, but it's not matching the shape exactly. hope someone can help!

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/white"></solid>
    <corners
        android:radius="600dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
    <stroke
        android:width="3px" android:color="@color/salmon_main"/>
</shape>

score 18 · Answer 1 · edited May 23 '17 at 12:10

This question already asked click there to check

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

  <corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:radius="60dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp" />

  <solid android:color="#CFCFCF" />

  <padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

  <size
    android:height="60dp"
    android:width="270dp" />

</shape>

i wasnt the one who minused it. – Dr.Android Mar 14 '17 at 04:46 — Dr.Android, Mar 14 '17 at 04:46

score 2 · Accepted Answer · answered Mar 14 '17 at 04:21

2

Try this,

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

        <corners android:radius="17dp" />

        <gradient
            android:angle="90" />
        <solid android:color="#FFFFFF"/>
        <stroke
            android:width="2dp"
            android:color="#FFFFFF" />

    </shape>

answered Mar 14 '17 at 04:21

Komal12

3,340
4
16
25

i copy pasted your code, but your shape is really ovally in the xml view. and looks nothing like the image i posted above. – Dr.Android Mar 14 '17 at 04:25
Mohit Singh (above) answered the question using a drawable xml file – Dr.Android Mar 14 '17 at 04:29

score 2 · Answer 3 · edited Mar 14 '17 at 04:31

2

Create an XML file in the drawable folder:

oval_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval" >
    <gradient 
        android:startColor="#6586F0"
        android:centerColor="#D6D6D6"
        android:endColor="#4B6CD6"
        android:angle="90"/>
</shape>

edited Mar 14 '17 at 04:31

Pang

9,564
146
81
122

answered Mar 14 '17 at 04:23

YouGoTag Technology Solutions

21
1

i tried your code, but in the xml view it just shows a rectangle with its corners slightly rounded, and not particularly the shape i made above. – Dr.Android Mar 14 '17 at 04:26

score 1 · Answer 4 · edited May 08 '21 at 08:04

Try this, this is also with ripple effect

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/press">
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="#FF9800" />
            <corners android:radius="30dp" />
            <stroke android:width="1dip" android:color="#FF9800" />
            <gradient android:angle="-90" android:startColor="#FF9800" android:endColor="#FF9800"  />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="30dp" />
            <stroke android:width="1dip" android:color="#FF9800" />
            <solid android:color="#FF9800"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="30dp" />
            <stroke android:width="1dip" android:color="#FF9800" />
            <gradient android:angle="-90" android:startColor="#FF9800" android:endColor="#FF9800" />
        </shape>
    </item>
</ripple>

how to make oval button in android?

4 Answers4