create custom curved in a layout, like this image

Question

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?

thanks saaj, What do you mean by code?Would you like to introduce me a site about this? — Ariya Darvishi, Nov 15 '17 at 09:47
Can't your designer create the assets for you? As VectorDrawable or PNG's? — Christopher, Nov 15 '17 at 09:56

score 1 · Accepted Answer · answered Nov 15 '17 at 10:08

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 :)

create custom curved in a layout, like this image

1 Answers1

Linked