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

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.

Howie

Answer 1

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 +)

Howie

Incredibly helpful answer. Thanks a lot! – Kettledrummer

Answer 2

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.

Discounter

Answer 3

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.

Apia

Answer 4

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>

Tinned

' 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);' – Tinned

Answer 5

This is working for me.

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

I use GridView inside NestedScrollView

Ruiz

Answer 6

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 :)

Kofu