Persist corner radius of a CardView on setting background of a layout inside that CardView

Question

I've a CardView with some corner radius inside which are three relative layouts. When I set background of the layout whose top is aligned with the top of CardView, corner radius is lost.

How to keep corner radius?

Code:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="false"
    android:layout_centerHorizontal="false"
    android:layout_centerInParent="true"
    app:cardCornerRadius="10dp"
    android:clipToPadding="true"
    app:cardPreventCornerOverlap="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rlBase"
        android:clipChildren="true"
        android:clipToPadding="true"
        android:animateLayoutChanges="false">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/rlOverallPerformance"
            android:background="@color/lightBlue"
            android:clipToPadding="false"
            android:clipChildren="false">

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/rlRealizedValue"
            android:layout_below="@+id/rlOverallPerformance">

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/rlUnrealizedValue"
            android:layout_below="@+id/rlRealizedValue"
            android:elevation="1dp">

        </RelativeLayout>

    </RelativeLayout>

</android.support.v7.widget.CardView>

@dharmx for me it worked fine on the device. Only the preview wasn’t correct — Arsal, Nov 15 '17 at 09:56

score 0 · Answer 1 · answered Feb 23 '17 at 06:25

Surround your CardView with other ViewGroup element like FrameLayout, LinearLayout or RelativeLayout. Even I faced same problem, then it worked this way. I read it somewhere.

File: listitem_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include layout="@layout/listitem_screen_base" />
</RelativeLayout>

I am using <include> tag as I am using same layout at different places.

File: listitem_screen_base.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/windowBackground"
    app:cardCornerRadius="@dimen/rect_corner_radius"
    app:cardElevation="@dimen/cardview_default_elevation"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:id="@+id/ll_base"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <com.company.app.custom.CustomImageView
                android:id="@+id/img_poster"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@color/black3"
                app:calculation_type="height"
                app:ratio_height="@integer/inspire_img_height_ratio"
                app:ratio_width="@integer/inspire_img_width_ratio"
                app:riv_corner_radius_top_left="@dimen/rect_corner_radius"
                app:riv_corner_radius_top_right="@dimen/rect_corner_radius" />

            <com.company.app.custom.FontTextView
                android:id="@+id/lbl_new"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="20dp"
                android:background="@drawable/shape_rect_round_border_right_yellow_fill"
                android:paddingBottom="2dp"
                android:paddingEnd="6dp"
                android:paddingLeft="6dp"
                android:paddingRight="6dp"
                android:paddingStart="6dp"
                android:paddingTop="2dp"
                android:text="@string/s_new"
                android:textColor="?android:attr/textColorPrimary"
                android:textSize="9.72sp"
                app:customFont="@string/font_circular_book" />

        </FrameLayout>

        <com.company.app.custom.FontTextView
            android:id="@+id/lbl_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center_vertical"
            android:layout_marginBottom="13dp"
            android:layout_marginEnd="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="15dp"
            android:ellipsize="end"
            android:gravity="center_vertical|start"
            android:maxLines="2"
            android:minHeight="38dp"
            android:textAlignment="viewStart"
            android:textColor="?android:textColorPrimaryInverse"
            android:textSize="16sp"
            app:customFont="@string/font_circular_book" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="13dp"
            android:layout_marginEnd="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginStart="10dp">

            <com.company.app.custom.FontTextView
                android:id="@+id/lbl_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:textColor="?android:attr/textColorTertiary"
                android:textSize="12sp"
                app:customFont="@string/font_avenir_medium" />

            <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginEnd="14dp"
                android:layout_marginLeft="14dp"
                android:layout_marginRight="14dp"
                android:layout_marginStart="14dp"
                android:layout_toEndOf="@+id/lbl_time"
                android:layout_toRightOf="@+id/lbl_time"
                android:scaleType="centerInside"
                android:src="@drawable/dot" />

            <com.company.app.custom.FontTextView
                android:id="@+id/lbl_views"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@+id/dot1"
                android:layout_toRightOf="@+id/dot1"
                android:textColor="?android:attr/textColorTertiary"
                android:textSize="12sp"
                app:customFont="@string/font_avenir_medium" />

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginEnd="14dp"
                android:layout_marginLeft="14dp"
                android:layout_marginRight="14dp"
                android:layout_marginStart="14dp"
                android:layout_toEndOf="@+id/lbl_views"
                android:layout_toRightOf="@+id/lbl_views"
                android:scaleType="centerInside"
                android:src="@drawable/dot" />

            <com.company.app.custom.FontTextView
                android:id="@+id/lbl_tag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@+id/dot2"
                android:layout_toRightOf="@+id/dot2"
                android:textColor="@color/colorAccent"
                android:textSize="12sp"
                app:customFont="@string/font_avenir_medium" />

        </RelativeLayout>

    </LinearLayout>
</android.support.v7.widget.CardView>

My CardView is already inside a relative layout which I didn't mention in the code snippet I posted. I don't understand how is it going to solve the problem — Arsal, Feb 23 '17 at 06:37
change `app:cardPreventCornerOverlap="true"` from `app:cardPreventCornerOverlap="false"` — Jimit Patel, Feb 23 '17 at 08:44

Persist corner radius of a CardView on setting background of a layout inside that CardView

1 Answers1