Dynamic adapter view with uneven column size or Horizontal StaggeredGridView

Question

I am trying to achieve the layout represented by the following image, using an adapter to compose the internal views:

All rows scroll together and recycling is in place.

I have not seen many approaches on SO or any of the blogs. FlowLayout doesn't allow scrolling, StaggeredGridView (Etsy's or Google's) doesn't allow for rotation, and synchronized multi ListView seems too involved.

What is SO approach to this custom component?

Answer 1

My approach would be to tie together n horizontal listviews in a single viewgroup. Listen to touch events on the viewgroup, and scroll all the 3 horizontal listviews together.

Layout would be like this -

LinearLayout(vertical)
--HorizontalListView1
--HorizontalListView2
--HorizontalListView3

--HorizontalListView-n

Now forward all the touch events to the parent viewgroup, and handle them in a single toucheventlistener. In the touchevent listener, calculate a scroll for all horizontal listviews, and call the corresponding scroll.

As all the scroll calls are done in a single call on UI thread, they should be processed in the next drawing pass. This should make it feel synchronized. If this doesn't work, you need to explicitly synchronize the views by extending them.

With this you will have view reuse and recycling as far as possible with horizontal listview. All views should scroll together if synchronization is in place.

Answer 2

Just an idea - use simple HorizontalScrollView with a single LinearLayout inside (the HSV has a requirement for only one child). Inside that LinearLayout place vertically another 3 LinearLayouts - one for each row. Inside each of the 3 layouts place (horizontally) the items that belong to one row. I haven't tried this but it would be the first thing I'd try if I was in your situation.

Something like:

<HorizontalScrollView>
    <LinearLayout android:orientation="vertical">
        <LinearLayout android:orientation="horizontal" />
        <LinearLayout android:orientation="horizontal" />
        <LinearLayout android:orientation="horizontal" />
    </LinearLayout>
</HorizontalScrollView>

Answer 3

I think the best way for you is to extend ViewGroup and implement this component by yourself. Also extend BaseAdapter and create methods like gerFirstRowView, getSecondRowView and so on. You will be able to implement effective view recycling and avoid heavy nesting of views so your component will have good performance.