Search code examples
androidandroid-recyclerviewandroid-xmlandroid-cardviewclipping

Cannot prevent CardView in RecyclerView to clip childs


I'm trying to move an ImageView slightly out of the cardView, but the cardview keeps clipping the child.

I have following XML structure:

<RecyclerView>
    <CardView>
         <LinearLayout>
              <LinearLayout>
                   <ImageView/>
                   ...

I have set all containers with:

clipToPadding="false"
clipChildren="false"

And everything besides the RecyclerView got setClipToOutline="false".

On top the cardView has cardUseCompatPadding="true"

Android Studio predicts the following:
Screenshot out of Android Studio (SO prevents the image, since I'm new here with little reputation..)

But for whatever reason on my phone (Galaxy A3, Lineage OS, Android 9) the image view is still clipped.

Any idea how I can get the desired behavior not only in Android Studio but also on my phone?


UPDATE

card_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:cardView="http://schemas.android.com/tools">

<data>
    <variable name="..."
        type="..."/>
</data>

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:cardElevation="0dp"
    app:cardCornerRadius="5dp"
    app:cardUseCompatPadding="true"
    android:clipToPadding="false"
    android:clipChildren="false"
    cardView:setClipToOutline="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:clipChildren="false"
        cardView:setClipToOutline="false"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginBottom="5dp"
            android:clipToPadding="false"
            android:clipChildren="false"
            cardView:setClipToOutline="false"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/card_view_flag"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:translationY="-10dp"
                android:clipToPadding="false"
                cardView:setClipToOutline="false"
                android:src="@drawable/colored_flag"/>


            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"/>

            <CheckBox
                style="?android:attr/starStyle"
                android:scaleX="1.5"
                android:scaleY="1.5"
                android:layout_marginEnd="5dp"
                android:layout_width="35dp"
                android:layout_height="match_parent" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.5"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginStart="10dp"
                android:layout_marginLeft="10dp"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.5"/>
        </LinearLayout>

    </LinearLayout>
</androidx.cardview.widget.CardView>
</layout>

recyclerview..

<androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:clipChildren="false"
                android:paddingBottom="70dp"
                android:scrollbars="vertical" />

Solution

  • All you have to do is put the image outside the cardView

    <ConstraintLayout>
        <CardView>
        <ImageView/>