Tobi
Tobi

Reputation: 898

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" />

Upvotes: 0

Views: 1118

Answers (2)

Tobi
Tobi

Reputation: 898

Just to give a well formatted full result of what @Sinner was leading me to...

Since my ViewHolder is inflated like this:

@Override
public ListAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                       int viewType)
{
    CardView v = (CardView) LayoutInflater.from(parent.getContext())
            .inflate(R.layout.list_card, parent, false);

    ViewHolder vh = new ViewHolder(v);
    return vh;
}

And I use CardView all the way downstream, I modified @Sinners answer like this to make it work:

<CardView>
    <ConstraintLayout>
        <CardView>
        <ImageView/>

With the outer CardView being transparent, the ConstrainLayout having a padding and clipToPadding="false". Then the ImageView could sit outside of the inner CardView and look as supposed :)

Thanks!

Upvotes: 1

Sinner of the System
Sinner of the System

Reputation: 2966

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

<ConstraintLayout>
    <CardView>
    <ImageView/>

Upvotes: 0

Related Questions