how to make bottomnavigationview with fab at center and hide the whole view when scrolling

Question

I am developing an app with bottomnavigationview with fab at the center.I need to hide the whole view(bottomview + fab)when i am scrolling like swiggy app.I have attached my layout picture and xml file.i implemented the layout ,but bottomnavigation and fab not hiding when i am scrolling.Nowi need to hide the bottomnavigation and fab to hide while scrolling.

 <?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:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="always"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    tools:context=".DeliveryManLandingScreen">




    <RelativeLayout
        android:id="@+id/rel_lay"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/rel_view">

        </FrameLayout>


        <View
            android:id="@+id/rel_view"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_above="@+id/mainFrame"

            android:layout_alignTop="@+id/mainFrame"
            android:layout_marginBottom="3dp"
            android:background="@color/colorPrimary" />

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/mainFrame"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="2dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


            <android.support.design.widget.BottomNavigationView
                android:id="@+id/itemBottomList"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="@color/textColor"
                android:overScrollMode="always"
                app:elevation="8dp"
                app:itemHorizontalTranslationEnabled="true"
                app:itemIconTint="@drawable/activity_delivery_bg"
                app:itemTextColor="@drawable/activity_delivery_bg"
                app:labelVisibilityMode="labeled"
                app:layout_behavior="android.com.foodorderapplication.BottomNavigationBehavior"
                app:menu="@menu/bottom_items_navigator" />

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true"

            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_gravity="fill_vertical"
            android:layout_marginBottom="29dp"
            android:background="@color/textColor"
            android:backgroundTint="#f5fffa"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="centerCrop"
            app:borderWidth="1dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:rippleColor="#f5fffa"
            app:srcCompat="@drawable/offers" />

    </RelativeLayout>


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

My current layout

thank you.i understand the layout.but i need to hide the bottomview and fab when scrolling.is it possible in that layout? — kavinmkk6, Feb 14 '19 at 08:06

score 0 · Answer 1 · answered Feb 14 '19 at 08:59

If you are using RecyclerView for scrolling you can try out this code:

   recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                switch (newState) {
                    // you are scrolling now 
                    case RecyclerView.SCROLL_STATE_DRAGGING:
                        // here your *view* should be the parent of bottom navigation and fab 
                        TransitionManager.beginDelayedTransition(view);
                        // hide view
                        view.setVisibility(View.GONE);
                        break;
                }
            }
    });

TransitionManager will help you with basic transition animation. Note that you have to call view.setVisibility(View.VISIBLE) when you stop scrolling, in order to show your bottom navigation again

how to make bottomnavigationview with fab at center and hide the whole view when scrolling

1 Answers1