Introduction
AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures. This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it’s functionality will not work.
The AppBarLayout is used to achieve various scrolling behaviors such as collapse, flex space, and quick return. So if you want just to include the Toolbar without any scrolling effects you can use Toolbar. But if you want to make some scrolling effects you need to use AppBarLayout.
App bars contains four main aspects, that plays huge role in scrolling behavior. They are,
- Status Bar
- Toolbar
- Tab bar/Search bar
- Flexible space
App Bar has following scrolling options,
- Standard App bar scrolling with only Toolbar
- App bar scrolling with tabs
- App bar scrolling with Flexible space
Setting App Bar
Use design support library to achieve AppBar, this library provides many of the material design components. In the layout xml, Add Toolbar inside AppBarLayout and the AppBarLayout needs to be inside the CoordinatorLayout. CoordinatorLayout is the one, which gives proper scrolling and material animations to the views attached with it like FloatingButtons, ModalSheets and SnackBar.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"/>
</android.support.design.widget.AppBarLayout>
<!-- Other layout -->
</android.support.design.widget.CoordinatorLayout>
Scrolling with Toolbar
To achieve this, apart from the above basic setup code implementation, Toolbar needs to have app:layout_scrollFlags
- scroll -will be scrolled along with the content.
- enterAlways -when content is pulled down, immediately app bar will appear.
- snap -when the AppBar is half scrolled and content scrolling stopped, this will allow the AppBar to settle either hidden or appear based on the scrolled size of Toolbar.
<androidx.appcompat.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways|snap"/>
Scrolling with tabs
To achieve this, we need to add TabLayout inside the AppBarLayout and provide the layout_scrollFlags inside TabLayout. That will be enough to achieve this and we can play around with the scrolling behavior like above examples by just altering the layout_scrollFlags.
<android.support.design.widget.AppBarLayout
<androidx.appcompat.widget.Toolbar
/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
Scrolling with Flexible space
To get Flexible space for AppBar, we need to use CollapsingToolbarLayout around the ToolBar tag i.e. CoordinatorLayout in the top and AppBarLayout, CollapsingToolbarLayout, ToolbarLayout inside the order. We need to add height for the AppBarLayout and need to specify app:layout_scrollFlags for CollapsingToolbarLayout.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Reference