Facebook iconInstagram like Bottom tab Fragment Transaction Android
Blogs/Technology

Instagram-like Bottom tab Fragment Transaction Android

Nov 4, 20242 Min Read
Written by Murtuza Kutub
Instagram-like Bottom tab Fragment Transaction Android Hero
Have you ever faced issues with fragment?

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

What inspired me to write this post?

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

Partner with Us for Success

Experience seamless collaboration and exceptional results.

Is that hard to implement sticky Bottom tabs with Fragments transactions in 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! Following Gif explains in a better way.

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.

Fragments
  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.
Home Fragments

Why TabLayout instead of Design support BottomNavigationView?

I have plenty of reasons for the same as below:

  1. It’s not flexible.
  2. Random behaviour if there are less tab items.
  3. Customising 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.

Partner with Us for Success

Experience seamless collaboration and exceptional results.

Author-Murtuza Kutub
Murtuza Kutub

A product development and growth expert, helping founders and startups build and grow their products at lightning speed with a track record of success. Apart from work, I love to Network & Travel.

Phone

Next for you

A Complete Guide to React Suspense and Concurrent Mode Cover

Technology

Apr 30, 20255 min read

A Complete Guide to React Suspense and Concurrent Mode

Have you ever wondered how React keeps evolving to handle increasingly complex web applications? As developers face growing challenges with data fetching, code splitting, and creating smooth user experiences, React has introduced two game-changing features: Suspense and Concurrent Mode. These innovations are changing how we build React applications. In this comprehensive guide, you'll learn how these powerful features work, when to use them, and why they matter for your projects. We'll explore

How to Simulate Authentic API Load Testing with k6? Cover

Technology

Apr 29, 20253 min read

How to Simulate Authentic API Load Testing with k6?

Ever launched a new feature only to have your API crumble under unexpected traffic? Or worse, watched helplessly as your production system slowed to a crawl during a sales event? We've all been there. Your API works perfectly in development, passes all tests in staging, but somehow still buckles when real users start hitting it in waves. This is where load testing comes in, not the theoretical kind with perfect synthetic traffic, but realistic testing that mimics how your API will actually be

Flutter Internationalization and Localization (Multilingual Support) Cover

Technology

Apr 22, 20253 min read

Flutter Internationalization and Localization (Multilingual Support)

Flutter apps aren't bound by geographical borders, so why should your audience be? Imagine reaching users across the globe by offering your app in their language. That’s exactly what Flutter's internationalization (i18n) and localization (l10n) make possible.  According to CSA Research, 76% of consumers prefer to purchase products presented in their native language, highlighting the significant value of localization in capturing global markets. Implementing Flutter internationalization and loc