Scroll second child in AppBarLayout

Question

I'm trying to obtain this effect where if the user scroll a RecyclerView a certain layout scroll up together with the recycler and disappear behind a Toolbar.

A similar behavior could be obtained using the CoordinatorLayout, this would be possible by setting

app:layout_behavior="@string/appbar_scrolling_view_behavior"

on the said Recycler, and doing

<android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"/>

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

Also, If I put a second child inside the AppBarLayout, and set app:layout_scrollFlags to it, the effect obtained is the same, with both layout scrolling together with the Recycler.

What I'm trying to achieve is to keep the first child (The toolbar) fixed in position, and let the second child (a LinearLayout) to scroll and hide behind the toolbar. Unfortunately I couldn't get to this behavior.

Is it possible without using 3rd part library? Thanks in advance and sorry for my english.

I'm adding a comment here for reference, since this is not really an answer to the question but more of a work-around: A simple solution would be to set the second child of our layout as a header to the RecyclerView, and simply pin the toolbar on top. This sounds good to me but it could bring a little trickness if we want to update the header. — Lampione, Nov 07 '16 at 06:55

score 9 · Answer 1 · answered Nov 20 '18 at 19:36

Finally I figured out a way to achieve this behavior, by including the CoordinatorLayout in an LinearLayout and making the second child(LinearLayout) become the first, by moving the Toolbar to the extrnal(root) level

Hierarchy before:

<CoordinatorLayout>
 <AppBarLayout>
  <ToolBar>
  <LinerarLayout>

Hierarchy after:

<LinearLayout>
  <ToolBar>
  <CoordinatorLayout>
   <AppBarLayout>
     <LinearLayout>

An exmaple:

<?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:orientation="vertical">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="48dp" />
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            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:elevation="16dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorSecondaryLight"
                    android:orientation="vertical"
                    app:layout_scrollFlags="scroll"/>
                </com.google.android.material.appbar.AppBarLayout>
                .
                .
                .
                .
            </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </LinearLayout>

Hope that helps!

Scroll second child in AppBarLayout

1 Answers1