create custom curved in a layout, like this image

Issue

First of all, Forgive me, my English is not good. I want to design a custom xml layout like below:

I am trying to create top curved, but I don't know how it designed!

This my output:

and my xml code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:top="100dp"
    android:bottom="10dp">

    <shape android:shape="rectangle">
        <stroke
            android:width="3dp"
            android:color="#000000" />
        <solid android:color="@android:color/background_light" />
        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="0dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp" />

    </shape>
</item>

And I have another question: There is a site that can make this design online?

Solution

That shape is to complex for a shape xml.

Easy/Fast solution: create a VectorDrawable or any other drawable and import it to your project.

Complex/Time consuming option: you can start by playing with Bezier curves. Since your curve is symmetric, you can first take care of half of your image and then mirror the curve you did on the first half. There are many examples on how to work with bezier curves, but this will be time consuming, you need to understand the concept, and keep testing to achieve what you want.

Best approach is to have a VectorDrawable: fast to get results, clean approach, no need to write a single line of code :)

Answered By - Bugdr0id