Botón de acción flotante Auto-Hide o Auto-Extend para NestedScrollView en Android

En el artículo anterior Botón de acción flotante extendido en Android con ejemplo , se discutió cómo implementar el Botón de acción flotante extendido (FAB) en Android y más de sus funcionalidades. En este artículo se ha discutido que es una de las características para ocultar o extender automáticamente el botón de acción flotante en Android. Eche un vistazo a la siguiente imagen sobre qué cosas se discuten en este artículo. En este artículo, se utiliza la vista de desplazamiento anidado.

Pasos para implementar el botón de acción flotante de ocultar o extender automáticamente

Paso 1: crear un proyecto de actividad vacío

• Cree una actividad vacía en el estudio de Android. Y seleccione Java como lenguaje de programación.
• Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? para saber cómo crear un proyecto de Android Studio de actividad vacía.

Paso 2: invocar dependencias en el archivo gradle de nivel de aplicación

• Primero, ubique el archivo gradle de nivel de aplicación en app -> build.gradle.
• Invoque las siguientes dependencias en el archivo Gradle de nivel de aplicación.
• Asegúrese de que el sistema esté conectado a la red para que descargue las dependencias requeridas.

para Material design Botón de acción flotante extendida:

implementación ‘com.google.android.material:material:1.3.0-alpha03’

para Vista de desplazamiento anidado:

implementación ‘androidx.legacy:legacy-support-v4:1.0.0’

• Consulte la siguiente imagen si no puede ubicar el archivo Gradle de nivel de aplicación e invocar las dependencias.

Paso 3: Cree una muestra list_item.xml dentro de la carpeta de diseño

• Implemente el list_item de muestra con solo un TextView .
• Invoque el siguiente código dentro del archivo list_item.xml en la carpeta de diseño.

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="32dp"
    android:text="Some Content"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    tools:ignore="HardcodedText">
</TextView>

Paso 4: trabajar con el archivo activity_main.xml

• El diseño raíz debe ser Diseño de coordinador en activity_main.xml.
• Además, NestedScrollViews y un botón de acción flotante extendida se implementan en el diseño con gravedad «inferior|extremo».
• Dentro del diseño de muestra de NestedScrollView se incluye un diseño de muestra con fines de demostración.
• Invoque el siguiente código dentro del archivo activity_main.xml para implementar la interfaz de usuario requerida.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <!--repeatedly invoke the list_item layout
                 inside the NestedScrollView-->
            <!--this consumes lot memory resource from the device,
                 this is done only for demonstration purposes-->
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
        </LinearLayout>
 
    </androidx.core.widget.NestedScrollView>
 
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="@color/colorPrimary"
        android:text="ACTIONS"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_add_black_24dp"
        app:iconTint="@android:color/white" />
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

Paso 5: ahora trabajando con el archivo MainActivity.java

• Es necesario manejar NestedScrollView con OnScrollChangeListener. Si NestedScrollView se desplaza hacia abajo, el botón ExtendedFloatingAction debe tener un estado reducido y, cuando se desplaza hacia arriba, FAB debe tener un estado extendido.
• Invoque el siguiente código para implementar la funcionalidad. Se agregan comentarios para una mejor comprensión.

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register the extended floating action Button
        final ExtendedFloatingActionButton extendedFloatingActionButton = findViewById(R.id.extFloatingActionButton);
 
        // register the nestedScrollView from the main layout
        NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
 
        // handle the nestedScrollView behaviour with OnScrollChangeListener
        // to extend or shrink the Extended Floating Action Button
        nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // the delay of the extension of the FAB is set for 12 items
                if (scrollY > oldScrollY + 12 && extendedFloatingActionButton.isExtended()) {
                    extendedFloatingActionButton.shrink();
                }
 
                // the delay of the extension of the FAB is set for 12 items
                if (scrollY < oldScrollY - 12 && !extendedFloatingActionButton.isExtended()) {
                    extendedFloatingActionButton.extend();
                }
 
                // if the nestedScrollView is at the first item of the list then the
                // extended floating action should be in extended state
                if (scrollY == 0) {
                    extendedFloatingActionButton.extend();
                }
            }
        });
    }
}

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
 
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register the extended floating action Button
        val extendedFloatingActionButton =
            findViewById<ExtendedFloatingActionButton>(R.id.extFloatingActionButton)
 
        // register the nestedScrollView from the main layout
        val nestedScrollView = findViewById<NestedScrollView>(R.id.nestedScrollView)
 
        // handle the nestedScrollView behaviour with OnScrollChangeListener
        // to extend or shrink the Extended Floating Action Button
        nestedScrollView.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> // the delay of the extension of the FAB is set for 12 items
            if (scrollY > oldScrollY + 12 && extendedFloatingActionButton.isExtended) {
                extendedFloatingActionButton.shrink()
            }
 
            // the delay of the extension of the FAB is set for 12 items
            if (scrollY < oldScrollY - 12 && !extendedFloatingActionButton.isExtended) {
                extendedFloatingActionButton.extend()
            }
 
            // if the nestedScrollView is at the first item of the list then the
            // extended floating action should be in extended state
            if (scrollY == 0) {
                extendedFloatingActionButton.extend()
            }
        })
    }
}
//This cod eis written by Ujjwal Kumar Bhardwaj

