CollapsingToolbarLayout Issue with GridView

Question

CollapsingToolbarLayout only working with RecyclerView but not working with ListView and GridView.

Below one is my XML file:

<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/restaurant_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/gradiant"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView 
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:animateLayoutChanges="true"
       app:layout_behavior="@string/appbar_scrolling_view_behavior"
       android:fillViewport="true">


    <GridView
        android:id="@+id/restaurant_items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="5dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:gravity="center"
        android:numColumns="2"
        android:verticalSpacing="20dp" />

   </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

and this one is my Activity file:

        Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("Resturant Name");
        ImageView header = (ImageView) findViewById(R.id.restaurant_image);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            ViewCompat.setNestedScrollingEnabled(mGrid,true);
        }

        mGrid.setAdapter(new ResturantItemsAdapter(this, images, name));//images and name is array with size 10....

Note:-Scrolling is working fine but after some of Grid View list scrolling it is getting stuck and not scrolling more, even there is more rows in Grid View. It scrolling only for the 8th item of Grid View and 9th and 10th item is not showing ...

I searched many links, there people saying it only work above and in Lollipop version. Below version have some problem.

Is it possible to run Collapse Toolbar work below the lollipop version ?

Thanks to all ....

You can use `RecyclerView` with `GridLayoutManager` instead of `GridView`. — Abhishek V, Sep 16 '16 at 06:48
Remove `android:fillViewport="true"` from NestedScrollView and set dynamic height to your ListView or GridView — Hamed Nabizadeh, Sep 21 '16 at 18:20
@HamedNabizadeh you solution is disappear my all item behind the Collapse toolbar and scrolling is not working ... — sushildlh, Sep 22 '16 at 13:44
@AbhishekV please put your answer so i can accept your answer . Please put some code example in your answer ..... :) . I found this helpful solution bcoz of you http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/ — sushildlh, Sep 22 '16 at 14:00

score 7 · Accepted Answer · answered Sep 22 '16 at 14:11

CoordinatorLayout works better with RecyclerView or NestedScrollView. For your requirement, you can use RecyclerView with GridLayoutManger.

<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/restaurant_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/gradiant"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

  <android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:scrollbars="vertical" />

</android.support.design.widget.CoordinatorLayout>

RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(this, 2); recyclerView.setLayoutManager(mLayoutManager);

Here is a sample which demonstrates the usage of GridLayoutManger: http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/

thanx for the tip that help me to solve this problem – sushildlh Sep 22 '16 at 18:01 — sushildlh, Sep 22 '16 at 18:01

score 5 · Answer 2 · answered Sep 09 '16 at 12:39

5

You need to wrap your GridView and ListView in a NestedScrollView and add the right behavior, like this:

<android.support.v4.widget.NestedScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:fillViewport="true">

answered Sep 09 '16 at 12:39

amitairos

2,907
11
50
84

Gridview is not scrolling. Only the NestedScrollViewScrolls hiding the toolbar. – Deepak J Dec 10 '19 at 07:30

score 1 · Answer 3 · answered Sep 21 '16 at 07:34

1

ListView and GridView don't work directly with CoordinatorLayout and CollapsibleToolbar.

Try to use either a NestedScrollView or a RecyclerView with a GridLayoutManager to create a GridView.

answered Sep 21 '16 at 07:34

Nikhil Gupta

881
6
14

iMDroid · Answer 4 · 2016-09-23T05:00:20.070

I faced the same issue once when I wanted to use the CollapsingToolbarLayout with ListView/GridView.

They only work with RecyclerView. Hence I would recommend you to implement RecyclerView instead of GridView.

(Not Recommended) - But if you still want to continue with the GridView, here is one trick(jugaad) to solve your issue.

Scrolling is working fine but after some of GridView list scrolling it stuck and not scrolling more ,even there is more row in gridView .It scrolling only for the 8th item of gridView and 9th and 10th item is not showing ...

Here your GridView is shifted below the screen as per the height of the AppBarLayout that is 192dp . So can add the same paddingBottom = 192dp to your GridView to pull it up and make the other last 2 item visible. Plus don't forget to add clipToPadding = false.

<GridView
        android:id="@+id/restaurant_items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="5dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:gravity="center"
        android:numColumns="2"
        android:verticalSpacing="20dp"
        android:paddingBottom = "192dp"
        android:clipToPadding = "false" />

Sorry, my mistake.. clipToPadding should be false. Answer updated. — iMDroid, Sep 23 '16 at 05:01

score 0 · Answer 5 · answered Sep 22 '16 at 09:08

CoordinateLayout is working ListView and GridView only if your API > 21.

for ListView you can code like this way.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     listView.setNestedScrollingEnabled(true);
}

So in updated CoordinateLayout only work with NestedScrollView and RecycleView.

So as @amitairos say that you have to put ListView or GridView to NestScrollView to work with it.

CollapsingToolbarLayout Issue with GridView

5 Answers5