android - tutorial - Ocultar/Mostrar navegación inferior Ver en desplazamiento

bottomnavigationview hide on scroll

Question

Tengo que ocultar la vista de navegación inferior en el desplazamiento hacia arriba y mostrar en el desplazamiento hacia abajo. ¿Cómo implementar esto? mi diseño es así

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@+id/navigation"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="5dp">

        <FrameLayout
            android:id="@+id/container1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
          />


    </LinearLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:menu="@menu/dashboard_slider_menu" />

</RelativeLayout>

He adjuntado captura de pantalla de la vista. Por favor, compruébalo.

Answer 1

1. Actualice su proyecto a Androidx, es decir, Refactor >> Migre a Androidx (versión mínima de Android Studio 3.4)
2. Usando el archivo xml predeterminado del menú de navegación inferior, reemplace el diseño de restricción principal con el diseño de coordinador .
3. Agregue la aplicación de línea : layout_behavior = "com.google.android.material.behavior.HideBottomViewOnScrollBehavior"

es decir

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".dashboards.Admin_dashboard_main">

    <include layout="@layout/toolbar" />
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_area"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="0dp"
        android:padding="0dp">

        <!-- Fragments Container -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:context="MainActivity"
            tools:showIn="@layout/activity_tenant_dashboard"
            android:id="@+id/fragment_container">

        </FrameLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
    <!-- Bottom Navigation View -->

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_gravity="bottom"
        app:menu="@menu/menu_admin_dashboard_main"
        app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 2

Prueba esto,

 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                if (dy > 0 && bottom_navigation.isShown()) {
                    bottom_navigation.setVisibility(View.GONE);
                } else if (dy < 0 ) {
                    bottom_navigation.setVisibility(View.VISIBLE);

                }
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {

                super.onScrollStateChanged(recyclerView, newState);
            }
        });

Imagen mientras se desplaza hacia arriba: -

Imagen mientras se desplaza hacia abajo:

Answer 3

Respuesta actualizada después de las últimas actualizaciones de la biblioteca :

¡Ocultar el BottomNavigationView en el desplazamiento ahora está disponible con solo una bandera en el diseño! A partir de la versión 28.0.0-alpha1 o el material / androidX 1.0.0-alpha1 .

Actualicé mi proyecto utilizando el último enfoque ya que la versión ahora es una versión estable. Actualización: ¡ Use la versión completamente publicada "1.0.0" !

El nuevo comportamiento disponible de HideBottomViewOnScrollBehavior se llama HideBottomViewOnScrollBehavior . BottomNavigationView en BottomNavigationView como app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior" como se describe en los últimos docs .

Aquí hay un ejemplo completo:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="selected"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
        android:layout_gravity="bottom"
        app:layout_insetEdge="bottom"
        app:menu="@menu/navigation" />

Al igual que con la ocultación de la barra de herramientas en el desplazamiento, debe asegurarse de que el contenido sea una clase que admita el último desplazamiento como RecyclerView y NestedScrollView .

Esto garantiza que todo funcione como se muestra en la animation en las especificaciones de diseño

PD: labelVisibilityMode es otra adición genial que obtienes gratis por tomarse la molestia de actualizar y que se describe en profundidad en las especificaciones de diseño .

Answer 4

Utilizar esta

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener()
        {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy)
            {
                if (dy > 0 ||dy<0 && csButtonLay.isShown())
                {
                    bottomBar.setVisibility(View.GONE);
                }
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState)
            {
                if (newState == RecyclerView.SCROLL_STATE_IDLE)
                {
                    bottomBar.setVisibility(View.VISIBLE);
                }

                super.onScrollStateChanged(recyclerView, newState);
            }
        });

Answer 5

ACTUALIZAR

Actualice a la última versión de la biblioteca de soporte 28.0.0 o higher version y solo agregue un atributo a BottomNavigationView .

<BottomNavigationView
 ....
 ....
 app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

Nota : - Su XML debe seguir la estructura de XML dada a continuación en la respuesta anterior.

ANTIGUA RESPUESTA (Todavía funciona)

Necesita una clase auxiliar para hacer esto. Esta solución funciona como la Guía de diseño de materiales de Google.

Crear una clase BottomNavigationViewBehavior

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {

    private int height;

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, BottomNavigationView child, int layoutDirection) {
        height = child.getHeight();
        return super.onLayoutChild(parent, child, layoutDirection);
    }

    @Override
    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
                                   BottomNavigationView child, @NonNull 
                                   View directTargetChild, @NonNull View target,
                                   int axes, int type)
    {
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull BottomNavigationView child,
               @NonNull View target, int dxConsumed, int dyConsumed,
               int dxUnconsumed, int dyUnconsumed, 
                @ViewCompat.NestedScrollType int type)
    {
       if (dyConsumed > 0) {
           slideDown(child);
       } else if (dyConsumed < 0) {
           slideUp(child);
       }
    }

    private void slideUp(BottomNavigationView child) {
        child.clearAnimation();
        child.animate().translationY(0).setDuration(200);
    }

    private void slideDown(BottomNavigationView child) {
        child.clearAnimation();
        child.animate().translationY(height).setDuration(200);
    }
}

Para usar este comportamiento, debe usar el diseño de cooradinator ...

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kliff.digitaldwarka.activity.MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/myAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:descendantFocusability="beforeDescendants"
            android:focusableInTouchMode="true"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>
        </android.support.design.widget.AppBarLayout>

        <!---your RecyclerView/Fragment Container Layout-->
        <FrameLayout
             android:id="@+id/container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior" />


         <android.support.design.widget.BottomNavigationView
             android:id="@+id/bottom_nav"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             app:itemBackground="@color/white"
             app:menu="@menu/bottom_nav_menu" />

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

      <!---NavigationView-->
</android.support.v4.widget.DrawerLayout>

Agregue este código a su Actividad que contiene navegación inferior.

mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_nav);
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mBottomNavigationView.getLayoutParams();
    layoutParams.setBehavior(new BottomNavigationViewBehavior());