Drawing custom oval and rectangle XML shape as buttom background

Question

I want to create custom button background that look like this:

I can't use corners attribute in rectangle shape because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.

I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Try like this:

             <Button
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="@drawable/test"
                android:text="Button"
                android:textColor="@color/black"
              />

and @drawable/test will be like this:

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

    <item
        android:left="0dp"
        android:right="-100dp"
        android:top="-30dp"
        android:bottom="-30dp">

        <shape android:shape="oval">
            <solid
                android:color="@android:color/white" />
        </shape>
    </item>


</layer-list>

Note: I know this is not the best solution. But for now this can help. and if you want to increase the width of Button then change the below attributes accordingly to fit your need.

android:top="-30dp"
android:bottom="-30dp"

and the result will look like this:

it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work) — Expiredmind, Nov 15 '18 at 15:06

score 0 · Answer 2 · edited Nov 19 '18 at 03:40

Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="3dp"
        android:color="#ffffff" />
    <corners android:radius="10dp" />
    <gradient
        android:angle="270"
        android:endColor="#2b74d2"
        android:startColor="#2b74d2"
        android:type="linear" />
</shape>

Drawing custom oval and rectangle XML shape as buttom background

2 Answers2