fast manage your TagViewLayouts
Switch branches/tags
Clone or download
Latest commit 08787df Nov 13, 2017
Failed to load latest commit information.
TagLayoutLib API 26 supports now Nov 13, 2017
.gitignore upgrade for the gradient color support Apr 28, 2016 Update Nov 13, 2017

TagViewLayout Android


An Android TagView library. You can customize awesome TagView by using this library.


preset layout configurations in examples

Video Demo


  • multiple choice mode
  • single selection choice mode
  • toggle and switching color by xml style configurations
  • styling via code base / xml base
  • support using drawables as button face
  • support hard preset items


Step 1

Add below dependency in your build.gradle file.

dependencies {
    compile 'com.hkm.taglib:tag:1.7.1'

Step 2

Use the AndroidTagView in layout file, you can add customized attributes here.

    app:tag_theme="pure_teal" />

Step 3

Use TagView in your code.

TagContainerLayout mTagContainerLayout = (TagContainerLayout) findViewById(;
mTagContainerLayout.setTags(List<String> tags);

Now, you have successfully created some TagViews. The following will show some more useful features for you customize.


name format description
vertical_interval dimension Vertical interval, default 5(dp)
horizontal_interval dimension Horizontal interval, default 5(dp)
container_border_width dimension TagContainerLayout border width(default 0.5dp)
container_border_radius dimension TagContainerLayout border radius(default 10.0dp)
container_border_color color TagContainerLayout border color(default #22FF0000)
container_background_color color TagContainerLayout background color(default #11FF0000)
container_enable_drag boolean Can drag TagView(default false)
container_drag_sensitivity float The sensitive of the ViewDragHelper(default 1.0f, normal)
container_gravity enum The TagContainerLayout gravity
tag_border_width dimension TagView Border width(default 0.5dp)
tag_corner_radius dimension TagView Border radius(default 15.0dp)
tag_horizontal_padding dimension Horizontal padding for TagView, include left and right padding(left and right padding are equal, default 20px)
tag_vertical_padding dimension Vertical padding for TagView, include top and bottom padding(top and bottom padding are equal, default 17px)
tag_text_size dimension TagView Text size(default 14sp)
tag_bd_distance dimension The distance between baseline and descent(default 5.5px)
tag_text_color color TagView text color(default #FF666666)
tag_border_color color TagView border color(default #88F44336)
tag_background_color color TagView background color(default #33F44336)
tag_max_length integer The max length for TagView(default max length 23)
tag_theme enum The TagView theme
tag_text_direction enum The TagView text direction
tag_drawable_state0 drawable The drawable for the default state
tag_drawable_state1 drawable The drawable for the active state
tag_drawable_state2 drawable The drawable for the preselected / press state
tag_drawable_state3 drawable The drawable for the preselected / press state - hard preset
tag_drawable_state4 drawable The drawable for the preselected / press state - hard preset
tag_drawable_state5 drawable The drawable for the preselected / press state - hard preset

You can set these attributes in layout file, or use setters(each attribute has get and set method) to set them.


theme code value description
none ColorFactory.NONE -1 If you customize TagView with your way, set this theme
random ColorFactory.RANDOM 0 Create each TagView using random color
pure_cyan ColorFactory.PURE_CYAN 1 All TagView created by pure cyan color
pure_teal ColorFactory.PURE_TEAL 2 All TagView created by pure teal color


direction code value description
ltr View.TEXT_DIRECTION_LTR 3 Text direction is forced to LTR(default)
rtl View.TEXT_DIRECTION_RTL 4 Text direction is forced to RTL


gravity code value description
left Gravity.LEFT 3 Push TagView to the left of TagContainerLayout(default)
center Gravity.CENTER 17 Push TagView to the center of TagContainerLayout
right Gravity.RIGHT 5 Push TagView to the right of TagContainerLayout


  • Set a TagView.OnTagClickListener for TagView, for onTagClick and onTagLongClick callback
mTagContainerLayout.setOnTagClickListener(new TagView.OnTagClickListener() {

    public void onTagClick(int position, String text) {
        // ...

    public void onTagLongClick(final int position, String text) {
        // ...
  • Use setTagMaxLength(int max) to set text max length for all TagView.
mTagContainerLayout.setTagMaxLength(int max);
  • Use getTagText(int position) to get TagView text at the specified location.
String text = mTagContainerLayout.getTagText(int position);
  • getTags() return a string list for all tags in TagContainerLayout.
List<String> list = mTagContainerLayout.getTags();
  • If you set the attribute container_enable_drag to true, when drag the TagView you can get latest state by using getTagViewState(). There are 4 state:ViewDragHelper.STATE_IDLE, ViewDragHelper.STATE_DRAGGING, and ViewDragHelper.STATE_SETTLING.
int state = mTagContainerLayout.getTagViewState();
  • Set the theme. If you want to customize theme, remember set theme with ColorFactory.NONE first, then set other attributes.
// Set library provides theme
// Set customize theme
  • Set the text direction. The library support two direction View.TEXT_DIRECTION_LTR and View.TEXT_DIRECTION_RTL.
  • Use setTagTypeface(Typeface typeface) to set TagView text typeface.
Typeface typeface = Typeface.createFromAsset(getAssets(), "iran_sans.ttf");

After set the attributes, set tags or add a tag.

  • Use setTags() to set tags, require a parameter of type List<String> or String[].
mTagContainerLayout.setTags(List<String> tags);
  • Insert a TagView into ContainerLayout at the end.
mTagContainerLayout.addTag(String text);
  • Insert a TagView into ContainerLayout at the specified location, the TagView is inserted before the current element at the specified location.
mTagContainerLayout.addTag(String text, int position);
  • Remove TagView on particular position, require the position of the TagView
mTagContainerLayout.removeTag(int position);
  • Remove all TagViews.

Change logs

Sample App


##Screenshots IMEF

Thank you for your support and we will bring more amazing libraries to your productive works. We are accepting bitcoin by the address as below. Please scan the QR code to start



Copyright 2015-2017 HKM United

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and