Android v7 CardView support: text representation of a header with a different background color does not spread until the edges

Question

I want to create a layout with CardView that contains a title with a different background color, similar to what is shown on the current Google Now screen (see below).

A darker colored caption (containing the text "iPhone 6") extends all the way to the edges and rounded corners of CardView.

I tried to create a similar CardView with the support-v7 library (android.support.v7.widget.CardView).

Screenshot below.

In my case, the blue background color of the header, however, does not completely extend to the edges of my CardView. On the left, top and right edges there is a small white frame (map background color). This is apparently due to the rounded corners of CardView.

How can I get the background color of my title (TextView) to fully expand to the edges and rounded corners of my CardView?

This is the relevant part of my xml layout file:

<android.support.v7.widget.CardView android:id="@+id/calendar_detail_time_card" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/calendar_detail_title_card" android:layout_margin="6dp" card_view:cardCornerRadius="3dp" card_view:cardUseCompatPadding="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@color/white" android:background="@color/primaryColor" android:padding="8dp" android:textSize="@dimen/calendar_detail_large" android:textStyle="bold" android:id="@+id/header_when" android:text="@string/header_when" tools:text="When?"/> <ImageButton android:id="@+id/calendar_detail_add_to_calendar_button" style="?android:borderlessButtonStyle" android:layout_width="@dimen/calendar_detail_add_to_calendar_image" android:layout_height="@dimen/calendar_detail_add_to_calendar_image" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:src="@drawable/ic_calendar_red" /> <TextView android:id="@+id/calendar_detail_time" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/header_when" android:padding="8dp" tools:text="Time" /> </RelativeLayout> </android.support.v7.widget.CardView> 

Answer 1

Add this code to your map in xml:

 card_view:cardPreventCornerOverlap="false" 

And now it will spread to the end.