How to create a gridview like Foursquare interest selection screen?

Question

I am creating an app which requires the user to select multiple interests. I am trying to create a screen similar to the Foursquare interest selection similar to a Tag cloud where multiple buttons can be selected to represent the users interests.

I have tried creating a gridview but I'm not able to achieve the effect of buttons wrapping up to the next line.

Is there a way this can be achieved via a gridview? Is there a library which does this kind of UI?

Answer 1

This repo may will help someone. https://github.com/Cutta/TagView

Answer 2

You're looking for FlowLayout with gravity="center_horizontal" . There are several implementations available, a lot of them as library projects on GitHub. Take you pick :)

ApmeM/android-flowlayout

blazsolar/FlowLayout

suanmiao/flowlayout

(descending *s)

Answer 3

Hello there is another example using custom Library which acts like List GitHubLibrary TagLayout

• Sample Code :-

mFlowLayout.setAdapter(new TagAdapter<String>(mVals) { @Override public View getView(FlowLayout parent, int position, String s) { TextView tv = (TextView) mInflater.inflate(R.layout.tv, mFlowLayout, false); tv.setText(s); return tv; } });

Using below code you can pre set selection you wanted: -

mAdapter.setSelectedList(1,3,5,7,8,9);

Answer 4

You can try using a LinearLayout with gravity="center". If this does not work for you, then perhaps write your own custom layout that does the linear layout, wrapping, and centering.

For the former, see this post for an example.