3

I want to implement this ui in android xml.

enter image description here

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:

enter image description here

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:

enter image description here

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:

enter image description here

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?

Mohamadamin
  • 564
  • 5
  • 16
  • 1
    You will find your answear here: https://stackoverflow.com/questions/52036551/how-to-design-tilted-diagonal-or-rounded-rectangle-drawable-resource-file-for-lo – Dziki Arbuz Oct 27 '21 at 07:39

0 Answers0