Auto-Hide or Auto-Extend Floating Action Button for NestedScrollView in Android

19 Feb, 2021
In the previous article Extended Floating Action Button in Android with Example it’s been discussed how to implement the Extended Floating Action Button (FAB) in Android and more of its functionalities. In this article it’s been discussed it’s one of the features auto-hide or auto-extend the Floating Action Button in Android. Have a look at the following image on what things are discussed in this article. In this article, the nested scroll view is used.
Step 1: Create an empty activity project
Create an empty activity Android studio. And select Java as a programming language.
Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project.
Step 2: Invoking Dependencies in App-level gradle file
First, locate the app-level gradle file in app -> build.gradle.
Invoke the following dependencies to the app level gradle file.
Make sure the system is connected to the network so that it downloads the required dependencies.
for Material design Extended Floating Action Button:
implementation ‘com.google.android.material:material:1.3.0-alpha03’
for NestedScrollView:
implementation ‘androidx.legacy:legacy-support-v4:1.0.0’
Refer to the following image if unable to locate the app-level gradle file and invoke the dependencies.
Step 3: Create sample list_item.xml inside the layout folder
Implement the sample list_item with only one TextView.
Invoke the following code inside the list_item.xml file under the layout folder.
XML
<?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>
Step 4: Working with the activity_main.xml file
The root layout should be Coordinator layout in activity_main.xml.
Further, the NestedScrollViews and one Extended Floating Action button are implemented in the layout with gravity “bottom|end”.
Inside the NestedScrollView layout sample layout is included for the demonstration purpose.
Invoke the following code inside the activity_main.xml file to implement the required UI.
XML
<?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>
Output UI:
Step 5: Now working with the MainActivity.java file
There is a need to handle the NestedScrollView with OnScrollChangeListener. If the NestedScrollView is scrolled down then the ExtendedFloatingAction button should be shrink state, and when scrolled up the FAB should be in an extended state.
Invoke the following code to implement the functionality. Comments are added for better understanding.
Java
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();                }            }        });    }}
Replace the Extended Floating Action Button with Normal Floating Action Button to hide the FAB when scrolled down, and it FAB should appear when scrolled up.
Invoke the following code inside the activity_main.xml file. Here the Extended FAB is replaced with the normal FAB.
XML
<?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>
Output UI:
Now Invoke the following code inside the MainActivity.java file to show or hide the Floating Action Button.
Java
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();                }            }        });    }}
Android-Button
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Navigation Drawer in Android
Android Project folder Structure
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java