Skip to content

Repository files navigation

EmojiReactionView

PlatformAPILicense: MITDownloadSputnikBuild Status

An Android library to make Emoji Reactions on imageviews in a manner Instagram does this!.


Table of contents

Features

  • Design : The library tries to be reasonably close to the original Instagram's design.
  • Customization : Users can customize the look to a great extent easily and reliably.
  • Support for RecyclerView : It can easily be used with Recycler views.
  • Optimum performance : Efforts have been made to keep memory usage as small as possible.
  • Unharmed image : The library doesn't change/modify the image, so every modification of image as imageview is possible

Example

Below is the two sample for usage of the library:


Usage

Just add the following dependency in your app's build.gradle

repositories {
maven {
url 'https://dl.bintray.com/dev-ritik/EmojiReactionView/'
}
}
dependencies {
implementation 'com.ritik:emojireactionlibrary:1.0.2'
}

Add the following code in your xml file

<com.ritik.emojireactionlibrary.EmojiReactionView
android:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/image"app:emojis="@array/emoji" />

where emoji is an array resource which is the address to all emojis to be in the panel like:

 <arrayname="emoji">
<item>@drawable/em1</item>
<item>@drawable/em2</item>
<item>@drawable/em2</item>
</array>

and for the home emoji, rename that to home, so that its resource id becomes R.drawable.home to override default home emoji originally set.

To get notified of when the emojis are clicked, you can use:

myImage.setOnEmojiClickListener(newClickInterface() {
@OverridepublicvoidonEmojiClicked(intemojiIndex, intx, inty) {
// emojiIndex is the index of the emoji being clicked (0 based)// x,y are the coordinates of the clicked position relative to the image // (if x && y == -1 => changed by program(SetClickedEmojiNumber)
}
@OverridepublicvoidonEmojiUnclicked(intemojiIndex, intx, inty) {
// emojiIndex is the index of the emoji being clicked (0 based)// x,y are the coordinates of the clicked position relative to the image // (if x && y == -1 => changed by program(SetClickedEmojiNumber)
}
});

If you are struck somewhere, you can always check its usage in the sample app for Simple and RecyclerView usage.

With this all done and working, you have made to the default design!

Further customization

The library provides these attributes to modify default design to a custom one:

AttributeDescriptionType(Range)Default Value
emojisSet the emojis to be displayed in the panel animationreference
set_emojiSet the current selected emojiinteger(>-1)(< noe*) (0 based)-1
home_Center_XSet the x coordinate of homeEmoji's centerdimensions30 * density
home_Center_YSet the y coordinate of homeEmoji's centerdimensionsHeight - 30 * density
home_sideSet the side length of homeEmojidimensions50 * density
panel_center_XSet the x coordinate of the center of panel animationdimension or fraction [0%,100%] (w.r.t width)#width / 2
panel_center_YSet the y coordinate of the center of panel animationdimension or fraction [0%,100%] (w.r.t height)Height - emojiSide / 2
panel_radiusSet the radius of panel animationdimensionmin(Height,Width) / 2 - 20 * density
panel_emoji_sideSet the side of emojis on the paneldimension50 * density
emojis_rising_heightSet the height of the rising emojis(to start disappearing)fraction [0%,100%] (w.r.t height)#Height / 2
emojis_rising_speedSet the speed per frame of the rising emojisdimension10 * density
emojis_rising_numberSet the number of emojis rising in rising emojis animationinteger24

*noe = number of emojis.
# measurement from bottom

Public methods

MethodDescriptionData Type
getCentreGet the center of panel animationint(Pixels)
getRadiusGet the radius of panel animationint(Pixels)
get/SetClickedEmojiNumberGet/Set the current selected emojiint (-1 for none)(0 based)
getNumberOfEmojisGet the number Of emojis in the panelint
getEmojisRisingSpeedGet the speed per frame of the rising emojisint(Pixels)
getHomeRectGet the Rect of the home emojiRect
getPanelEmojiSideGet the side of emojis on the panelint(Pixels)
get/SetHomeBitmapGet/Set the bitmap of the home emojiBitmap
isHomeEmojiVisibleIs home emoji visibleboolean
isPanelAnimWorkingIs panel visibleboolean
isClickingAnimWorkingIs the clicking animation workingboolean
isEmojiRisingIs emoji rising animation visibleboolean
setHomeEmojiVisibleSwitch to home bitmap visible modeboolean
setPanelAnimWorkingStart the panel animationboolean

Contributions

All contributions are welcome and appreciated. Please make a Pull Request or open an issue, if necessary. This may also include any form of feature enhancement. Every constructive criticism is welcome. See Contributing.md

License

This library is licensed under MIT license. View license.

About

Instagram's emoji reaction for android!

Topics

Resources

Contributing

Stars

78 stars

Watchers

2 watching

Forks

Releases

Packages

Used by

Contributors

Languages