Nice and clean idea to clip MaterialCardView Conrners individually.
shape.xml in values folder and make sure your inherit from Theme.MaterialComponents.Light parent theme.similar result done by different idea here
Copyright 2019 Google LLC
| <?xml version="1.0" encoding="utf-8"?> | |
| <!-- | |
| ~ Copyright 2018 Google LLC | |
| ~ | |
| ~ Licensed under the Apache License, Version 2.0 (the "License"); | |
| ~ you may not use this file except in compliance with the License. | |
| ~ You may obtain a copy of the License at | |
| ~ | |
| ~ https://www.apache.org/licenses/LICENSE-2.0 | |
| ~ | |
| ~ Unless required by applicable law or agreed to in writing, software | |
| ~ distributed under the License is distributed on an "AS IS" BASIS, | |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| ~ See the License for the specific language governing permissions and | |
| ~ limitations under the License. | |
| --> | |
| <layout xmlns:android="http://schemas.android.com/apk/res/android" | |
| xmlns:app="http://schemas.android.com/apk/res-auto" | |
| xmlns:tools="http://schemas.android.com/tools"> | |
| <data> | |
| <variable | |
| name="plant" | |
| type="com.example.android.advancedcoroutines.Plant"/> | |
| </data> | |
| <com.example.android.advancedcoroutines.ui.MaskedCardView | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:layout_marginStart="@dimen/card_side_margin" | |
| android:layout_marginEnd="@dimen/card_side_margin" | |
| android:layout_marginBottom="@dimen/card_bottom_margin" | |
| app:cardElevation="@dimen/card_elevation" | |
| app:cardPreventCornerOverlap="false" | |
| app:shapeAppearanceOverlay="@style/ShapeAppearance.Sunflower.Card"> | |
| <androidx.constraintlayout.widget.ConstraintLayout | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content"> | |
| <ImageView | |
| android:id="@+id/plant_item_image" | |
| android:layout_width="0dp" | |
| android:layout_height="@dimen/plant_item_image_height" | |
| android:contentDescription="@string/a11y_plant_item_image" | |
| android:scaleType="centerCrop" | |
| app:imageFromUrl="@{plant.imageUrl}" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toTopOf="parent" /> | |
| <TextView | |
| android:id="@+id/plant_item_title" | |
| android:layout_width="0dp" | |
| android:layout_height="wrap_content" | |
| android:layout_marginBottom="@dimen/margin_normal" | |
| android:layout_marginTop="@dimen/margin_normal" | |
| android:text="@{plant.name}" | |
| android:textAppearance="?attr/textAppearanceListItem" | |
| android:gravity="center_horizontal" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toBottomOf="@id/plant_item_image" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| tools:text="Tomato"/> | |
| </androidx.constraintlayout.widget.ConstraintLayout> | |
| </com.example.android.advancedcoroutines.ui.MaskedCardView> | |
| </layout> |
| /* | |
| * Copyright 2019 Google LLC | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * https://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| */ | |
| package com.example.android.advancedcoroutines.ui | |
| import android.content.Context | |
| import android.graphics.Canvas | |
| import android.util.AttributeSet | |
| import com.google.android.material.R | |
| import com.google.android.material.card.MaterialCardView | |
| import com.google.android.material.shape.ShapeAppearanceModel | |
| import com.google.android.material.shape.ShapeAppearancePathProvider | |
| import android.annotation.SuppressLint | |
| import android.graphics.Path | |
| import android.graphics.RectF | |
| /** | |
| * A Card view that clips the content of any shape, this should be done upstream in card, | |
| * working around it for now. | |
| */ | |
| class MaskedCardView @JvmOverloads constructor( | |
| context: Context, | |
| attrs: AttributeSet? = null, | |
| defStyle: Int = R.attr.materialCardViewStyle | |
| ) : MaterialCardView(context, attrs, defStyle) { | |
| @SuppressLint("RestrictedApi") | |
| private val pathProvider = ShapeAppearancePathProvider() | |
| private val path: Path = Path() | |
| private val shapeAppearance: ShapeAppearanceModel = ShapeAppearanceModel( | |
| context, | |
| attrs, | |
| defStyle, | |
| R.style.Widget_MaterialComponents_CardView | |
| ) | |
| private val rectF = RectF(0f, 0f, 0f, 0f) | |
| override fun onDraw(canvas: Canvas) { | |
| canvas.clipPath(path) | |
| super.onDraw(canvas) | |
| } | |
| @SuppressLint("RestrictedApi") | |
| override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { | |
| rectF.right = w.toFloat() | |
| rectF.bottom = h.toFloat() | |
| pathProvider.calculatePath(shapeAppearance, 1f, rectF, path) | |
| super.onSizeChanged(w, h, oldw, oldh) | |
| } | |
| } |
| <?xml version="1.0" encoding="utf-8"?> | |
| <!-- | |
| ~ Copyright 2019 Google LLC | |
| ~ | |
| ~ Licensed under the Apache License, Version 2.0 (the "License"); | |
| ~ you may not use this file except in compliance with the License. | |
| ~ You may obtain a copy of the License at | |
| ~ | |
| ~ https://www.apache.org/licenses/LICENSE-2.0 | |
| ~ | |
| ~ Unless required by applicable law or agreed to in writing, software | |
| ~ distributed under the License is distributed on an "AS IS" BASIS, | |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| ~ See the License for the specific language governing permissions and | |
| ~ limitations under the License. | |
| --> | |
| <resources> | |
| <style name="ShapeAppearance.Sunflower.Card" parent="ShapeAppearance.MaterialComponents"> | |
| <item name="cornerFamily">rounded</item> | |
| <item name="cornerSizeTopLeft">0dp</item> | |
| <item name="cornerSizeTopRight">12dp</item> | |
| <item name="cornerSizeBottomRight">0dp</item> | |
| <item name="cornerSizeBottomLeft">12dp</item> | |
| </style> | |
| <!-- Add plant button --> | |
| <dimen name="button_corner_radius">12dp</dimen> | |
| </resources> |