I want to implement this ui in android xml.
I have created a list layer like this for top view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="180dp"
android:left="50dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="110">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:bottom="430dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
</rotate>
</item>
</layer-list>
Result:
But I can't implement the bottom corner radius in this shape. How to implement these corners radius?
And here is the code for bottom view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="110">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="300dp">
<rotate android:fromDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp" />
</shape>
</rotate>
</item>
</layer-list>
Result:
And here is layout for screen:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/login_2_background"
android:padding="16dp">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="LOGIN"
android:textColor="@color/white"
android:textSize="20dp"
android:layout_marginBottom="16dp"
android:textStyle="bold" />
<RelativeLayout
android:id="@+id/form"
android:layout_below="@id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/card_login_2_shape">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EMAIL/MOBILE"
android:textStyle="bold"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_below="@id/form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/card_login_2_shape_2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EMAIL/MOBILE"
android:textStyle="bold"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Result:
But the top view fills the screen and bottom view not shown and if I set margin to one of the layouts it's not working correctly.
How can I change this codes or write new shapes for this UI?