How to hide ToolBar when I scrolling content up?
Asked Answered
C

5

39

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" />

here my image

Cooncan answered 18/2, 2016 at 8:3 Comment(2)
Try this, mzgreen.github.io/2015/06/23/…Preclude
I am not using Listview and floating action button here @KNeerajLalCooncan
P
63

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>
Popliteal answered 18/2, 2016 at 9:44 Comment(5)
when i scroll my content my tool bar name visible in status barCooncan
i post my output image ,i use your code in my xml but my output like above@Dhawal Sodha ParmarCooncan
@chanti: remove android:fitsSystemWindows="true" from CoordinatorLayout in activity_main.XMLPopliteal
now its working after removing i am facing another problem,my status bar color display in white color@Dhawal Sodha ParmarCooncan
use <item name="android:statusBarColor">@color/colorPrimary</item> in style.xml of v21Popliteal
G
2

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.

Gabardine answered 18/2, 2016 at 8:15 Comment(1)
I added this line in tool bar but still not getting output app:layout_scrollFlags="scroll|enterAlways"@Aritra RoyCooncan
S
0

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>
Strathspey answered 18/2, 2016 at 9:35 Comment(0)
D
0

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.

Deprivation answered 18/2, 2016 at 9:47 Comment(0)
B
0

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"   
    />
Barling answered 17/12, 2021 at 23:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.