Add view between 2 rows Gridview

Question

I have a GridView, with 3 elements per row, and when I click on an item, a new view comes below the row. It's a bit like a folder application on iOS. I didn't find any answer on SO or on Google. Maybe you can give me some hints.

Answer 1

You can do this easily with GridLayout but not with GridView.

To find out the available width of the grid before you place your items and set the number of columns, either set a ViewTreeObserver.OnGlobalLayoutListener (which can then place your items) or extend GridLayout and override onMeasure (int widthMeasureSpec, int heightMeasureSpec).

Insert a row after every row of content and set it's visibility to Visibility.GONE and it's columnSpec to the number of columns of your GridLayout. When the user taps an item, you can get it's info, populate the view under it and expand or animate it's visibility toggling.

Finally, for the indicator, I would just add it as a child of the hidden row and, when a user taps the item, calculate the horizontal center of said item and exactly place this view's center on the X axis to that coordinate (margins would be OK for this).

Please note that for very large lists of items this is not recommended as you'll have to instantiate every item to display immediately, regardless if they all fit on the screen or not. Unlike GridView, GridLayout is not a child of AbsListView.