What do I need to do to make my toolbar hide when I scroll?

Question

I'm trying to make it so that my toolbar will hide itself when I scroll a fragment containing a recycler view, inflated in a framelayout.

I've already tried changing the outermost relativelayout and coordinatorlayout and moving some things around, as well as adding scroll tags, none of which seemed to work (I'm probably doing them incorrectly).

Here's the layout of the activity in question:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mainLayout"
    android:background="@color/colorMain"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frag_container"
        android:clipToPadding="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/toolbar_top"
        android:layout_above="@id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_above="@id/bottom_navigation"
        app:rippleColor="@color/colorPrimary"
        android:clickable="true"
        android:layout_margin="18dp"
        android:tint="@color/colorMain"
        app:srcCompat="@drawable/ic_plus" />

    <androidx.appcompat.widget.Toolbar
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/toolbar_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:elevation="1dp"
        android:background="@color/colorMain">

        <ImageButton
            android:id="@+id/accountButton"
            android:layout_gravity="start"
            android:tint="@color/colorSecondary"
            android:background="?attr/selectableItemBackgroundBorderless"
            app:srcCompat="@drawable/ic_account"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:contentDescription="@string/account" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_title"
            android:textColor="@color/colorSecondary"
            android:fontFamily="@font/productsansmedium"
            android:textSize="20sp"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title" />

    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:theme="@style/Widget.BottomNavigationView"
        android:background="@color/bottomNavColor"
        app:itemIconTint="@drawable/navbar_color_selector"
        app:itemTextColor="@drawable/navbar_color_selector"
        app:elevation="20dp"
        android:id="@+id/bottom_navigation"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_items" />
</RelativeLayout>

Thanks in advance for helping!

Plese follow this link. May be it can help you. https://stackoverflow.com/questions/35475884/how-to-hide-toolbar-when-i-scrolling-content-up-in-android — Suman Kumar Dash, Sep 06 '19 at 01:35
You need to change your XML root to CoordinatorLayout to do it easily. Follow link provided by @SumanDash you will get idea. — nitinkumarp, Sep 06 '19 at 06:19

Black mamba · Answer 1 · 2019-09-06T06:16:09.443

you can use collapsing toolbar Have you seen? https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example?

after integrating collapsingtoolbarlayout you can use appbarlayout progmatically runtime to hide toolbar when you scroll like this

AppBarLayout appBarLayout;
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                //at toolbar position

            } else if (verticalOffset == 0) {
                //totally expanded

            } else {
                //somewhere in between
            }
        }
    });

for kotlin

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
        if (Math.abs(verticalOffset) == appBarLayout.totalScrollRange) {
            //at toolbar position

        } else if (verticalOffset == 0) {
            //totally expanded

        } else {
            //somewhere in between
        }
    })

score 0 · Accepted Answer · answered Sep 06 '19 at 06:25

The Feature you are requesting is called Collapsingtoolbarlayout And you can refer this

            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/photo"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

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

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

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_info" />

after this you have to set menu items

<menu 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"
tools:context="com.journaldev.collapsingtoolbarlayout.ScrollingActivity">
<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="never" />

<item
    android:id="@+id/action_info"
    android:orderInCategory="200"
    android:title="info"
    app:showAsAction="ifRoom"
    android:icon="@android:drawable/ic_dialog_info"/>

And in java code do this

public class ScrollingActivity extends AppCompatActivity {

private Menu menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_scrolling);
    final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

    AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        boolean isShow = false;
        int scrollRange = -1;

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (scrollRange == -1) {
                scrollRange = appBarLayout.getTotalScrollRange();
            }
            if (scrollRange + verticalOffset == 0) {
                isShow = true;
                showOption(R.id.action_info);
            } else if (isShow) {
                isShow = false;
                hideOption(R.id.action_info);
            }
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    this.menu = menu;
    getMenuInflater().inflate(R.menu.menu_scrolling, menu);
    hideOption(R.id.action_info);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    } else if (id == R.id.action_info) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

private void hideOption(int id) {
    MenuItem item = menu.findItem(id);
    item.setVisible(false);
}

private void showOption(int id) {
    MenuItem item = menu.findItem(id);
    item.setVisible(true);
}

}

What do I need to do to make my toolbar hide when I scroll?

2 Answers2