Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll second child in AppBarLayout

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.

like image 799
Matteo Avatar asked Jan 13 '16 07:01

Matteo


1 Answers

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!

like image 192
Moh'd Hawamdeh Avatar answered Sep 24 '22 01:09

Moh'd Hawamdeh