App bar layout is provided as part of design support library. It is a linear vertical layout with extra features that enable development of android applications which follow material design guidelines. To fully utilize the functionality of App bar layout, it should be used as a direct child of coordinator layout.
Coordinator layout provides framework to enable communication between views and inject behavior to view. App bar layout uses this framework, which is why it needs to be used as a direct child of coordinator layout to make all the functionality of it work. To know more about coordinator layout and custom behavior, read coordinator layout and custom behavior article.
Child views of app bar layout scroll based on scrolling events of sibling of app bar layout in coordinator layout. You can control scroll behavior of child views of app bar layout by specifying layout_scrollFlags in layout xml or by calling setScrollFlags method. The communication between scrollable sibling view of coordinator layout and app bar layout can happen if sibling’s layout_behavior is set to use AppBarLayout.ScrollingViewBehavior.
I am going to show how to use app bar layout with coordinator layout to get the UI experience that app bar layout provides. In below example, App bar layout has tool bar and tab layout as children. App bar layout and nested scroll view are children of coordinator layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:id="@+id/appbar_layout_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zoftino.materialdesign.AppBarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/appbar">
<android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"
android:elevation="4dp" app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/tabL" app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabItem
android:text="@string/stores"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/stores"></android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:text="@string/coupons"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/coupons"></android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:text="@string/cashback"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/cashback"></android.support.design.widget.TabItem>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView android:id="@+id/coupons_lst" android:layout_width="match_parent" android:layout_height="match_parent"></TextView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
package com.zoftino.materialdesign;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;
public class AppBarLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_appbar_layout);
Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
setSupportActionBar(myToolbar);
TextView tv =(TextView)findViewById(R.id.coupons_lst);
tv.setTextSize(25);
tv.setText(CouponStoreData.arrayOfCoupons.toString());
}
}
If you want to show only tab layout and scroll app bar off screen in response to scroll events of app bar layout and app bar layout siblings, you can just remove the layout_scrollFlags attribute from tab layout definition in xml layout file.
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/tabL"></android.support.design.widget.TabLayout>