Awesome Open Source
Awesome Open Source

InstaTag (Tag & Like Photos Like Instagram)


Library in Action

InstaTag Sample Apk

Android Arsenal API


Home Tab Tag Photo Tab Search User Tab

Photo With Tags Photo With Like Configuration

Overview of InstaTag

  • We can add tags to a photo like Instagram.
  • Tags can be dragged over photo to any position within photo bounds.
  • Tags can be customized in following : Text Color, Top Carrot and Tag Background or Tag Color.
  • Showing and Hiding of Tags can be animated with custom animation like (Slide Up/Down, Zoom In/Out, Bounce Up/Down etc.)
  • Apart from Tags we can also use the Instagram like animation for liking photos.
  • Like feature can be customized in following : Like Color and Like Size.
  • Both Tags and Like can be customized at runtime or while declaring in layout files.
  • A Sample implementation of the Library is included in instatagsample module

Using InstaTag Library in our Android application

Library Setup

After Downloading instatag module build.gradle

    implementation project(':instatag')

Using InstaTag While Tagging a Photo

In layout file of our activity or fragment use InstaTag like this fragment_tag_photo.xml

        <!-- ( Make sure canWeAddTags="true" as we are tagging photos) -->

            app:instaTextColor="@android:color/white" />

Following things are customizable for InstaTag in Layout (Available Attributes) attrs.xml

        <attr name="canWeAddTags" format="boolean" />
        <!--Used for restricting tag movement when we are not tagging photos.
        (For example we are using InstaTag inside RecyclerView we have to provide false -->
        <attr name="overrideDefaultColor" format="color" />
        <!--Used to change Default Color being used for Tag Background & Tag Top Carrot-->
        <attr name="instaTextColor" format="color" />
        <!--Used for changing Tag text Color-->
        <attr name="instaBackgroundColor" format="color" />
        <!--Used for changing background color for Tag background-->
        <attr name="carrotTopColor" format="color" />
        <!--Used for changing Top Carrot color-->
        <attr name="tagTextBackground" format="reference" />
        <!--Used for changing tag background with custom background -->
        <attr name="carrotTopBackground" format="reference" />
        <!--Used for replacing top carrot background with custom background-->
        <attr name="hideAnimation" format="reference" />
        <!--Used for animating tag while hiding-->
        <attr name="showAnimation" format="reference" />
        <!--Used for animating tag while showing-->
        <attr name="likeColor" format="color" />
        <!--Used for setting like color-->
        <attr name="likeSize" format="dimension" />
        <!--Used for setting like size-->
        <attr name="likeSrc" format="reference" />
        <!--Used for setting source for like-->

While using InstaTag for Tagging Photos make sure to Implement PhotoEvent Interface in our activity or fragment

//Referencing from Layout
InstaTag instaTag = rootView.findViewById(;
//Setting listener for the image captured on the photo being tagged

//Implemented PhotoEvent
    private final InstaTag.PhotoEvent photoEvent = new InstaTag.PhotoEvent() {

        Following method is called when we have tapped on anywhere inside the photo which we are tagging
        You will be returned with x and y coordinates of the point where we tapped
        make sure to save these coordinates temporarily as they will be used when we are done with choosing
        a user to be tagged in photo
        public void singleTapConfirmedAndRootIsInTouch(final int x, final int y) {
            getActivity().runOnUiThread(new Runnable() {
                public void run() {

                    // Storing coordinates temporarily
                    addTagInX = x;
                    addTagInY = y;

                    // A List with Dummy users which can be tagged on photo

        public boolean onDoubleTap(MotionEvent e) {
            return true;

        public boolean onDoubleTapEvent(MotionEvent e) {
            return true;

        public void onLongPress(MotionEvent e) {


After Initializing InstTag with PhotoEvent Listener and Capturing x & y coordinates of User of List
add tag in InstaTag as follows -

    public void onUserClick(final User user, int position) {
        getActivity().runOnUiThread(new Runnable() {
            public void run() {

                 Use addTag(x,y,uniqueId) method of InstaTag to add tag.
                 You can also see that we have used temporarily saved coordinates
                 in from PhotoEvent overridden method
                instaTag.addTag(addTagInX, addTagInY, user.getUserName());


Using InstaTag While Showing/Hiding of Tags and Using Like feature to Like Photos like Instagram

Mostly when we are using the above feature we must be using some sort of list in which we show
all the tagged photos to the user like instagram. Here is a code snippet from an Adapteritem_photo.xml

    <!-- ( Make sure canWeAddTags="false" as we are not tagging photo or adding Tags) -->

        app:showAnimation="@anim/zoom_in" />

        Above you can see that we have defined custom animations for tag showing and hiding.
        Also customized likeColor and likeSize for Like feature.

As we have defined the InstaTag as an Item in Adapter. You can see how
is showing/hiding and liking photos

            Before hiding showing make sure we have addedTags inside InstaTag

       // To show tags

       // To hide tags

       // To animate Like

While adding Tags we have used PhotoEvent Interface in our activity or fragment &
same PhotoEvent Interface can be used inside adapter for like feature
by which we can call (animateLike()) on DoubleTap and On Long Press on InstaTag

//Implemented PhotoEvent
        private InstaTag.PhotoEvent photoEvent = new InstaTag.PhotoEvent() {
            public void singleTapConfirmedAndRootIsInTouch(int x, int y) {
                // While adding tags we used this now we don't need this

            public boolean onDoubleTap(MotionEvent e) {
                return true;

            public boolean onDoubleTapEvent(MotionEvent e) {
                return true;

            public void onLongPress(MotionEvent e) {

InstaTag Tags properties and like properties can be modified at runtime too.

Make sure to check the above file in sample module for runtime properties changes.

❤️ Found this project useful?

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

Last But not Least

InstaTag is still in starting phase as it can be improved further So make a pull request to improve this linrary or suggest an idea to improve it further by raising issues.

Project Maintained By

Harsh Sharma

Android Developer


Copyright 2019 Harsh Sharma

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
limitations under the License.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Java (710,532
Android (41,173
Library (11,394
Animation (5,129
Android Library (3,315
Instagram (2,118
Material (1,584
Recyclerview (1,343
Tags (772
Custom View (607
Glide (585
Photo (406
Viewpager (400
Gson (368
Sample App (361
Sharedpreferences (304
Related Projects