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...
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)
}
}