AppBarLayout is a vertical LinearLayout that implements many features that a status bar should have according to the Material Design guidelines, such as scrolling gestures.
AppBarLayout is generally used as a direct child of CoordinatorLayout. If AppBarLayout is used in another layout, most of its functionality will be disabled. AppBarLayout needs an identifier to know when the scrolling view should scroll. This identifier is set through the binding of the AppBarLayout.ScrollingViewBehavior class. This means that the behavior of the scrolling view should be set as an instance of AppBarLayout.ScrollingViewBehavior, using a string resource that contains the complete class name, as shown below:
// Set the layout_behavior attribute
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
The child views of AppBarLayout should have a scrollable behavior, which can be set through code or XML attributes, as shown below:
// Code
setScrollFlags(int)
// XML attribute
app:layout_scrollFlags
The layout_scrollFlags attribute specifies the actions that the child views of AppBarLayout should perform when the scrolling gesture changes. There are 5 possible values for the layout_scrollFlags attribute:
- scroll
- enterAlways
- enterAlwaysCollapsed
- exitUntilCollapsed
- snap
Before explaining the effects of these values, let's consider the following layout as an example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.manu.materialdesignsamples.samples.SampleCoordinatorAppBarActivity">
<!-- AppBarLayout - Child views with layout_scrollFlags attribute -->
<android.support.design.widget.AppBarLayout
android:id="@+id/ablBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- NestedScrollView - Set layout_behavior attribute -->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvAppBarData"
android:clipToPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
scroll: When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll"
In this case, when scrolling up, the AppBarLayout is first hidden and then the scrolling starts. When scrolling down, the AppBarLayout is only displayed when the top of the scrolling view is reached. The effect is as follows:
enterAlways: enterAlways must be used in conjunction with scroll. When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll|enterAlways"
In this case, when scrolling up, the AppBarLayout is first hidden and then the scrolling starts. When scrolling down, the AppBarLayout is displayed first and then the scrolling starts. The effect is as follows:
enterAlwaysCollapsed: enterAlwaysCollapsed must be used in conjunction with scroll and enterAlways. Additionally, the child view of AppBarLayout (in this case, Toolbar) needs to have a minimum height set to support enterAlwaysCollapsed. When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
In this case, when scrolling up, the AppBarLayout is first hidden and then the scrolling starts. When scrolling down, the AppBarLayout is displayed with the minimum height of the child view, and then it fully appears when the top of the scrolling view is reached. The effect is as follows:
exitUntilCollapsed: exitUntilCollapsed must be used in conjunction with scroll. Additionally, the child view of AppBarLayout (in this case, Toolbar) needs to have a minimum height set to support exitUntilCollapsed. When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
In this case, when scrolling up, the AppBarLayout is first hidden to its minimum height, and then the scrolling starts. When scrolling down, the AppBarLayout is displayed only when the top of the scrolling view is reached. The effect is as follows:
snap: snap must be used in conjunction with scroll. Its main purpose is to automatically scroll the flexible view (in this case, Toolbar) to the nearest edge when the scrolling ends, if the flexible view is only partially visible. When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll|snap"
In this case, if the flexible view is partially visible, it will automatically scroll to the nearest edge, either hiding or fully displaying it. The effect is as follows:
That concludes the explanation of the layout_scrollFlags attribute. Of course, the above examples only demonstrate the effects of the attribute values. In actual development, there are more complex scenarios and the layout_scrollFlags attribute can be combined with other Material Design components, such as CollapsingToolbarLayout, to achieve more impressive effects. The above examples show how to set the layout_scrollFlags attribute in a layout file. Additionally, here is how to set the layout_scrollFlags attribute in code:
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) appBarLayout
.getChildAt(0).getLayoutParams();
// Hide AppBarLayout when scrolling up, then start scrolling
// Show AppBarLayout when scrolling down, then start scrolling
params.setScrollFlags(
AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL |
AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
//...
That covers the usage of AppBarLayout and its important attributes. In actual development, there will be more complexities. I hope the above content is helpful to you. Have a great weekend!