How to hide ToolBar when I scrolling content up?

Question

I am trying to hide my tool bar when I scroll my text and image with content. Here I use scrollView for getting scroll content. When I scroll content up, how to hide the tool bar?

Here is my XMl code:

content_main.XML:

<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<LinearLayout
    android:paddingTop="?android:attr/actionBarSize"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:id="@+id/textone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="23dp"
        android:textStyle="bold"
        android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "/>

    <ImageView
        android:id="@+id/imge"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/imag_bg"/>


    <TextView
        android:id="@+id/texttwo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="Pretty good, the Toolbar is moving along with the list and getting back just as we expect it to. This is thanks to the restrictions that we put on the mToolbarOffset variable.
        If we would omit checking if it’s bigger than 0 and lower than mToolbarHeight then when
        we would scroll
         up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing.



          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing

          up our list, the Toolbar would move along far away off the screen, so to show it back you
         would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
         position and not more so it’s “sitting” right above the list all of the time and if we
         start scrolling down, we can see it immediately showing
        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the

         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug

        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the
         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug
        It works pretty well, but this is not what we want. It feels weird that you can
        stop it in the middle of
        the
         scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
         Games app
        which I consider as a bug."/>




</LinearLayout>

<View
    android:layout_width="wrap_content"
    android:layout_height="30dp" />
<LinearLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
         android:text="hai"
         android:layout_width="160dp"
         android:layout_height="match_parent" />
    <Button
         android:text="hello"
         android:layout_width="160dp"
         android:layout_height="match_parent" />


</LinearLayout>

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

activity_main.XML

<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent" 
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar"
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_main" />

Answer 1

Just set flag to like app:layout_scrollFlags="scroll|enterAlways"

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextColor="#FFFFFF"
    app:layout_scrollFlags="scroll|enterAlways"   
    />

Answer 2

You can find my solution about your question from here: Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top

This's a working solutio but it's not the best way to implement this animation. With CoordiantorLayout you can relate your views and it's scrolling behaviors.

You can find more info from here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

When i have time i'll try to post a code example for you.

Answer 3

you have to do many changes in your both layout. first use CoordinatorLayout in activity_main.XML like below(change theme as per your requirement).

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <include layout="@layout/content_main" />

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

in content_main.XML use android.support.v4.widget.NestedScrollView instead of ScrollView.

also use app:layout_behavior="@string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.

<android.support.v4.widget.NestedScrollView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textone"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "
                android:textSize="25dp"
                android:textStyle="bold" />

            /// Add your other code here

            </LinearLayout>

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

Answer 4

Wrap activity_main.xml in Coordinator Layout so it will be its parent layout.

<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent" 
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar"
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" 
    app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />



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

Answer 5

This is the best scenario to make use of CoordinatorLayout in your app. CoordinatorLayout is a super-powered FrameLayout which has got a lot of nifty animation tricks upon its sleeves.

The Design library introduces CoordinatorLayout, a layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.

You can start with this and this tutorial.