Android 仿小红书图片标签Group
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
design update design Dec 22, 2016
gradle/wrapper update gradle Apr 22, 2018
library add TagGroupUtils and fixed ripple dismiss bug May 20, 2018
sample remove ripple view from TagViewGroup May 20, 2018
.gitignore first commit Dec 22, 2016
LICENSE add LICENSE Jun 26, 2017 Update Jun 2, 2017
dependence.gradle update gradle Apr 22, 2018 rebase tagViewGroup by kotlin May 12, 2018
gradlew.bat first commit Dec 22, 2016
settings.gradle first commit Dec 22, 2016


Android 仿小红书图片标签,实现了图片标签的动画,布局,水波纹,编辑等功能,还可以自定义 Tag。视频演示地址

This is a library of tags that are attached to the picture,you can add tags and ripple effects very easily.Video demo

Important Update

  1. added TagAdapter and make it easier to create TagViewGroup.

  2. moved AnimatorUtils out of the library to make it clean.


Step 1. Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		maven { url '' }

Step 2. Add the dependency

dependencies {
	    compile 'com.github.shellljx:TagViewGroup:-SNAPSHOT'

How to use

1. Define in xml


2. Or in code

TagViewGroup tagViewGroup = new TagViewGroup(getContext());

3. Add animator

// set hide animator ,show animator and ripple

4. Set tagAdapter

tagViewGroup.setTagAdapter(new TagAdapter() {
    public int getCount() {
        return model.getTags().size();

    public ITagView getItem(int position) {
        return makeTagTextView(model.getTags().get(position));

//set tagViewGroup location
tagViewGroup.setPercent(model.getPercentX(), model.getPercentY());

5. NotifyDataSetChanged


6. Handle click events

tagViewGroup.setOnTagGroupClickListener(new TagViewGroup.OnTagGroupClickListener() {
    public void onCircleClick(TagViewGroup container) {
    //click the white circle of TagViewGroup         

    public void onTagClick(TagViewGroup container, ITagView tag, int position) {
    //clikc a tag of TagViewGroup

    public void onLongPress(TagViewGroup container) {

7. Drag TagViewGroup

//you can drag tagViewGroup only if you set OnTagGroupDragListener
tagViewGroup.setOnTagGroupDragListener(new TagViewGroup.OnTagGroupDragListener() {
    public void onDrag(TagViewGroup container, float percentX, float percentY) {


attr属性 description 描述
inner_radius 中心内圆半径
radius 中心外圆半径
line_width 线条宽度
v_distance 圆心到垂直折点的垂直距离
tilt_distance 圆心到斜线折点的垂直距离
ripple_alpha 水波纹起始透明度
ripple_maxRadius 水波纹最大半径

How to customize the animation

You can use the following properties in Property Animation:

property属性 description 描述
LinesRatio(TagViewGroup.LINES_RATIO) 线条显现的长度占总长度的百分比
TagAlpha(TagViewGroup.TAG_ALPHA) 单个Tag的透明度
CircleRadius(TagViewGroup.CIRCLE_RADIUS) 中心圆半径
CircleInnerRadius(TagViewGroup.CIRCLE_INNER_RADIUS) 中心内圆半径

How to implement your own Tag view

Step 1. create a view implement ITagView interface.

Step 2. Override the following methods:

public void setDirection(DIRECTION direction) {
    mDirection = direction;

public DIRECTION getDirection() {
    return mDirection;