CardView: Let child item overlap

Question

I have a problem with my RecyclerView. I want to design some CardViews that looks like this:

Therefore I need the ImageView on the top left to overlap the CardView. I already know the usage of negative margins but my problem mainly is

Overlaps in Cardviews get cropped of even when clipToPadding is set to false

Does anyone have a solution for this problem?

Answer 1

Just set ImageView (Twitter icon) elevation more higher than CardView elevation.

Set android:elevation="10dp" to ImageView and set card_view:cardElevation="2dp" to CardView.

Here is an example:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

        <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="20dp"
            card_view:cardElevation="2dp"
            card_view:cardCornerRadius="4dp"
            card_view:cardUseCompatPadding="false"
            card_view:cardPreventCornerOverlap="false">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/sample_1" />

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/image"
                    android:padding="8dp"
                    android:background="#CCFFFFFF"
                    android:text="This is simple title"
                    android:textColor="#000000" />
            </RelativeLayout>
        </android.support.v7.widget.CardView>

        <ImageView
            android:id="@+id/icon_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            android:elevation="10dp"
            android:src="@mipmap/ic_launcher"/>
    </RelativeLayout>

</RelativeLayout>

OUTPUT:

Hope this will help~

Answer 2

Child which have to Overlap CardView add this attribute to the child

Note : The child elevation must be greater than CardView elevation

android:elevation="10dp"