How to handle Bottom Navigation perfectly with back pressed (ViewPager, ViewPager2, FrameLayout)
Looking at the YouTube app, did you also want to do the same bottom navigation as there? Creating a similar interface is not such a difficult task, the logic of pressing is another thing
Let’s take a look how to make the same logic like on YouTube App
What we gotta do?
We will use memorizing-pager library. Setting up NavigationHistory with BottomNavigationView will allow us to navigate in the opposite direction of selected items history
Project setup
First, you have to import the library to your Android project
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Add the JitPack repository to your root build.gradle at the end of repositories
dependencies {
implementation 'com.github.lndmflngs:memorizing-pager:2.0.5'
}
Then add the dependency to your application-level build.gradle (Make sure that you are using the latest version)
View Pager
We can implement listeners of ViewPager and BottomNavigationView in Activity and setting up them like in the code below
Activity.onBackPressed
override fun onBackPressed() {
if (!navigationHistory.isEmpty()) {
// Use false to transition immediately
// before 2.0.4 was navigationHistory.onBackPressed()
pager.setCurrentItem(navigationHistory.popLastSelected(), false) } else if (pager.currentItem != HOME_NAVIGATION_ITEM) {
// return to default/home item
pager.setCurrentItem(HOME_NAVIGATION_ITEM, false)
} else {
super.onBackPressed()
}
}
BottomNavigationView.OnNavigationItemSelectedListener
override fun onNavigationItemSelected(item: MenuItem): Boolean
= with(item) {
return if (!isItemSelected(itemId)) {
pager.setCurrentItem(order, false)
navigationHistory.pushItem(order)
true
} else {
false
}
}
ViewPager.OnPageChangeListener
object : ViewPager.OnPageChangeListener {
override fun onPageSelected(position: Int) {
navigation.menu.getItem(position).isChecked = true
}
...
}
Pay attention, you should setup menu items property android:orderInCategory with values from 0 to numPages (0, 1, and etc.). That why we can use item.order
View Pager 2
Handle onBackPressed and listeners as for ViewPager
For disable swiping in ViewPager we use NoSwipeViewPager. For ViewPager2 you can use pager.isUserInputEnabled = false
Complete example of use Navigation History with View Pager 2
Frame Layout
For implementing navigation with fragment container setting up listeners like in the code below
Activity.onBackPressed
override fun onBackPressed() = with(navigationHistory) {
if (!isEmpty()) {
selectBottomNavigationItem(popLastSelected())
} else {
handleBackStackFragments()
}
BottomNavigationView.OnNavigationItemSelectedListener, ViewPager.OnPageChangeListener
override fun onNavigationItemSelected(item: MenuItem): Boolean
= with(item) {
return if (!isItemSelected(itemId)) {
pager.setCurrentItem(order, false)
navigationHistory.pushItem(order)
true
} else {
false
}
}
Complete example of use Navigation History with Frame Layout
If you enjoyed reading this article, it would mean a lot if you show your support with clap and share. Follow me for the updatesThanks and happy coding!