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

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

Flutter Architecture Patterns: BLoC, Provider, Riverpod, and More Cover

Technology

Apr 22, 20253 min read

Flutter Architecture Patterns: BLoC, Provider, Riverpod, and More

Flutter, Google’s innovative UI toolkit, has exploded in popularity for building beautiful, cross-platform mobile apps. But as Flutter apps scale, choosing the right architecture pattern becomes crucial. Let's make it simple and dive into the most popular Flutter architecture patterns, including BLoC, Provider, Riverpod, and beyond. Whether you're building your first Flutter app or scaling a complex project, selecting the right architecture pattern can be the difference between a maintainable a

How To Test A Flutter App? A Beginner’s Guide Cover

Technology

Apr 22, 20253 min read

How To Test A Flutter App? A Beginner’s Guide

Building a Flutter app is exciting, but what if it breaks the moment users interact with it? Testing is often skipped by beginners, but it's your app's safety net in production. But what about testing?  Whether you're just starting or looking to level up your code quality, learning how to test a Flutter app is a game-changer. This guide breaks down the basics of Flutter app testing for beginners, because writing great code is only half the job. Making sure it works is the other half. Why Test