How to Create a Collapsing ToolBar and FAB on Scroll with RecyclerView in Android?
In this article, we are going to create a collapsing Toolbar and Floating action button (FAB) on scroll with RecyclerView. Many popular apps have this effect eg. LinkedIn. Below is the sample video to show what we are going to build. Note that we are going to implement this project using the Kotlin language.
Step by Step Implementation
Step 1: Create a new project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Add view binding dependency
Go to build.gradle(app) and the following dependency inside the android tag and click sync now.
Step 3: Working with the activity_main.xml file
Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
Step 4: Create a new layout file and name it a single_item.xml file
Go to the single_item.xml file and refer to the following code. Below is the code for the single_item.xml file. It is the single item layout that we will use in RecyclerView.
Step 5: Create a new model class
Create a new class Language.kt we will use data of custom generic “Language” to pass in the list that will be shown in recycler view.
Step 6: Working with the adapter class
Create a new class RvAdapter.kt this will act as an Adapter class for the recycler view. Comments are added before the code for better understanding.
Step 7: Working with MainActivity.kt
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.