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?

Foursquare interest selection screenshot

@Vikram this looks like it https://github.com/blazsolar/FlowLayout Could you post this as an answer, so that I may accept it as an Answer. — manishKungwani, Mar 18 '15 at 19:22

score 3 · Answer 1 · answered Sep 29 '15 at 18:24

3

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

answered Sep 29 '15 at 18:24

Cüneyt

2,565
25
31

score 2 · Accepted Answer · answered Mar 18 '15 at 19:28

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)

answered Mar 18 '15 at 19:28

Vikram

51,313
11
93
122

1

Thanks a lot for spending a few more minutes on this. Much appreciated. – manishKungwani Mar 18 '15 at 19:43
@manishKungwani, How to use this in Eclipse projects? Is there any eclipse version? – ABI Jun 24 '15 at 08:34
@user2459623 which specific library are you looking to use? Ideally if the project compiles to a jar, you can import that jar directly OR mod the project to generate a jar. – manishKungwani Jun 26 '15 at 07:30
Now I'm able to include those in eclipse, and have an issue with filtering through a edittext on top, any idea? because I don't use adapter here. – ABI Jun 26 '15 at 07:34

score 2 · Answer 3 · answered Nov 17 '15 at 12:37

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);

score 0 · Answer 4 · edited May 23 '17 at 12:33

0

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.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 18 '15 at 19:20

amahfouz

2,328
2
16
21

How to create a gridview like Foursquare interest selection screen?

4 Answers4

Linked