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?
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~
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With