I'm new to android development and need some guidance. I'm trying to implement functionality like Instagram Bottom Navigation. Let me describe what do I mean by the functionality.
Desired Functionality
Bottom Navigation should display persistently on most of the screens (excluding a few i.e. AddPostScreen)
I have this bottom navigation with Home, Discover, AddPost, Market, and Profile. Tapping on each option should bring the relative screens. (I know it's very basic bottom navigation functionality I'm mentioning it here to better understand the next point)
Opening a new screen will open on top of the original screen. For example, If I'm at the Profile screen and open the follower's screen, It should open on top of the profile so that closing the follower's screen should bring the profile. From the Followers screen, other screens can also be opened just like this. If I open screens in this order: Profile->followers->A->B then closing (both from the on-screen back button and mobile's android back button) B will bring A, closing A should bring followers, and so on.
Second tap on an option of bottom navigation should bring the original screen and close all the screens on top of it. In the above example If the user taps the profile, the other screens (followers, A, B) should close. Profile screen should show with the same state.
For each option (of bottom navigation) multiple screens can be opened on top of original ones. Like this Home-> A-> B->C & Profile-> D-> E->F and user should be able to go back and forth from them. Let me explain, If I'm at Home and opened the A-screen then go to Profile and opens D-screen. Now I can go back to Home with A-screen opened. As well as I can open B-screen on top of the A-screen. Now if I press back, only the screens of Home should close and screens of Profile should not be affected.
Now that the functionality is clear, I'll share what I have already done to achieve the desired functionality.
What I have already done
- I created a MainActivity with (my own custom) bottom navigation and ViewPager2. Bottom navigation will be displayed persistently for all screens.
- I created the Fragments for Home, Discover, Market, and Profile. And used the FragmentStateAdapter with ViewPager2 to display the original four fragments. Only four fragments because AddPost (the center option of bottom navigation) will open a new activity.
- Within each fragment, I placed a fragment container to open the new fragments on top of the original ones. If from Home screen-A is to be opened, I can achieve this by creating screen-A fragment and replacing it on fragment container of the home fragment. I can open screen-B fragment from there which will again replace on the fragment container of Home fragment. I can replace fragments and pop fragments easily while I'm dealing with the same fragment container. I can achieve the first four desired functionality using this technique. But it gets trickier when implementing the last functionality.
For the last functionality, I thought I should have a separate back stack for each fragment container but that isn't the case. I only have one back stack that manages all the fragments from all the fragment containers. I tried to create my own back stack but I couldn't understand how to do it. I have described what I want and what I have already tried. If anyone has any idea please guide me. If Instagram is doing it so there must be a way to do it.