How can I make a background overlaying the recyclerView?

Question

I have a horizontal recyclerView of images. I want to set a background color that covers the recyclerView.

I want to:

I made with my xml code:

I've added a view to the RecyclerView area. Background color gave it there. When I write it like this in the code, the background color is under the recyclerView:

gradient background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="0"
        android:centerColor="#f1f1f1"
        android:endColor="#FFF8F8F6"
        android:startColor="@color/white" />

</shape>

xml layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="@color/colorAccent" />

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomView"
        android:layout_margin="5dp"
        android:layout_below="@+id/toolbar"
        android:layout_gravity="bottom" />

        <View
        android:id="@+id/bottomView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignStart="@+id/images"
        android:layout_alignLeft="@+id/images"
        android:layout_alignTop="@+id/images"
        android:layout_alignEnd="@+id/images"
        android:layout_alignRight="@+id/images"
        android:layout_alignBottom="@+id/images"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradient_white"  />

        <ImageView
            android:id="@+id/sendButton"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:adjustViewBounds="true"
            android:contentDescription="@null"
            android:elevation="5dp"
            android:gravity="center"
            android:padding="14dp"
            android:scaleType="center"
            app:srcCompat="@drawable/ic_baseline_send_24" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/images"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            android:layout_gravity="bottom"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:layout_alignParentBottom="true"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="10dp" />
</RelativeLayout>

duplicate of https://stackoverflow.com/questions/35980486/android-recyclerview-backgroundcolor/35981154 — Nadeem Shaikh, Nov 17 '20 at 06:35

snachmsm · Accepted Answer · 2020-11-17T07:20:10.830

1

first of all rearrange order of your Views - first should be RecyclerView, then covering background, then send icon. Views placed in XML are drawn in order of declaration, treat them like layers in your case (and for the future: be aware of translationZ and elevation XML attributes)

and for placing covering "background" View (in fact this is foreground, "above" RecyclerView) use this:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/images" ....

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#80FFFFFF"
    android:layout_alignBottom="@id/images"
    android:layout_alignTop="@id/images"
    android:layout_alignLeft="@id/images"
    android:layout_alignRight="@id/images"/>

<ImageView
    android:id="@+id/sendButton" ...

"covering" View may have 0dp size for better measuring performance, still all android:layout_align... declarations make it stretch to the size of RecyclerView (and as later-declared this View will be drawn after RecyclerView, so on top of it)

just adjust your android:background, use some gradient drawable with transparency

edit: gradient drawable file (put in drawable folder)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#00ffffff"
    android:centerColor="#00ffffff"
    android:centerY="80%"
    android:endColor="#fff"
    android:angle="0"
    android:dither="true"/>
</shape>

set it up as

android:background="@drawable/your_file_name_of_above_shape"

edited Nov 17 '20 at 07:20

answered Nov 17 '20 at 06:53

snachmsm

10,975
1
22
52

please help me for background gradient color – propoLis Nov 17 '20 at 07:06
you have a link to whole topic how to set it up... declaration is posted in question, use only `startColor` and `endColor` (ommit `centerColor`) - one of these two should be transparent, second one should be white – snachmsm Nov 17 '20 at 07:11
Yeap I know but I but I can't match the colors exactly. I added it to my edited code. Can you help me – propoLis Nov 17 '20 at 07:15
And this layout still didn't cover – propoLis Nov 17 '20 at 07:19
added sample gradient declaration, show some screen how it currently looks – snachmsm Nov 17 '20 at 07:20
thank you but still my recyclerView items are visible not covering – propoLis Nov 17 '20 at 07:36
update your code in question and I will inspect what may be wrong – snachmsm Nov 17 '20 at 07:48
my answer starts with "first of all" and you didn't fixed improper order... first must be `RecyclerView`, then covering `View` (with gradient drawable), at last send `ImageView`. just like in my answer... – snachmsm Nov 17 '20 at 09:11

How can I make a background overlaying the recyclerView?

1 Answers1