Custom Toolbar not hiding when using scrollFlags

Question

What I am trying to do: I am trying to implement a feature that hides a Toolbar when the user scrolls down and makes it visible when the user scrolls up. Just like in the eBay app, the search bar disappears when the user scrolls down but appears at the top when the user scrolls up.

I have tried using app:layout_scrollFlags="scroll|enterAlways" but it doesn't hide the Toolbar when I scroll down.

XML CODE:

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include
        android:id="@+id/toolBar"
        layout="@layout/toolbar" />
    <include
        android:id="@+id/searchToolBar"
        layout="@layout/search_toolbar" />

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


<android.support.v4.widget.DrawerLayout
    android:id="@+id/main_activity_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity">


<ScrollView
    android:id="@+id/searchBarScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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


    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/camera" />
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/camera" />
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/camera" />

</LinearLayout>


</ScrollView>



    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/navigation_menu">

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

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


</LinearLayout>

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

ToolBar Layouts

search_toolbar

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.Toolbar 
 xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/ebayBlue"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
android:id="@+id/searchtoolBar">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_corners"
        android:backgroundTint="@color/white"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:padding="10dp">

        <ImageView
            android:id="@+id/searchImage"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_centerVertical="true"
            android:layout_marginStart="16dp"
            android:src="@drawable/search" />

        <TextView
            android:id="@+id/search_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="12dp"
            android:layout_toEndOf="@+id/searchImage"
            android:onClick="searchWindow"
            android:text="Search for anything"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/mic_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_centerVertical="true"
            android:layout_marginEnd="18dp"
            android:layout_toLeftOf="@+id/camera_image"
            android:src="@drawable/mic" />

        <ImageView
            android:id="@+id/camera_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="16dp"
            android:src="@drawable/camera" />
    </RelativeLayout>

 </android.support.v7.widget.Toolbar>

main toolbar

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/ebayBlue"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light"
android:id="@+id/toolBar">

<ImageView
    android:layout_width="75dp"
    android:layout_height="40dp"
    android:src="@drawable/ebaylogo"
    android:layout_gravity="left"/>

</android.support.v7.widget.Toolbar>

MainActivity.java

public class MainActivity extends AppCompatActivity {

// ToolBar
Toolbar toolbar;
Toolbar searchToolBar;
// Drawer
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mMenuToggle;

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

    // Sets toolbar
    toolbar = findViewById(R.id.toolBar);
    searchToolBar = findViewById(R.id.searchToolBar);
    setSupportActionBar(searchToolBar);
    setSupportActionBar(toolbar);

    // Main Activity DrawerLayout with Toggle
    mDrawerLayout = findViewById(R.id.main_activity_drawer_layout);

    // Menu Toggle Button for Drawer
    mMenuToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, 
 R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    mDrawerLayout.addDrawerListener(mMenuToggle);
    mMenuToggle.syncState();

}}

Expected & Actual Results: The Toolbar android:id="@+id/searchToolbar" should be hidden when the user scrolls down and should be visible when the user scrolls up. Right now with the nothing is happening.

Answer 1

In your case, I would like to suggest using a BottomSheet instead of your LinearLayout which is much harder to implement to achieve the behaviour that you want. The usual implementation of BottomSheet does not cover the full screen, however, you can modify this to have the full-screen height.

Here is a nice implementation which might help.