Hide Action Bar Title Bar Toolbar on Scroll Down Android Studio example tutorial

How to automatically hide toolbar on scroll down and show on scroll up in android using CoordinatorLayout widget.

In this tutorial we are going to learn about some amazing properties of CoordinatorLayout with the combination of NestedScrollView. Hiding toolbar on scroll down view firstly sees in Google play store and then became so much popular because of its full screen command facility which will help the user and free the screen by hiding the toolbar so user can see more items at a single time on screen. So here is the complete step by step tutorial for Hide Action Bar Title Bar Toolbar on Scroll Down Android Studio example tutorial.

android-project-download-code-button

Note :  Please follow the below steps very carefully in your android application project:

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.2.+'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

android-support-design

Here your go friends….Now We are going start coding.

How to Hide Action Bar Title Bar Toolbar on Scroll Down Android Studio example tutorial.

Code for styles.xml file.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Code for colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="toolbarColor">#ffffff</color>

</resources>

Code for MainActivity.java file.

package com.android_examples.hidetoolbaronscrolldown_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

        toolbar = (Toolbar)findViewById(R.id.toolbar1);

        toolbar.setTitleTextColor(getResources().getColor(R.color.toolbarColor));

        setSupportActionBar(toolbar);
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/DrawerLayout"
    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.support.design.widget.CoordinatorLayout
        android:id="@+id/CoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

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

                 />

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

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/NestedScrollView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:id="@+id/LinearLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">


                <TextView
                    android:text="TextView 1"
                    android:id="@+id/textview1"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#F44336"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 2"
                    android:id="@+id/textview2"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#E91E63"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 3"
                    android:id="@+id/textview3"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#2196F3"
                    android:textColor="#FAFAFA"/>


                <TextView
                    android:text="TextView 4"
                    android:id="@+id/textview4"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#FF9800"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 5"
                    android:id="@+id/textview5"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#009688"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 6"
                    android:id="@+id/textview6"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#F4FF81"
                    android:textColor="#000000"/>

                <TextView
                    android:text="TextView 7"
                    android:id="@+id/textview7"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#FFEB3B"
                    android:textColor="#000000"/>

                <TextView
                    android:text="TextView 8"
                    android:id="@+id/textview8"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#F44336"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 9"
                    android:id="@+id/textview9"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#E91E63"
                    android:textColor="#FAFAFA"/>

            </LinearLayout>

        </android.support.v4.widget.NestedScrollView>

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

</android.support.v4.widget.DrawerLayout>

Screenshots:

Hide Action Bar Title Bar Toolbar on Scroll Down Android Studio example tutorial

Hide-Toolbar-2

Hide-Toolbar-3

Click here to download Hide Action Bar Title Bar Toolbar on Scroll Down Android Studio example tutorial project with source code.