Instagram like Bottom tab Fragment Transaction Android

Have you ever faced issues with fragments?

The Answer from all the techies would be “Yes” because dealing with Fragments is not direct, simple and easy to implement. I know handling back stacks with add and replace is like “The Ghost and the darkness”.

What inspired me to write this post?

The reason is “Instagram”. I love to play with the Insta app since it is easy, robust and has less screen navigation, which in turn collectively bottom tab navigation took the peek place in the Android community.

Is that hard to implement sticky Bottom tabs with Fragments transactions on all the screens?

Yes before this post peeped in :)

Ok! let's do some technical stuff. In this article, we’re gonna implement Bottom tabs with Fragments and nested Fragment transactions. Confused! The following Gif explains this in a better way.

Yeah! Here if you see the above Gif, there are five tabs Home, Search, Share, News and Profile. Selecting each tab option, respective Fragments are pushed. That’s obvious, isn’t it?. Cool! If you notice keenly, I have assigned a “CLICK ME” button for Home and News Fragments to showcase the behavior of Nested Fragments Transactions inside the same Fragments without losing their state. Let’s do it linearly.

Tap on the “CLICK ME” button.

2. Can you see that the Toolbar text has changed from “Home” to “Sub Home 1” and so on till “Sub Home 4” by clicking it four times? Yes! It does!, all these Sub Home 1 ….. Sub Home 4 are nested fragments inside Home (Main Fragment). Ideally, new fragments are pushed and replaced one after the other with successive clicks. Yup! The bottom bars are always fixed too.

3. Now navigate to another tab, come back again and check the behavior in the “Home” tab. The state is maintained with the same screen where you left (Sub Home 4, 4th fragment) :)

4. Finally, click the back button and experience the behavior that previous fragments are popped in automatically without losing the previous states. Yeah! This works even with the back soft key.

Why TabLayout instead of Design support BottomNavigationView?

I have plenty of reasons for the same as below:

It’s not flexible.
Random behavior if there are fewer tab items.
Customizing text sizes and icon sizes are like a nightmare (Just try adding small sized icon for one tab and big sized icon for the other ;-) ).

Do you really wanna me to add some piece of code? Nope! You can clone it directly from my repo below :)

f22labs/InstaLikeFragmentTransaction
InstaLikeFragmentTransaction - Easy Bottom Tab Navigation with back stack historygithub.com

Credits: