5

I'm looking to create a music app and I'd like to make a GridView similar to what Google Play uses where they inject elements that will span rows and columns like the Soilwork album does in this screenshot:

Google Play Music

I've thought about using a ListView and populating rows with custom elements, but I couldn't think of a good way to use that with ViewHolder pattern, or really a way to make that reusable and account for differing number of items in width based on screen size (for example, the grid is only two items wide on phones, and "large" items span both columns and only one row).

I've also thought about using a ScrollView filled with custom ViewGroups, but that seems to run into the same issues I previously mentioned.

I next thought about using GridLayout, but that doesn't accept ListAdapters, and doesn't seem tuned to the kind of usage I'm looking at (nor does it seem to scroll)

I'd greatly appreciate if anyone could give me somewhere to start on this, or could point me to a library that does this. I've already checked out StaggeredGridView but it doesn't seem to accomplish what I'd like. My ideal solution would be a view which lays out items on an even grid like GridView and accepts view from a ListAdapter, also like GridView, but allow for elements to span, using the single cell constraint of GridView as the default behaviour.

Cheers.

EDIT

I have a perfectly functioning GridView as shown below, but I'd like to make items at regular intervals (every nth item) span more than one column and/or row, as shown in the previous screenshot.

Working GridView

berwyn
  • 986
  • 7
  • 23
  • Are you asking how to get the design as shown in Googleplay ? you should lookup playing around with xml file in your res/values folder, and as for screen based (tablet, phone etc...) you should look into element – Grmn Sep 11 '13 at 05:50
  • @Grmn I've already got just a basic GridView working and using various resource folders to get the number of columns I want based on screen size, my issue is getting items that would span columns and rows like in Google Play Music. – berwyn Sep 11 '13 at 06:06
  • Not sure but can try [bucket-list-adapter](https://github.com/rzsombor/bucket-list-adapter) example, which is used to develop Google-play app. – RobinHood Sep 11 '13 at 06:10
  • Hint: use the stackoverflow search function :) , not trying to be a D, but I have found several answers to the question you are asking. – Grmn Sep 11 '13 at 06:10
  • @Grmn, I think you misunderstand. As you can see in these screenshots (https://www.dropbox.com/sc/u6jojhasv6amopg/A0ce_xsd_B), I have a GridView working perfectly, that's not the issue. The problem stems from the fact that I need items at regular intervals (every nth item) to span more than one column/row, something that GridView doesn't support. I'll amend the original question to better reflect this – berwyn Sep 11 '13 at 06:56
  • In that case, i think what you should do is post some code, because by justin looking at pictures people can not really help you. I thought you still needed to figure out the part design... So post code, and explain clearly what you try to do, and what & When you want to do something and what goes wrong, any message etc.. etc.. – Grmn Sep 11 '13 at 07:02
  • Which is the root of the problem, I have no idea _what_ to code. I currently have a GridView fed by a class extending BaseAdapter which works beautifully, but I'm not sure how to approach making a new widget/View object that could handle column/row spanning while maintaining GridView's layout and adapter functionality. Hence why I'm here on SO :) – berwyn Sep 11 '13 at 07:05
  • Dont know google play music, but looks to me tell me if i am wrong when you click on a item, it will show you the album with a bigger picture on the left. Click add value, show column / row ? Which can be done using RelativeLayout, see if this helps you on your way! http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/ – Grmn Sep 11 '13 at 07:49
  • Here is another nice one for accomplishing what you want.. http://android-developers.blogspot.com/2011/02/android-30-fragments-api.html nicely explained. – Grmn Sep 11 '13 at 08:14
  • Not quite. When Google Play Music inflates that view, every `n`th item is larger, like the Soilwork album in that image. It's aligned perfectly with the rest of the `GridView` items, and just takes up the space that two or four of them would normally take up. It behaves exactly like a normal `GridView`, but has items spanning rows and columns – berwyn Sep 11 '13 at 15:35
  • maybe the answers to this question could be helpful? http://stackoverflow.com/questions/18557720/gridview-with-different-cells-sizes-pinterest-style – stamanuel Feb 17 '14 at 14:13
  • I know this is different, but you might take a look at this: http://www.androidviews.net/2014/01/androidstaggeredgrid-view/ – Kayhan Asghari Feb 18 '14 at 00:54

1 Answers1

1

Check out Parchment. GridDefinitionView may help you achieve the UI you are looking to build.

Suraj C
  • 452
  • 4
  • 10