Umair Umair - 5 months ago 18
Android Question

Displaying blog style tags side by side in multiple rows (Android)

Please see the image below:
Multiple Tags appearing side by side

I want to display a set of tags side by side in an Android app.
Conditions are:


  • Each tag appear next to the previous tag.

  • If the horizontal space runs out, the next tag appears in a new line.

  • If there are multiple words in a tag and there's only a space for some of the words of a tag, move the whole tag in a new line. However, if the tag was already in a new line, let the tag break in two lines.



I'm not sure what this technique is called. Any help on the issue, whether by code or link to a library, will be greatly appreciated.

Answer

You can use simple libraries for tags, fo instance:

AndroidTagGroup

Add to your xml:

<me.gujun.android.taggroup.TagGroup
    android:id="@+id/tag_group"
    style="@style/TagGroup" />

And add code:

TagGroup mTagGroup = (TagGroup) findViewById(R.id.tag_group);
mTagGroup.setTags(new String[]{"Tag1", "Tag2", "Tag3"});

Anoter solution is:

AutoLabelUI

Add to xml:

<com.dpizarro.autolabel.library.AutoLabelUI
        android:id="@+id/label_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

And add to code:

AutoLabelUI mAutoLabel = (AutoLabelUI) view.findViewById(R.id.label_view);

AutoLabelUISettings autoLabelUISettings = new AutoLabelUISettings.Builder()
                                                                 .withMaxLabels(5)
                                                                 .withIconCross(R.drawable.cross)
                                                                 .withBackgroundResource(android.R.color.holo_blue_bright)
                                                                 .withLabelsClickables(false)
                                                                 .withShowCross(true)
                                                                 .withTextColor(android.R.color.holo_red_dark)
                                                                 .withTextSize(R.dimen.label_title_size)
                                                                 .build();

mAutoLabel.setSettings(autoLabelUISettings);

Also, you may use HashtagView

Comments