如何制作覆盖 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>

Answer 1

first of all rearrange order of your View s - first should be RecyclerView , then covering background, then send icon. View s 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"