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

lndmflngs/memorizing-pager

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

Complete example of use Navigation History with View Pager

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

Result

Feel free to make use of this library, and help me improve it over on GitHub

Example of navigating in the opposite direction

Links

• Source code
• Demo app

If you enjoyed reading this article, it would mean a lot if you show your support with clap and share. Follow me for the updates
Thanks and happy coding!