Instagram-like Bottom tab Fragment Transaction Android

Have you ever struggled with fragment transactions behaving unpredictably? I’ve noticed this becomes especially challenging when managing backstacks and maintaining UI state across screens.Fragments are powerful, but not straightforward. Handling add, replace, and backstack behavior often introduces complexity that affects navigation flow and user experience.

What inspired me to write this post?

The inspiration comes from Instagram’s navigation experience. It is simple, responsive, and minimises unnecessary screen transitions.

The bottom tab navigation pattern has become widely adopted because it keeps core actions accessible while maintaining state across screens.

This article focuses on replicating that behaviour using fragments with controlled transactions.

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

Yes, it can be challenging without a structured approach.

In this article, the goal is to implement bottom tabs using fragments with nested fragment transactions while preserving state across tabs.

This setup ensures smooth navigation without losing context, which is critical for user experience.

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

1. Tap on “CLICK ME” button.
2. Can you see that 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 with one after the other with successive clicks. Yup! Bottom bars are always fixed too.
3. Now navigate to another tab, come back again and check the behaviour in “Home” tab. The state is maintained with the same screen where you left (Sub Home 4, 4th fragment) :)
4. Finally, click back button and experience the behaviour that previous fragments are popped in automatically without losing the previous states. Yeah! This works even with back soft key.

Why TabLayout instead of Design support BottomNavigationView?

Choosing the right component impacts flexibility and control.

BottomNavigationView has limitations in customization and behavior consistency. It lacks flexibility when dealing with varying tab counts and custom UI requirements.

Customizing text sizes and icon scaling can become restrictive, especially when handling different visual states across tabs.

TabLayout provides better control over layout behavior, styling, and interaction, making it more suitable for implementing complex navigation patterns like this.

FAQ

Why are fragment transactions complex in Android?

Fragment transactions involve lifecycle handling, backstack management, and UI state preservation, making them harder to implement correctly.

What is the benefit of sticky bottom tabs?

Sticky bottom tabs maintain state across screens, improving user experience by preserving navigation context.

Why use TabLayout instead of BottomNavigationView?

TabLayout offers more flexibility in customization, layout control, and handling complex navigation flows.

What are nested fragment transactions?

Nested fragment transactions allow fragments within fragments, enabling deeper navigation without losing parent state.

How do you maintain fragment state across tabs?

By managing fragment backstacks and avoiding unnecessary replacements, the state can be preserved when switching tabs.