How to create corner radius in top left and bottom right in android?

Question

How to create a corner radius in the top left and bottom right in android? Like this

My code is

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/bg_layout">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true"
                android:layout_margin="@dimen/twenty_sp"
                android:text="@string/sign_in"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/thirty_sp" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_layout_white"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/ten_sp"
                    android:orientation="vertical"
                    android:padding="@dimen/ten_sp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:text="@string/phone_number"
                        android:textColor="@color/colorBlack" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/five_sp"
                        android:orientation="horizontal">

                        <Spinner
                            android:id="@+id/main_spinner_coutry"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/fifty_sp"
                            android:entries="@array/country_code"
                            android:prompt="@array/country_code"
                            android:spinnerMode="dropdown" />

                        <AutoCompleteTextView
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/fifty_sp"
                            android:background="@drawable/bg_edt"
                            android:digits="0123456789"
                            android:ems="10"
                            android:hint="@string/_9876543210"
                            android:imeOptions="actionGo"
                            android:inputType="phone"
                            android:maxLength="10" />
                    </LinearLayout>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/ten_sp"
                    android:orientation="vertical"
                    android:padding="@dimen/ten_sp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:text="@string/password"
                        android:textColor="@color/colorBlack" />

                    <EditText
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/fifty_sp"
                        android:layout_margin="@dimen/five_sp"
                        android:background="@drawable/bg_edt"
                        android:hint="@string/_9876543210"
                        android:inputType="textPassword" />

                </LinearLayout>


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/ten_sp"
                android:orientation="vertical"
                android:padding="@dimen/ten_sp">

                <Button
                    android:id="@+id/main_btn_signin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bg_btn"
                    android:padding="@dimen/ten_sp"
                    android:text="@string/sign_in"
                    android:textAllCaps="false"
                    android:textColor="@color/colorWhite"
                    android:layout_margin="@dimen/ten_sp"/>

                <TextView
                    android:layout_margin="@dimen/ten_sp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="@dimen/ten_sp"
                    android:text="@string/forgot_password"
                    android:textColor="@color/colorAccent" />

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Background drawable is

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="@color/colorWhite" />
    <corners
        android:topRightRadius="30dp"
         />

</shape>

Show as the picture I want to top left corner and bottom right corner above code work but it show only one corner with background color, I try to create the above picture like but It can't work...

Answer 1

creating a background drawable with two colors i.e, white and purple

layout_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="300dp">
    <shape android:shape="rectangle" >
        <size android:height="300dp" />
        <solid android:color="#ffffff" />
    </shape>
</item>

<item android:top="300dp">
    <shape android:shape="rectangle" >
        <size android:height="50dp" />
        <solid android:color="##2d39a1" />
    </shape>
</item>

set this drawable as background for your layout

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/layout_background"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/purple_background">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true"
                android:layout_margin="@dimen/twenty_sp"
                android:text="@string/sign_in"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/thirty_sp" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/white_background"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/ten_sp"
                    android:orientation="vertical"
                    android:padding="@dimen/ten_sp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:text="@string/phone_number"
                        android:textColor="@color/colorBlack" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/five_sp"
                        android:orientation="horizontal">

                        <Spinner
                            android:id="@+id/main_spinner_coutry"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/fifty_sp"
                            android:entries="@array/country_code"
                            android:prompt="@array/country_code"
                            android:spinnerMode="dropdown" />

                        <AutoCompleteTextView
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/fifty_sp"
                            android:background="@drawable/bg_edt"
                            android:digits="0123456789"
                            android:ems="10"
                            android:hint="@string/_9876543210"
                            android:imeOptions="actionGo"
                            android:inputType="phone"
                            android:maxLength="10" />
                    </LinearLayout>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/ten_sp"
                    android:orientation="vertical"
                    android:padding="@dimen/ten_sp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:text="@string/password"
                        android:textColor="@color/colorBlack" />

                    <EditText
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/fifty_sp"
                        android:layout_margin="@dimen/five_sp"
                        android:background="@drawable/bg_edt"
                        android:hint="@string/_9876543210"
                        android:inputType="textPassword" />

                </LinearLayout>


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/ten_sp"
                android:orientation="vertical"
                android:padding="@dimen/ten_sp">

                <Button
                    android:id="@+id/main_btn_signin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bg_btn"
                    android:padding="@dimen/ten_sp"
                    android:text="@string/sign_in"
                    android:textAllCaps="false"
                    android:textColor="@color/colorWhite"
                    android:layout_margin="@dimen/ten_sp"/>

                <TextView
                    android:layout_margin="@dimen/ten_sp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="@dimen/ten_sp"
                    android:text="@string/forgot_password"
                    android:textColor="@color/colorAccent" />

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

purple_background.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="@color/colorPurple" />
    <corners
        android:bottomLeftRadius="30dp"
         />

</shape>

white_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="@color/colorWhite" />
    <corners
        android:topRightRadius="30dp"
         />

</shape>

adjust the height in the layout_background.xml file if the background doesn't fit. I hope you got it..

Answer 2

With the Material Components Library you can define custom CornerTreatment.
For example you can use a CardView and apply to it a ShapeAppearanceModel.

<LinearLayout
    android:background="@color/colorPrimaryLight"
    android:clipChildren="false"
    android:clipToPadding="false"
    ..>

   <com.google.android.material.card.MaterialCardView
       android:id="@+id/card"
       app:cardCornerRadius="32dp"
       app:cardBackgroundColor="@color/colorPrimaryDark"
       ../>

</LinearLayout>

Then:

MaterialCardView cardView = findViewById(R.id.card);
        
cardView.setShapeAppearanceModel(cardView.getShapeAppearanceModel().toBuilder()
                .setTopLeftCorner(new CrazyCornerTreatment())
                .setBottomLeftCorner(CornerFamily.ROUNDED,0f)
                .setBottomRightCorner(CornerFamily.ROUNDED,0f)
                .build());

The top left corner can be defined with:

class CrazyCornerTreatment : CornerTreatment() {

    override fun getCornerPath(
            shapePath: ShapePath,
            angle: Float,
            interpolation: Float,
            radius: Float
    ) {

        val interpolatedRadius = radius * interpolation
        shapePath.reset(0f, -radius * interpolation, 270f,270 -angle)
        shapePath.addArc(
                0f,
                -2*interpolatedRadius,
                2*interpolatedRadius,
                0f,
                180f,
                 - angle)

    }
}

Answer 3

A drawable shape is a very good solution for this. You could also slightly reframe it and use the bottom left corner of your top widget and the upper right of your 2nd widget. If the background is white in the top and purple below that, you will get the desired result while using only the "normal" corner radius properties.

Answer 4

You would need to create a drawable shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#5089fa" />
<size
    android:width="82dp"
    android:height="82dp" />
<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" />
<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="8dp"
    android:topLeftRadius="8dp"
    android:topRightRadius="0dp" />

Set that drawable shape as your background and it would result in something like:

Odd Rounded Corners