Custom drawable angle android

Question

First of all this is not a duplicate question. I want to achieve this custom design in android using drawable. How to achieve the arc effect as in the image??

Till now what i have done:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-5"
            android:pivotX="0%"
            android:pivotY="100%"
            android:toDegrees="50">
            <shape android:shape="rectangle">
                <solid android:color="@color/light_pink" />
                <corners android:bottomLeftRadius="10dp"
                    android:bottomRightRadius="20dp"/>
            </shape>
        </rotate>
    </item>
    <item android:bottom="50dp">
        <rotate
            android:fromDegrees="0"
            android:pivotX="10%"
            android:pivotY="-100%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="@color/light_pink" />
            </shape>
        </rotate>
    </item>

</layer-list>

Output:

Issue: The image is overlapping the background. I have also set clipChildren to the parent layout but no effects.

My Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/top_arc"
        android:clipChildren="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:src="@drawable/no_image_male" />
    </RelativeLayout>

</RelativeLayout>

Just for info: I have SVG for the same but don't know how to prevent overlapping.

Answer 1

Here you go with the solution. Just replace the colours.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/top_rl_gradient"/>
<item
    android:bottom="-200dp"
    android:left="0dp"
    android:right="-300dp"
    android:top="200dp">
    <rotate
        android:fromDegrees="-10"
        android:pivotX="0%"
        android:pivotY="100%">
        <shape
            android:shape="rectangle">
            <solid
                android:color="@color/white"/>
        </shape>
    </rotate>
</item>

You can adjust the angle and the height of the drawable form the rotate tag. Hope this helps you.