androidandroid-recyclerviewshadowandroid-flexboxlayout

Android, display a shadow under each items of a RecyclerView (without margin-padding)


I'm trying to display a shadow under items of a RecyclerView but there is no space between items.

I'm trying to reproduce something like that :

Design for an UI

I've implemented a RecyclerView and a FlexboxLayout so items takes the whole place in the screen.

Here is the recycler view declaration:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:listitem="@layout/category_item"
    android:clipToPadding="false"
    android:paddingEnd="20dp"
    android:paddingBottom="20dp"/>

Here is the item layout :

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/itemContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:justifyContent="center"
    android:elevation="8dp"
    >

        <TextView
            android:id="@+id/itemTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:gravity="center"
            android:textSize="16sp" />

</com.google.android.flexbox.FlexboxLayout>

And the onBindViewHolder method from the adapter:

@Override
public void onBindViewHolder(final CategoryViewHolder holder, int position) {
    if (categories != null) {
        Category category = categories.get(position);
        holder.itemTitle.setText("Lorem ipsum");
        ViewGroup.LayoutParams lp = holder.itemContainer.getLayoutParams();

        holder.itemContainer.setBackgroundResource(category.getColor());

        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) holder.itemContainer.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }
    }
}

Here is what i get:

My Application Design

As you can see, i put a padding so we can see the shadow behind but since there is no space between items, the shadow isn't displayed. I'd like the shadow to be displayed on top of other items.

I don't know how to make a good looking separation between items otherwise, i've tried with DividerItemDecoration but it doesn't work as expected.


Solution

  • I found a solution here : https://stackoverflow.com/a/35406689/9434800

    I've created a gradient resource:

    <shape xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:angle="90"
            android:centerColor="@color/c1"
            android:centerY="90%"
            android:endColor="@color/c1_darker"
            android:startColor="@color/c1"
            android:type="linear" />
    
    </shape>
    

    And i set it as background of my item, this way the top of my items are darker and it seems like it's the shadow of items above them.