AppBarLayout is a vertical LinearLayout that implements many of the features that a status bar should have according to the Material Design guidelines, such as scroll gestures.
AppBarLayout is generally used directly as a child of CoordinatorLayout. If AppBarLayout is used in another layout, most of its functionality will be lost. AppBarLayout needs an identifier to know when the scrolling view should scroll. This identifier is set by binding 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 includes 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 what action the child views of AppBarLayout should perform when the scroll 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 use 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 - set layout_scrollFlags attribute for child views -->
<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 first displayed and then the scrolling starts. The effect is as follows:
enterAlwaysCollapsed: When using the enterAlwaysCollapsed attribute, it must be used in conjunction with scroll and enterAlways. In addition, the child view of AppBarLayout (in this case, the 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 first displayed with the minimum height of the child view, and then the AppBarLayout is fully displayed when the top of the scrolling view is reached. The effect is as follows:
exitUntilCollapsed: When using the exitUntilCollapsed attribute, it must be used in conjunction with scroll. In addition, the child view of AppBarLayout (in this case, the 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 the minimum height, 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:
snap: When using the snap attribute, it must be used in conjunction with scroll. Its main function is that when the scrolling ends, if the flexible view is only partially visible, it will automatically scroll to the nearest edge. When the layout_scrollFlags attribute is set as follows:
app:layout_scrollFlags="scroll|snap"
In this case, if the flexible view (in this case, the Toolbar) is partially visible, it will automatically scroll to the nearest edge, either hiding or displaying it. The effect is as follows:
That's all for the layout_scrollFlags attribute. Of course, the above examples only demonstrate the effects of the attribute values. In actual development, there are many more complex scenarios, and you can combine it with other Material Design implementations such as CollapsingToolbarLayout to achieve cool effects. The above examples show how to set the layout_scrollFlags attribute in a layout file. By the way, let's also explain how to set the layout_scrollFlags attribute in code:
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) appBarLayout
.getChildAt(0).getLayoutParams();
// Hide the AppBarLayout when scrolling up, and then start scrolling
// Display the AppBarLayout first when scrolling down, and then start scrolling
params.setScrollFlags(
AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL |
AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
//...
That's all for the usage of AppBarLayout and its important attributes. In actual development, it will definitely be much more complex. I hope the above content can be helpful to you. Have a great weekend!