Android Navigation Component : Similar Back Stack Like Instagram, Youtube and More…
Most of Android Developers want to handle back stack like Instagram or Youtube and also they have some problems about Android Navigation Component.
In this article, I’m gonna try to fix this issues with some tricks using the Android Navigation Component.
If you don’t know what is Android Navigation Component you can start from here :
Before we start
I used Navigation Component 2.3.0-alpha05 for this tutorial.
Back Stack 🔥
Android Navigation Component default behavior hasn’t got bottom navigation back stack. If you wanna add back stack to your bottomNavigationMenu it's easy and simple. Just add:
android:menuCategory="secondary"to your all menu items.
With this trick you’ll have an back stack for bottomNavigationMenu.
Advanced Back Stack
But you know, Instagram and Youtube removes duplicate items from back stack and also they are saving each tab state.
I’m gonna show you how we can remove duplicate items from back stack using Android Navigation Component.
First of all we need an extension for our navController.
This extension will able to pop any fragment instances from back stack. But this is not enough for what we want. I wrote a BaseBottomTabFragment for our menu item fragments.
Extend your bottom tab fragments from BaseBottomTabFragment, don’t forget to use utils functions when you try to navigate from tab starter fragments. This functions helps us for have back stack like Instagram and Youtube.
BaseBottomTabFragment has onBackPressedDispatcher for handling back press. Also it has isNavigated boolean, because if it's trying to navigate in same tab we don't need to addCallback.
With this trick we have a back stack like Instagram and Youtube, but we forgot something. As you know, if you setup your toolbar with navController, your back press behaviour works with navigateUp() and onBackPressedDispatcher just affects your activity's back press. If you wanna get the same bottom behavior with your toolbar navigate button. Add to following code to your activity:
The result must be like:
Dynamic Label
As you know, if you setup your toolbar with navController, your toolbar titles handling from navController. NavController uses your fragment labels as title. For making this dynamically we need to use Android Navigation Component-SafeArgs
Define your argument as string in nav_graph :
don’t forget to use your argument as label
android:label="{title}"and then pass data between destinations :
The result must be like:
Saving State
There is a lot of samples about saving state on Android Navigation Component. Maybe most effective one can be Event.kt or EventObserver.kt for LiveData but i’m gonna show you very simple solution.
The easiest solution is passing id to your all views. It works with ScrollView, Recyclerview, etc..
Adding a Fragment to your Container
With Android Navigation Component you can’t add any fragment to your container. But you just want to add 3-4 fragment to your navController you can use this solution.
Navigation Component 2.1.0 supports <dialog> tag in navigation graph.
This trick uses BottomSheetDialogFragment as fullscreen and with isDraggable = false attribute.
This is an normal bottomSheetDialogFragment, can’t cancelable and not expanded.
And this is what i want. STATE_EXPANDED, can’t Draggable, works like add and also it is in your navController’s back stack.
But adding too many screens can cause performance issues. Be careful.
That’s all for this article. Here is the sample repository about this tricks :
CONCLUSION
Android Navigation Component does not have a very customizable structure for now. In the simplest way, you cannot access the back stack at runtime, it’s just open for testing. Perhaps they are trying to offer a more optimized standard api, who knows? 🤔 However, it does not exactly meet the developer’s requests… 😅
In this article I tell you:
- How we can have a basic back stack with Navigation
- How we can have a Instagram-like back stack with Navigation
- Dynamic Label usage
- Saving State
- How we can implement an add-like method
Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!
If you have any kind of feedback, feel free to connect with me on Twitter.
