Android AppBarLayout Scrolling Example

Like whatsapp, on scrolling of listview, automatically toolbar gets hidden. This can be achieved using the Android AppBarLayout, Use this layout to hide the actionbar or appbar when the sibling view is scrolled.

AppBarLayout is introduced from Lollipop onwards, but  through design support library you can add this feature for Android 2.1 or above devices.

Appbar scrolling in Android

Above image is an example of AppBarLayout, it has 3 tabs having fruits list, if the listview is scrolled up the toolbar gets hidden and appears back if it is scrolled down.

Update Gradle with these dependency

compile 'com.android.support:design:22.2.0'
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.0'

activity_main.xml

Now create Toolbar as part of AppBarLayout and make sure to set the app:layout_scrollFlags property, this gives  scrolling experience once sibling is scrolled. include ViewPager and set the scroll behavior. Make CoordinatorLayout as parent of all these views.

Note: If scroll flag is added to Tabs then upon scroll along with toolbar tab layout also gets hidden.

UI Layout XML.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/id_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Create a List to show the fruits. To get scrolling experience use RecyclerView, normal listview does not work.

fruitlistlayout.xml

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_recycleview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Create List item to show the data i.e fruit_list_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/id_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"/>

</LinearLayout>

Now create Fragment class to show the list

FruiteListFragment.java

public class FruiteListFragment extends Fragment {

    public static final String[] FruiteList = {"Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate","Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate","Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate","Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate","Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate","Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate",
            "Apple", "Orange", "Mango", "Grapes", "Jackfruit","pomegranate" };

    //convert array to list
    List fruiteslist = Arrays.asList(FruiteList);

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        RecyclerView rv = (RecyclerView) inflater.inflate(
                R.layout.fruiltlistlayout, container, false);

        rv.setLayoutManager(new LinearLayoutManager(rv.getContext()));

        rv.setAdapter(new recycleview_adapter(fruiteslist));

        return rv;
    }
}

Create adapter class to render the list data

recycleview_adapter.java

public class recycleview_adapter extends RecyclerView.Adapter<recycleview_adapter.ViewHolder> {

    List<String> mFruiteList;

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public final View mView;

        public final TextView mTextView;

        public ViewHolder(View view) {
            super(view);
            mView = view;
            //mImageView = (ImageView) view.findViewById(R.id.avatar);
            mTextView = (TextView) view.findViewById(R.id.id_text_view);
        }
    }

    public recycleview_adapter(List<String> items) {

        mFruiteList = items;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.fruit_list_item, parent, false);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {

        holder.mTextView.setText(mFruiteList.get(position));
    }

    @Override
    public int getItemCount() {
        return mFruiteList.size();
    }
}

Since we are using view pager to show tabs, create pager adapter to handle multiple tabs

pageradapter.java

public class PagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList();

    private final List<String> mFragmentTitleNames = new ArrayList();

    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleNames.add(title);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleNames.get(position);
    }
}

In Activity class set up the toolbar, create fragments and add them to tab layout.

public class MainActivity extends AppCompatActivity {

    PagerAdapter mSwipingViewAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        setSupportActionBar(toolbar);

        ViewPager viewPager = (ViewPager) findViewById(R.id.id_viewpager);

        PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FruiteListFragment(), "Fruit Tab1");
        adapter.addFragment(new FruiteListFragment(), "Fruit Tab2");
        adapter.addFragment(new FruiteListFragment(), "Fruit Tab3");
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.id_tabs);
        tabLayout.setupWithViewPager(viewPager);


    }

Application theme in style.xml should inherit with NoActionBar i.e

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>

Now run the application and the output is shown below, try scrolling up and down you can see the tabs are moving up and hides the toolbar.

Appbar ViewPager tabs scroll

To make tabs & app bar more colorful, override these flags in theme & run to see the output.

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff6ab77f</item>
        <item name="colorPrimaryDark">#ff5fb71a</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>