Search code examples
androidandroid-fragmentskotlinandroid-toolbar

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


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!


Solution

  • 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);
    }
    

    }