RecyclerView overlapping without shadow

Question

I want to develop List like this picture

I had used to RecylerView ItemDecorator for overlap. But it's overlapping without shadow. the screen & decorator code is below

public class OverlapDecoration extends RecyclerView.ItemDecoration {

private final static int vertOverlap = -50;

@Override
public void getItemOffsets (Rect outRect, View view, RecyclerView parent,       RecyclerView.State state) {

outRect.set(0, 0, 0, vertOverlap);
}
}

card_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="cards main container">

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@color/color_white"
    card_view:cardElevation="5dp"
    card_view:cardUseCompatPadding="true">

            <TextView
                android:id="@+id/textViewName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="30dp"
                android:text="Android Name"
                android:textAppearance="?android:attr/textAppearanceLarge"/>

</android.support.v7.widget.CardView>

</LinearLayout>

Resoluble

I am not sure this will help exactly as u need but try if you are using cardviews in recyclerview items use elevation property and try. – Urinal

i'm using elevation in 'card_layout.xml '. Please check above modified question. – Resoluble

use card view rather than item decorator and manage space between cards. – Platitudinize

Please put your adapter code. – Azral

Answer 1

try this code

card_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:tag="cards main container">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:clipToPadding="false"
        android:elevation="0dp"
        card_view:cardUseCompatPadding="false"
        card_view:paddingEnd="0dp"
        card_view:paddingStart="0dp">

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="30dp"
            android:gravity="center"
            android:text="Android Name"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_above="@id/textViewName"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/card_shadow" />
    </android.support.v7.widget.CardView>


</RelativeLayout>

for card shadow card_shadow

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#77111111"
        android:startColor="@android:color/transparent" />
</shape>

Louth

Some explanation would be welcome, so one doesn't have to parse the code to understand the answer – Subak

Answer 2

This is example of your problem solution for static CardView , here you every time decrease your card_view:cardElevationby 2dp or 5dp. But if you done this with recyclerview and want to dynamic CardView then you have to add elevation in your RecyclerView Adapterdynamically. And its decrease with its position increase. Set card elevation holder.cardView.setCardElevation()

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:tag="cards main container">

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="20dp"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/card_view2"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="18dp"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/card_view3"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</android.support.v7.widget.CardView>

</LinearLayout>

Hope it will help you. Thanks.

Limoges

Answer 3

Try this.

In RecyclerView Adapter- on OnBindViewHolder method add the following code:

  CardView cardView = ((MyViewHolder) holder).cardView;
  float elevation = cardView.getCardElevation();
  float value = elevation-Float.parseFloat((position*0.5)+"");
  cardView.setCardElevation(value);

See the output here:

Note: depend on your code modify the above code and use it in right place.

For reference here is my sample adaptor code.

public class CustomAdapter extends RecyclerView.Adapter {
        public static final String Name = "Name";
        public static final String Author = "Author";
        public static final String Description = "Description";
        private List<Book> dataSet;
        private Context context;


        public CustomAdapter(List<Book> data, Context context) {
            this.dataSet = data;
            this.context = context;
        }

        public class MyViewHolder extends RecyclerView.ViewHolder {
           ImageView profile;
            TextView name, author,description;
            CardView cardView;

            public MyViewHolder(View itemView) {
                super(itemView);
                profile = (ImageView) itemView.findViewById(R.id.profile_image);
                name = (TextView) itemView.findViewById(R.id.name);
                author = (TextView) itemView.findViewById(R.id.author);
                description = (TextView) itemView.findViewById(R.id.description);
                cardView = (CardView) itemView.findViewById(R.id.cardview);
            }
        }

        @Override
        public int getItemCount() {
            return dataSet.size();
        }

        @Override
        public int getItemViewType(int position) {
            return position;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            RecyclerView.ViewHolder vh;
            View v = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.book_layout_sample, parent, false);

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

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            if (holder instanceof MyViewHolder) {
                Book book = dataSet.get(position);
                ((MyViewHolder) holder).profile.setImageDrawable(getResources().getDrawable(R.drawable.blank_user,this.context.getTheme()));
                ((MyViewHolder) holder).name.setText(book.title);
                ((MyViewHolder) holder).author.setText(book.author);
                ((MyViewHolder) holder).description.setText(book.description);
                CardView cardView = ((MyViewHolder) holder).cardView;
                float ele = cardView.getCardElevation();
                float val = ele-Float.parseFloat((position*0.5)+"");
                cardView.setCardElevation(val);

                if(position==0)
                {
                    RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)cardView.getLayoutParams();
                    params.setMargins(0,0,0,0);
                    cardView.setLayoutParams(params);
                }
            }
        }
    }

Outland