Android Vertical Listview with horizontal scrolling on top

Question

I have an android app in which I have a multiple "Categories" each with some items associated with it. Like an online electronics shop for instance where you would have categories such as Computers, Printers, cameras etc. as categories and then each of those would have some items in them.

These categories should be displayed as "tabs" in the top of the screen where can select a tab to show which items is associated with it. This works fine as it is but what I want is to be able to change category by sliding left or right on the screen as well.

As you can see on the image the first tab is selected. Now what I need is when the user swipes right, tab 2 will be selected instead and all the items in the listview would be changed of course to those of category 2 (tab2). All the items (independent of category) have the same design which is why I only use one listview. Some of the problems I have faced are:

• I don't know from the beginning how many tabs there are going to be so they have to be created at runtime.

• I can't just create a swipe listener on each item as the user would not be able to swipe if the items don't fill up the screen (as in the example below where there are only 4 items and an empty area below which would then have no listener) This also seems like it coul be performance heavy maybe ?

• Adding a swipe listener on the entire view containing the list kind of works except that this view then intercepts ALL gestures including clicks which means the user will not be able to click a single item which is also required.

• I thought about using a ViewPager but I have never used one before and I don't know if it is overkill as I basically just need "one" view but with different data depending on tab choice.

Hope anyone can help.

Answer 1

You're on the right track with a ViewPager, but to get the correct functionality for the top, you should use a library by Jake Wharton.

https://github.com/JakeWharton/ViewPagerIndicator

You can set your top elements, and the pager will correspond with a proper fragment in the adapted callback.