Why Recyclerview doesn't scroll inside AppBarLayout

Question

I have a layout with CoordinatorLayout, AppBarLayout and RecyclerView. I am facing scroll issue when add RecyclerView inside AppBarLayout, RecyclerView never scroll while AppBarLayout is expanded or collapsed

Here is my whole project, Where is the issue?

MainActivity

package com.example.coordinatorlayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private RecyclerView rvItems;
private RecyclerView.LayoutManager layoutManager;
private ItemAdapter itemAdapter;
private ItemModel itemModel;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    rvItems = findViewById(R.id.rv_products);

    invalidateView(  setListItems());
}

private List<ItemModel> setListItems() {
    List<ItemModel> itemsList = new ArrayList<>();
    itemModel = new ItemModel();
    for(int i = 0; i <= 100; i++) {
        itemModel = new ItemModel();
        itemModel.setName("Name_" + i);
        itemModel.setPrice("10");
        itemModel.setStock(i + 2);

        itemsList.add(i, itemModel);
    }

    return itemsList;
}


private void invalidateView(List<ItemModel> items) {
    layoutManager = new GridLayoutManager(this, 2);
    rvItems.setLayoutManager(layoutManager);
    rvItems.setNestedScrollingEnabled(true);
    itemAdapter = new ItemAdapter(items);
    rvItems.setAdapter(itemAdapter);
  }
 }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
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"
android:background="@color/colorAccent">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="95dp"
        android:layout_height="95dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher" />

    </com.google.android.material.appbar.CollapsingToolbarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_products"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/round_top_corners_rectangle_gray"
        tools:listitem="@layout/item_view" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

ItemModel

package com.example.coordinatorlayout;
import android.os.Parcel;
import android.os.Parcelable;

public class ItemModel implements Parcelable {

private String name;
private String price;
private int stock;

public String getName() {
    return name;
}

public void setName(String iName) {
    this.name = iName;
}

public String getPrice() {
    return price;
}

public void setPrice(String iPrice) {
    this.price = iPrice;
}

public int getStock() {
    return stock;
}

public void setStock(int iStock) {
    this.stock = iStock;
}

@Override
public int describeContents() {
    return 0;
}

@Override
public void writeToParcel(Parcel dest, int flags) {
    dest.writeString(this.name);
    dest.writeString(this.price);
    dest.writeInt(this.stock);
}

public ItemModel() {
}

protected ItemModel(Parcel in) {
    this.name = in.readString();
    this.price = in.readString();
    this.stock = in.readInt();
}

public static final Creator<ItemModel> CREATOR = new Creator<ItemModel>() {
    @Override
    public ItemModel createFromParcel(Parcel source) {
        return new ItemModel(source);
    }

    @Override
    public ItemModel[] newArray(int size) {
        return new ItemModel[size];
    }
  };
}

ItemAdapter

package com.example.coordinatorlayout;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.MyViewHolder> {

private List<ItemModel> itemsList;

public ItemAdapter(List<ItemModel> list) {
    this.itemsList = list;
}

@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View itemView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.item_view, parent, false);

    return new MyViewHolder(itemView);
}

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    ItemModel product = itemsList.get(position);
    holder.bindData(product);
}

public void setData(List<ItemModel> list) {
    this.itemsList = list;
    notifyDataSetChanged();
}

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

class MyViewHolder extends RecyclerView.ViewHolder {

    TextView tvQuantity;
    TextView tvName;
    TextView tvPrice;

    MyViewHolder(View view) {
        super(view);

        tvQuantity = view.findViewById(R.id.tv_quantity);
        tvName = view.findViewById(R.id.tv_name);
        tvPrice = view.findViewById(R.id.tv_price);
    }

    void bindData(ItemModel item) {
        tvQuantity.setText(String.valueOf(item.getStock()));
        tvName.setText(item.getName());
        tvPrice.setText(item.getPrice());
    }
  }
 }

item_view.xml

  <?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:id="@+id/layout_main_item_container_product"
android:layout_width="140dp"
android:layout_height="180dp"
android:layout_margin="5dp"
android:background="@android:color/white">

<TextView
    android:id="@+id/tv_quantity_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:paddingStart="15dp"
    android:paddingLeft="15dp"
    android:text="Quantity"
    android:textStyle="bold" />

<TextView
    android:id="@+id/tv_quantity"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"
    android:layout_toEndOf="@+id/tv_quantity_title"
    android:layout_toRightOf="@+id/tv_quantity_title"
    tools:text="5" />

<TextView
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tv_quantity_title"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:paddingStart="15dp"
    android:paddingLeft="15dp"
    android:visibility="visible"
    tools:text="Product" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tv_price_currency"
    android:layout_below="@+id/tv_name"
    android:layout_centerHorizontal="true"
    android:layout_marginStart="8dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="8dp"
    app:srcCompat="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/tv_price_currency"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="5dp"
    android:paddingStart="15dp"
    android:paddingLeft="15dp"
    android:paddingEnd="20dp"
    android:paddingRight="20dp"
    tools:text="$" />

<TextView
    android:id="@+id/tv_price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="5dp"
    android:layout_toEndOf="@+id/tv_price_currency"
    android:layout_toRightOf="@+id/tv_price_currency"
    android:paddingStart="30dp"
    android:paddingLeft="30dp"
    tools:text="5" />

