Search code examples
androidandroid-recyclerviewbackground-image

Background image set for RecyclerView in XML doesn't show in Android

I'm using RecyclerView and I'm trying to set a background image for the RecyclerView in XML, using android:background="@drawable/soccer_field" but for some reason, it doesn't show.

I've tried to set a background image for the entire layout(of the all screen), and what I've found out is that the RecyclerView "hides" the background image, so that only on the RecyclerView you cant see it. And if I remove the RecyclerView you can see the

The XML code of the activity:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activities.GroupStandingsActivity">

    <RelativeLayout
        android:id="@+id/standings_columns_relative_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingVertical="2dp">

        <TextView
            android:id="@+id/player_name_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_toStartOf="@+id/rating_number_column"
            android:layout_toLeftOf="@+id/rating_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingStart="60dp"
            android:paddingLeft="60dp"
            android:text="@string/player_name_column"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:textColor="#000000"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/rating_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/games_number_column"
            android:layout_toLeftOf="@id/games_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingHorizontal="10dp"
            android:text="@string/rating_column"
            android:textColor="#000000"
            android:textSize="22sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/games_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/wins_number_column"
            android:layout_toLeftOf="@id/wins_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingHorizontal="21dp"
            android:text="@string/games_column"
            android:textColor="#000000"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/wins_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/losses_number_column"
            android:layout_toLeftOf="@id/losses_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingHorizontal="15dp"
            android:text="@string/wins_column"
            android:textColor="#000000"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/losses_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/goals_number_column"
            android:layout_toLeftOf="@id/goals_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingHorizontal="20dp"
            android:text="@string/losses_column"
            android:textColor="#000000"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/goals_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/assists_number_column"
            android:layout_toLeftOf="@id/assists_number_column"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingHorizontal="11dp"
            android:text="@string/goals_column"
            android:textColor="#000000"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/assists_number_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingLeft="20dp"
            android:paddingRight="50dp"
            android:text="@string/assists_column"
            android:textColor="#000000"
            android:textSize="22sp" />
    </RelativeLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/standings_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/soccer_field"
        android:layout_below="@+id/standings_columns_relative_layout"
        tools:listitem="@layout/standings_item" />
    <!-- remember Image by <a href="https://pixabay.com/users/OpenClipart-Vectors-30363/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=145794">OpenClipart-Vectors</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=145794">Pixabay</a> -->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/play_game_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom|end"
        android:layout_margin="50dp"
        android:src="@drawable/ic_football" />
    <!-- remember credit https://www.flaticon.com/free-icon/football_1165187 -->

</RelativeLayout>

actual result(when the background image is on the entire screen):

screenshot

when the expected is that it will be behind the RecyclerView as well.

Solution

  • apparently this white background comes from the inflated item for the RecyclerView

    [player name 0 0 0 0 0 0]

    which is called standings_item in your case.

    So to have the RecyclerView background displayed, you have to remove the white background from single player view (standings_item), and the best option here would be not totally removing the white background but giving it a semi-transparent background color to maintain the visibility of the view, some color examples would be:

    <color name="dark_overlay">#0D29303F</color>
<color name="very_dark_overlay">#9929303F</color>