Design lib - CoordinatorLayout/CollapsingToolbarLayout with GridView/listView

Question

This might be silly question but I didn't understand Design lib well. I am following this reference to create below layout. The Blue area should work as parallax when I scroll the GridView. But when I scroll grid View nothing happens in AppBarLayout.

But This works with NestedScrollView and RecyclerView

Layout

Below is My Layout file-

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    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:background="#500403"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

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


        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />
        <ImageView
            android:id="@+id/backdrop1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitCenter"
            android:fitsSystemWindows="true"
            android:layout_gravity="center"
            android:src="@drawable/bar_offline"
            app:layout_collapseMode="parallax" />


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

  <GridView
      android:id="@+id/grid"
      android:numColumns="4"
      android:background="#367723"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      />
<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/bar_offline"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>

Any help would be appreciated.

Tarun Varshney · Accepted Answer · 2016-03-22T13:06:39.957

40

With ListView/GridView, it works only on Lollipop by following code-

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

I think for Now CoordinatorLayout works only with RecyclerView and NestedScrollView

EDIT :

use -

ViewCompat.setNestedScrollingEnabled(listView/gridview,true); (add Android Support v4 Library 23.1 or +)

edited Mar 22 '16 at 13:06

answered Jun 14 '15 at 17:01

Tarun Varshney

16,808
6
32
47

Incredibly helpful answer. Thanks a lot! – Mephoros Sep 29 '16 at 17:43

score 14 · Answer 2 · answered Mar 08 '16 at 10:00

14

A simple solution was added to the support lib:

ViewCompat.setNestedScrollingEnabled(listView,true);

I've tested it with Android Support v4 Library 23.1 and it works well.

answered Mar 08 '16 at 10:00

daemmie

6,091
3
25
44

Gabriele Mariotti · Answer 3 · 2015-07-08T11:31:28.417

Currently the ListView and the GridView have the expected behavior with the CoordinatorLayout only with API>21.

To obtain this behavior you have to set:

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

It is not enough to implement the NestedScrollingChild. The AbsListView isn't deployed with support libraries , then it depends by the SO running in the device.

You have to override some methods in the AbsListView. For example you can check the onInterceptTouchEvent method.

Inside this code you can see:

  case MotionEvent.ACTION_DOWN: {
    //......
    startNestedScroll(SCROLL_AXIS_VERTICAL);
    //....
  }

  case MotionEvent.ACTION_MOVE: {
    //.....
     if (startScrollIfNeeded((int) ev.getX(pointerIndex), y, null)) {
    //....     
   }
   case MotionEvent.ACTION_CANCEL:
   case MotionEvent.ACTION_UP: {
          //..
         stopNestedScroll();
            break;
   }

This code is only in the implementation of AbsListView v21+. If you check the AbsListView with API 20 or lower, you will not find any nested scroll reference.

score 5 · Answer 4 · edited Jun 17 '16 at 05:34

You have to put gridview inside NestedScrollview as usual then you have to add gridview height dynamically. then everything would work good.!!!

 <android.support.v4.widget.NestedScrollView
       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:layout_gravity="fill_vertical"
               android:fillViewport="true">


               <LinearLayout
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">

              <GridView
               android:id="@+id/camp_list"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_below="@id/toolbar"
               android:layout_margin="10dp"
               android:gravity="center"
               android:horizontalSpacing="10dp"
               android:numColumns="3"
               android:stretchMode="columnWidth"
               android:verticalSpacing="10dp"
               android:visibility="visible" >
           </GridView>



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

' int height = 250; for (int i = 0; i < mNoteList.size(); i++) { height = height + 250; } mGridView.setLayoutParams(new LinearLayout.LayoutParams( LinearLayout.LayoutParams.FILL_PARENT, height)); mAdapter = new CustomGridAdapter(getActivity(), R.id.txt_line1); mGridView.setAdapter(mAdapter);' — Anantha Babu, Sep 24 '15 at 14:34

score 0 · Answer 5 · answered Jun 28 '15 at 20:09

0

This is working for me.

https://gist.github.com/sakurabird/6868765

I use GridView inside NestedScrollView

answered Jun 28 '15 at 20:09

Kishan Vaghela

7,008
3
36
63

score 0 · Answer 6 · answered Nov 30 '16 at 09:50

For convenience i've created a subclass with the new ViewCompat solution:

public class CoordinatedListView extends ListView {

    public CoordinatedListView(Context context) {
        super(context);
        init();
    }

    public CoordinatedListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CoordinatedListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CoordinatedListView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        ViewCompat.setNestedScrollingEnabled(this, true);
    }
}

Enjoy :)

Design lib - CoordinatorLayout/CollapsingToolbarLayout with GridView/listView

6 Answers6

EDIT :

Linked