Skip to content
Related Articles

Related Articles

Auto-Hide or Auto-Extend Floating Action Button for NestedScrollView in Android
  • Last Updated : 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.

Auto Hide or Extend Floating Action Button

Steps to Implement auto-hide or auto-extend Floating Action Button

Step 1: Create an empty activity 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: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: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:

Auto Hide or Extend Floating Action Button

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

Output: Run on Emulator

Now replacing the Extended Floating Action button with normal Floating Action Button

  • 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: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:

Auto Hide or Extend Floating Action Button

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

Output: Run on Emulator

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :