Round Top Left/Right Corner CardView Android Not work

Question

I have a material cardview as a root item. I want to add rounded top left and right to it. I added these attributes to its style but it is changed a little and not work properly.

ItemForRV:

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.card.MaterialCardView
    android:layout_width="@dimen/_150sdp"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardViewRoundedtop"
    xmlns:android="http://schemas.android.com/apk/res/android">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
 >


            <com.google.android.material.textview.MaterialTextView
                android:background="@color/primaryColor"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@id/imgFastfood"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                tools:text="FastFood"
                android:id="@+id/TVNameCategory"
                />


            <ImageView
                app:layout_constraintTop_toBottomOf="@id/TVNameCategory"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_110sdp"
                tools:src="@drawable/fastfood"
                android:id="@+id/imgFastfood"
                />

        </androidx.constraintlayout.widget.ConstraintLayout>


    </com.google.android.material.card.MaterialCardView>

Style:

<style name="CardViewRoundedtop" parent="Widget.MaterialComponents.CardView">

<item name="android:topLeftRadius">16dp</item>
    <item name="android:topRightRadius">16dp</item>
    <item name="android:bottomLeftRadius">0dp</item>
    <item  name="android:bottomRightRadius">0dp</item>

</style>

P.S: I read about a bug that I had to change bottom left/right radius to 1dp. it did not help at all.

Now:

Something I expect:

for showing here I used app:cardCornerRadius="16dp" and it is set all four corner.

Edit: I used "cornerSizeTopRight". it seems it works in different way.

Check this question: https://stackoverflow.com/questions/54688737/different-corner-radius-values-for-a-materialcardview — SlothCoding, Jan 30 '21 at 12:59
@SlothCoding as I found out cornerSizeTopRight is worked but not the way I want. Not Like CornerRadius. I Uplode the result in question. — NimaAzhd, Jan 30 '21 at 13:36
Because your picture is not rounded. Try using scale = "centerCrop" on ImageView. I always use RelativeLayout inside the CardView and scale image to centerCrop and then it works. — SlothCoding, Jan 30 '21 at 15:45
@SlothCoding . No. It is not about rounded ImageView. As you see I use TextView in top of cardview but it is not clipping. I saw this approach before in stackoverflow. It is just clipping root item ,here CardView, does not act like CornerRadius to clip all item inside root item . I think one approach is creating custom class and extend cardView to modify it. Tnx anyway. — NimaAzhd, Jan 30 '21 at 16:18

score 1 · Accepted Answer · edited Jan 31 '21 at 18:55

Well, I found a solution for you. Just change the background color from TextView to CardView. So delete the next line from MaterialTextView

android:background="@color/colorPrimary"

and add these lines to your MaterialCardView:

app:cardBackgroundColor="@color/colorPrimary"
app:cardPreventCornerOverlap="false"

Also in your ImageView add this:

android:scaleType="centerCrop"

After that you'll get this:

This is my full XML code:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    style="@style/MyCardView"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:cardBackgroundColor="#EDC911"
    app:cardPreventCornerOverlap="false"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.textview.MaterialTextView
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/imgFastfood"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            tools:text="FastFood"
            android:id="@+id/TVNameCategory"/>

        <ImageView
            app:layout_constraintTop_toBottomOf="@id/TVNameCategory"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:layout_height="110dp"
            tools:src="@drawable/Screenshot_1"
            android:id="@+id/imgFastfood"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

EDIT:

If your image is transparent and the background is yellowish, just add this line to your ImageView

android:background="@android:color/white

And this is in style.xml

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

Yeah It is working but in other situations and more complex layout , I'm not sure that it is a efficient way. — NimaAzhd, Jan 31 '21 at 18:40

Round Top Left/Right Corner CardView Android Not work

1 Answers1