- 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
Library Setup
- Import instatag module in our project.
- Or Use instatag module files as per our need by copy pasting.
After Downloading instatag module build.gradle
implementation project(':instatag')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) -->
<com.harsh.instatag.InstaTag
android:id="@+id/insta_tag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:canWeAddTags="true"
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
& TagPhotoFragment.java
//Referencing from Layout
InstaTag instaTag = rootView.findViewById(R.id.insta_tag);
//Setting listener for the image captured on the photo being tagged
instaTag.setTaggedPhotoEvent(photoEvent);
//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
*/
@Override
public void singleTapConfirmedAndRootIsInTouch(final int x, final int y) {
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
// Storing coordinates temporarily
addTagInX = x;
addTagInY = y;
// A List with Dummy users which can be tagged on photo
recyclerViewUsers.setVisibility(View.VISIBLE);
headerUsers.setVisibility(View.GONE);
tapPhotoToTagUser.setVisibility(View.GONE);
headerSearchUsers.setVisibility(View.VISIBLE);
}
});
}
@Override
public boolean onDoubleTap(MotionEvent e) {
return true;
}
@Override
public boolean onDoubleTapEvent(MotionEvent e) {
return true;
}
@Override
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 -
@Override
public void onUserClick(final User user, int position) {
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
KeyBoardUtil.hideKeyboard(getActivity());
/*
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());
recyclerViewUsers.setVisibility(View.GONE);
tapPhotoToTagUser.setVisibility(View.VISIBLE);
headerSearchUsers.setVisibility(View.GONE);
headerUsers.setVisibility(View.VISIBLE);
}
});
}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) -->
<com.harsh.instatag.InstaTag
android:id="@+id/insta_tag_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:canWeAddTags="false"
app:hideAnimation="@anim/zoom_out"
app:instaTextColor="@android:color/white"
app:likeColor="@android:color/white"
app:likeSize="@dimen/dp150"
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 PhotoAdapter.java
is showing/hiding and liking photos
/*
Before hiding showing make sure we have addedTags inside InstaTag
*/
// To show tags
instatag.showTags();
// To hide tags
instatag.hideTags();
// To animate Like
instatag.animateLike();While adding Tags we have used PhotoEvent Interface in our activity or fragment & TagPhotoFragment.java
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() {
@Override
public void singleTapConfirmedAndRootIsInTouch(int x, int y) {
// While adding tags we used this now we don't need this
}
@Override
public boolean onDoubleTap(MotionEvent e) {
instaTag.animateLike();
return true;
}
@Override
public boolean onDoubleTapEvent(MotionEvent e) {
instaTag.animateLike();
return true;
}
@Override
public void onLongPress(MotionEvent e) {
instaTag.animateLike();
}
};InstaTag Tags properties and like properties can be modified at runtime too. ConfigurationBottomSheet.java
Make sure to check the above file in sample module for runtime properties changes.
If you found this project useful, then please consider giving it a ⭐ on Github and sharing it with your friends via social media.
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.
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
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.