Scroll second child in AppBarLayout

Scroll Second Child in AppBarLayout

Understanding AppBarLayout

AppBarLayout is a crucial component in Android development that provides a flexible and customizable toolbar area at the top of your activity. It’s designed to work seamlessly with the CoordinatorLayout, enabling you to achieve various layout effects, including scrolling behaviors. In this article, we’ll delve into the specific scenario of scrolling a second child element within an AppBarLayout.

The Challenge: Scrolling the Second Child

By default, AppBarLayout prioritizes scrolling the first child element (usually the Toolbar) before allowing any subsequent child elements to scroll. However, there are times when you want a different behavior, where the second child element should take precedence in scrolling.

Solution: Utilizing `layout_scrollFlags`

The key to achieving this lies in the layout_scrollFlags attribute. This attribute within your second child’s layout XML defines how the element interacts with scrolling.

Steps to Achieve Scroll Second Child Behavior

1. Identify Your Second Child: Ensure you have correctly identified the second child element you want to scroll.
2. Set `layout_scrollFlags` to `scroll` : This attribute tells the AppBarLayout to allow scrolling for the second child.
3. Configure `layout_scrollFlags` for the First Child (Toolbar): Modify the Toolbar’s layout_scrollFlags to exitUntilCollapsed. This configuration makes the Toolbar collapse as the user scrolls downwards, giving priority to the second child’s scrolling.

Code Example

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_scrollFlags="scroll">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is my second child, the scrollable content!" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.AppBarLayout>

Explanation

• The Toolbar, as the first child, has layout_scrollFlags set to exitUntilCollapsed, ensuring it collapses as the user scrolls down.
• The NestedScrollView, as the second child, has layout_scrollFlags set to scroll, enabling it to scroll freely once the Toolbar has collapsed.

Additional Considerations

While this approach effectively handles the scrolling priority, you might need to fine-tune the behavior further depending on your app’s specific requirements. For example, you can use additional layout_scrollFlags values to control the Toolbar’s collapsing behavior or the NestedScrollView’s scrolling interactions.

Summary

By strategically using layout_scrollFlags, you can easily achieve the desired scrolling behavior where the second child element takes precedence over the first child in an AppBarLayout. This technique provides flexibility and control over your layout interactions, leading to a more refined user experience.