Salida: ejecutar en el emulador

Ahora reemplazando el botón de acción flotante extendida con el botón de acción flotante normal

• Reemplace el Botón de acción flotante extendido con el Botón de acción flotante normal para ocultar el FAB cuando se desplaza hacia abajo, y debería aparecer FAB cuando se desplaza hacia arriba.
• Invoque el siguiente código dentro del archivo activity_main.xml. Aquí, el FAB extendido se reemplaza con el FAB normal.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <!--repeatedly invoke the list_item layout
                 inside the NestedScrollView-->
            <!--this consumes lot memory resource from the device,
                this is done only for demonstration purposes-->
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
            <include layout="@layout/list_item" />
 
        </LinearLayout>
 
    </androidx.core.widget.NestedScrollView>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/extFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="@color/colorPrimary"
        android:text="ACTIONS"
        android:textColor="@android:color/white"
        app:srcCompat="@drawable/ic_add_black_24dp" />
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

• Ahora invoque el siguiente código dentro del archivo MainActivity.java para mostrar u ocultar el botón de acción flotante.

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register the floating action Button
        final FloatingActionButton extendedFloatingActionButton = findViewById(R.id.extFloatingActionButton);
 
        // register the nestedScrollView from the main layout
        NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
 
        // handle the nestedScrollView behaviour with OnScrollChangeListener
        // to hide or show the Floating Action Button
        nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // the delay of the extension of the FAB is set for 12 items
                if (scrollY > oldScrollY + 12 && extendedFloatingActionButton.isShown()) {
                    extendedFloatingActionButton.hide();
                }
 
                // the delay of the extension of the FAB is set for 12 items
                if (scrollY < oldScrollY - 12 && !extendedFloatingActionButton.isShown()) {
                    extendedFloatingActionButton.show();
                }
 
                // if the nestedScrollView is at the first item of the list then the
                // floating action should be in show state
                if (scrollY == 0) {
                    extendedFloatingActionButton.show();
                }
            }
        });
    }
}

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register the floating action Button
        val extendedFloatingActionButton =
            findViewById<FloatingActionButton>(R.id.extFloatingActionButton)
 
        // register the nestedScrollView from the main layout
        val nestedScrollView = findViewById<NestedScrollView>(R.id.nestedScrollView)
 
        // handle the nestedScrollView behaviour with OnScrollChangeListener
        // to hide or show the Floating Action Button
        nestedScrollView.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> // the delay of the extension of the FAB is set for 12 items
            if (scrollY > oldScrollY + 12 && extendedFloatingActionButton.isShown) {
                extendedFloatingActionButton.hide()
            }
 
            // the delay of the extension of the FAB is set for 12 items
            if (scrollY < oldScrollY - 12 && !extendedFloatingActionButton.isShown) {
                extendedFloatingActionButton.show()
            }
 
            // if the nestedScrollView is at the first item of the list then the
            // floating action should be in show state
            if (scrollY == 0) {
                extendedFloatingActionButton.show()
            }
        })
    }
}
//This code is written by Ujjwal Kumar Bhardwaj

Salida: ejecutar en el emulador