0

I'm trying to decide which is the best/proper way to implement a dynamic horizontal list of icons that will behave similar to the sticker list in Viber android app.There will be a list that will be populated with icons according to a JSON file from RestAPI and when the user will tap on the icon, the panel will slide up and there will be information below according to the pressed icon, maybe a horizontal list of cardviews or something like that. An example of the preferred behavior is here

After some search, i mostly found implementations of tablayout-viewpager solution but after reading this guide and specifically:

Keep the number of scrolling tabs at a manageable level to minimize navigational effort. Rule of thumb: no more than 5–7 tabs.

i am worried about the behavior of the layout with more than 5-7 tabs.A few sources support that tablayout tends to be dysfunctional when many tabs are added and since the icons will not have a fixed number, i am concerned that this will have a performance impact on tablayout.

Which is the most robust way to achieve the behavior as shown in the screens provided?Is there any other way more suitable than tablayout?I don't know how to expand my search on this.Any help will be appreciated.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Vely
  • 381
  • 5
  • 8

1 Answers1

2

Have you tried using TabLayout with ViewPager? I think the better option is to use TabLayout with PagerAdapter if items to be displayed are known (and are less than 6 or 7). You can populate details in PagerAdapter corresponding to the Tab item.

Another option is to use RecyclerView instead of TabLayout when items are greater than 7 or unknown. You can use RecyclerView with Horizontal scroll for populating icons and for showing details based on the icon pressed simply use another RecyclerView or PagerAdapter.

From the layout perspective, you can use BottomSheet as parent layout containing TabLayout and ViewPager. To make the TabLayout visible at a fixed height, use BottomSheet peek height attribute with a height equal to the height of TabLayout (i.e. 48dp). For Sliding Panel behavior, change the state of BottomSheet to expand state when user tap on any Tab item or icon.

prashant panwar
  • 21
  • 2
  • I didn't know about the BottomSheet component, many thanks for that.I was thinking of using the [umano sliding panel](https://github.com/umano/AndroidSlidingUpPanel) but it's nice to have a way to avoid a library if not necessary. Could you provide any insights on performance issues when many tabs are used in TabLayout?Or since you favor TabLayout over RecyclerView option,do you think there is a perfomance advantage by using the one over the other? – Vely Feb 08 '18 at 18:34
  • According to Material Design guidelines, it's not a good practice to use more than 5 tabs since it removes the focus (especially if its the main layout). If you know that the number of tabs can vary up to a limit say 5 or 6, you should use tab layout otherwise it will be more painful for the user to swipe too many times. If your feature has an unknown number of items you want to display then it's better to user RecyclerView. You can read about [Tabs](https://material.io/guidelines/components/tabs.html#tabs-usage) and [BottomSheet](https://material.io/guidelines/components/bottom-sheets.html). – prashant panwar Feb 08 '18 at 20:02
  • I have already quoted the information about navigation struggle for more than 5-7 tabs in my question, and this was the main reason i asked for performance issues in the first place.Since i do not wish to use TabLayout as navigation menu, this is not the information i'm looking for.Either way, the user will swipe because it's a list with icons...But thanks anyway for your effort – Vely Feb 08 '18 at 20:49