{ "@context": "https://schema.org", "@type": "BlogPosting", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.f22labs.com/blogs/instagram-like-bottom-tab-fragment-transaction-android/" }, "headline": "Instagram-like Bottom tab Fragment Transaction Android", "image": [ "https://www.f22labs.com/_next/image/?url=https%3A%2F%2Fghost.f22labs.cloud%2Fcontent%2Fimages%2F2023%2F09%2Finstagrambottomtab-01.webp&w=1920&q=75" ], "datePublished": "2017-05-11", "dateModified": "2024-01-08", "author": { "@type": "Person", "name": "Murtuza Kutub" }, "publisher": { "@type": "Organization", "name": "F22 Labs", "logo": { "@type": "ImageObject", "url": "https://www.f22labs.com/_next/static/media/logo.cab716e3.svg" } }, "description": "Upgrade your Android app with Instagram-style bottom tab fragments for a smoother user experience. Start navigating seamlessly now.", "keywords": "Instagram Fragment Transaction Android", "url": "https://www.f22labs.com/blogs/instagram-like-bottom-tab-fragment-transaction-android/", "wordCount": "392", "speakable": "https://www.f22labs.com/blogs/instagram-like-bottom-tab-fragment-transaction-android/" }
Technology

Instagram-like Bottom tab Fragment Transaction Android

Murtuza Kutub

• 2 min read
Instagram-like Bottom tab Fragment Transaction Android
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.

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.