How to Save Fragment States with BottomNavigationView in Android?
In Android applications, Activities and Fragments are from the foundation of the UI layer. It is now standard practice to load the UI with multiple fragments. For example, Instagram, Twitter, and a slew of other well-known apps. Imagine browsing some tweets in the Twitter app’s HomeFragment, navigating to the search screen, and then returning to the Home Screen only to discover that the Home Screen has been reloaded and now displays the first tweet! This is not a good user experience because the user must scroll back to the previous tweet. In this article, we’ll look at a simple method for dealing with and avoiding the recreation of these fragments, as well as saving their states. We’ll use a BottomNavigation View because we’ll be using multiple fragments on a single activity.
- Make a Project
- Begin by creating a new Android Studio project.
- Choose an empty activity and a name of your choice for the next step.
- Name of the package: Anything you want.
- Kotlin is the language.
Your first project is now complete.
Before we add the Bottom Navigation view to our activity main.xml file, we must first create a menu resource for the icons and text that will be displayed on our bottom navigation view! The following is the Navigation.xml file from our menu resource folder:
Let’s now include the bottom Navigation view component in our layout file!
The layout we’ve included here is the one we’ll use to hold the fragment. So, let’s get started on it.
What is the purpose of this app?
We will simply create a simple app with three fragments: MindOrksFragment, AfterAcademyFragment, and UserFragment. The GeeksforGeeksFragment and the CourseActiviy each have two like buttons and two text fields for displaying the number of likes. The number of visits is displayed by a click button and text in the UserFragment. The main goal of this app is to prevent fragments from being recreated when the user switches between them.
So, how to do it?
Let’s make instances for our fragments as well as a global instance (let’s call it activeFragment) that stores the currently viewed fragment.
Let’s now add our fragments to the fragment manager:
Let’s take care of onNavigationItemSelected on our BottomNavigationView component now:
GeekTip: Remember that we have stored our current fragment in our activeFragment field, which should be visible to the user.
Now all we have to do is to hide and show what we have created in a well-designed manner, so as to prevent any mishaps!
show() and hide()
Instead of adding and replacing fragments (creating fragment instances), we use the helper functions show() and hide(), which do not destroy or recreate our fragments but instead hide and show them. Because the fragment instances are not destroyed, the user can see the previous state of the fragment!
You can use a recycler view to replace a fragment UI by loading a list of 50+ items, scrolling to a random position, switching between fragments, and returning. This logic can be applied to a UI that includes a Scroll View. We hope this article has been of some assistance to you.