Search code examples
androidxmlkotlinandroid-cardview

Rounded corners in a card view won't work at the bottom of image with a text view

I am trying to get a card view so that I get a rounded corners image with a text under it but the thing is, when I add the text, since they are both inside of the rounded corners card view, the image is not rounded at the bottom (which is what I need). How would I accomplish that?

This is the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="16dp">

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

                <ImageView
                    android:id="@+id/iv_news"
                    android:layout_width="300dp"
                    android:layout_height="200dp"
                    android:src="@drawable/background_shape"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/news_title"
                    android:textColor="@color/black"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textAlignment="center"
                    android:layout_marginTop="5dp"/>

        </LinearLayout>

</androidx.cardview.widget.CardView>

The image (I need the bottom corners of the image also rounded): enter image description here

Solution

  • Try to put this code in your "@drawable/background_shape". Just tried it and it all working fine.

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
</shape>