round_top_corners_rectangle_gray.xml

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#F9F9F9" />
<corners
    android:bottomRightRadius="0dp"
    android:bottomLeftRadius="0dp"
    android:topLeftRadius="33dp"
    android:topRightRadius="33dp" />

ʍѳђઽ૯ท · Answer 1 · 2020-07-24T11:43:33.997

UPDATE: You need to use the RecyclerView inside the Coordinatorlayout and outside of the AppBarLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <ImageView
                android:id="@+id/iv_logo"
                android:layout_width="95dp"
                android:layout_height="95dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginStart="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/ic_launcher" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_products"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:listitem="@layout/prof_item" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

The first layout you've added to the question has many issues. First, CoordintorLayout should be the root of the layout.

Second, if you're trying to add some content at the top of the layout, you'll need to use the RelativeLayout inside the AppBarLayout or using CollapsingToolbarLayout inside the AppBarLayout.

Another problem is that you've added:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

To the RecyclerView which is only used outside of AppBarLayout to notify the AppBarLayout when scroll events occur on this particular view. So remove this attribute.

I updated the question with the new layout as suggested but now the view doesn't expand or collapse, the whole screen is static. — Safa, Jul 24 '20 at 10:10
You're still using `app:layout_behavior="@string/appbar_scrolling_view_behavior"` & `app:layout_scrollFlags="scroll|exitUntilCollapsed"` in the `RelativeLayout`. You should consider using `CollapsingToolbarLayout` in the `AppBarLayout` instead of `RelativeLayout` or in above of `RelativeLayout`. — ʍѳђઽ૯ท, Jul 24 '20 at 10:46
I removed `RelativeLayout` and added `CollapsingToolbarLayout` I am still facing the same issue, `RecyclerView` doesn't scroll( Code updated) — Safa, Jul 24 '20 at 11:26
Just one question, are you trying to use `RecyclerView` inside `AppBarLayout` or, you want to have the `RecyclerView` scroll while `AppBarLayout` expends/collapses? Because the way I see, you're trying to have `RecyclerView` and `AppBarLayout a part from the each other. — ʍѳђઽ૯ท, Jul 24 '20 at 11:37
I want to have the `RecyclerView` scroll while `AppBarLayout` expends — Safa, Jul 24 '20 at 11:40
Please check my updated answer. `RecyclerView` should be inside of the `CoordinatorLayout`. You can also use the custom logo inside the `Toolbar` (if you're trying to add a custom logo. That's related to another topic BTW) — ʍѳђઽ૯ท, Jul 24 '20 at 11:43
I am trying to add the removed `RelativeLayout` inside `CollapsingToolbarLayout` but it doesn't appear completely, `RecyclerView` hide part of it — Safa, Jul 24 '20 at 12:08

score 0 · Answer 2 · answered Jul 24 '20 at 08:49

Put RecyclerView outside of AppBarLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@color/colorAccent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/layout_sticky_header_store_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:text="Name" />

    </RelativeLayout>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/layout_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:fitsSystemWindows="true">

            <RelativeLayout
                android:id="@+id/layout_scrollable_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#201A98E5"
                android:paddingStart="10dp"
                android:paddingLeft="10dp"
                android:paddingEnd="20dp"
                android:paddingRight="20dp"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/iv_logo"
                    android:layout_width="95dp"
                    android:layout_height="95dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="10dp"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/ic_launcher" />

                <TextView
                    android:id="@+id/tv_name_label_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_toStartOf="@+id/iv_logo"
                    android:layout_toLeftOf="@+id/iv_logo"
                    android:text="Name: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tv_name_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginEnd="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_toStartOf="@+id/tv_name_label_scrollable"
                    android:layout_toLeftOf="@+id/tv_name_label_scrollable"
                    android:paddingBottom="5dp"
                    android:text="Name" />

                <TextView
                    android:id="@+id/tv_quantity_label_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_name_label_scrollable"
                    android:layout_toStartOf="@+id/iv_logo"
                    android:layout_toLeftOf="@+id/iv_logo"
                    android:text="Quantity: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tv_quantity_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_name_label_scrollable"
                    android:layout_marginEnd="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_toStartOf="@+id/tv_quantity_label_scrollable"
                    android:layout_toLeftOf="@+id/tv_quantity_label_scrollable"
                    android:text="22" />

                <TextView
                    android:id="@+id/tv_call_label_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_quantity_label_scrollable"
                    android:layout_marginBottom="10dp"
                    android:layout_toStartOf="@+id/iv_logo"
                    android:layout_toLeftOf="@+id/iv_logo"
                    android:text="Call us"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tv_call_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_quantity_label_scrollable"
                    android:layout_centerHorizontal="true"
                    android:layout_marginEnd="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_toStartOf="@+id/tv_call_label_scrollable"
                    android:layout_toLeftOf="@+id/tv_call_label_scrollable"
                    android:text="0123456789" />

                <TextView
                    android:id="@+id/tv_description_scrollable"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_call_label_scrollable"
                    android:layout_toStartOf="@+id/iv_logo"
                    android:layout_toLeftOf="@+id/iv_logo"
                    android:maxLines="2"
                    android:paddingBottom="16dp"
                    android:scrollbars="vertical"
                    android:text="Description description description description description description description description description description description" />
            </RelativeLayout>
        </com.google.android.material.appbar.AppBarLayout>
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_products"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/round_top_corners_rectangle_gray"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:listitem="@layout/item_view" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>

Why Recyclerview doesn't scroll inside AppBarLayout

2 Answers2