Skip to content

Commit 4705886

Browse files
AmrDeveloperAmrDeveloper
committed
Issue #8: Implement Reaction tooltip feature with customization options
1 parent 60053e0 commit 4705886

File tree

3 files changed

+140
-1
lines changed

3 files changed

+140
-1
lines changed

‎reactbutton/src/main/java/com/amrdeveloper/reactbutton/ReactButton.java

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@
1111
import android.util.DisplayMetrics;
1212
import android.view.Gravity;
1313
import android.view.LayoutInflater;
14+
import android.view.MotionEvent;
1415
import android.view.View;
16+
import android.view.ViewGroup;
1517
import android.view.Window;
1618
import android.view.WindowManager;
1719
import android.widget.AdapterView;
1820
import android.widget.Button;
1921
import android.widget.GridView;
22+
import android.widget.PopupWindow;
23+
import android.widget.TextView;
2024

25+
import androidx.annotation.ColorInt;
2126
import androidx.annotation.DrawableRes;
2227

2328
import java.util.ArrayList;
@@ -77,11 +82,42 @@ public class ReactButton
7782
*/
7883
private int mReactDialogShape = R.drawable.react_dialog_shape;
7984

85+
/**
86+
* Enable/Disable the reactions tooltip feature
87+
*/
88+
private boolean enableReactionTooltip = false;
89+
90+
/**
91+
* The offset between tooltip and the reaction icon
92+
*/
93+
private int mTooltipOffsetFromReaction = 100;
94+
95+
/**
96+
* The default color for React tooltip text
97+
*/
98+
@ColorInt private int mReactTooltipTextColor = Color.WHITE;
99+
100+
/**
101+
* The default drawable shape for tooltip text
102+
*/
103+
@DrawableRes private int mReactTooltipShape = R.drawable.react_tooltip_shape;
104+
105+
/**
106+
* The min height of tooltip
107+
*/
108+
private static final int TOOLTIP_VIEW_MIN_HEIGHT = 50;
109+
110+
/**
111+
* Reaction image view padding
112+
*/
113+
private static final int ICON_PADDING = 10;
114+
80115
/**
81116
* The size of reaction icon in dp
82117
* Icon size + icon padding * 2
83118
*/
84-
private static final int ICON_SIZE_WITH_PADDING = 55;
119+
private static final int ICON_SIZE_WITH_PADDING = 45 + ICON_PADDING;
120+
85121

86122
/**
87123
* Full reaction icon size converted from dp
@@ -176,6 +212,49 @@ public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
176212
}
177213
});
178214

215+
if (enableReactionTooltip) {
216+
final PopupWindow[] popupWindow = new PopupWindow[1];
217+
reactionsGrid.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
218+
@Override
219+
public boolean onItemLongClick(AdapterView<?> adapterView, View view, int position, long id) {
220+
Reaction currentReaction = mReactions.get(position);
221+
222+
View tooltipView = LayoutInflater.from(context).inflate(R.layout.react_tooltip_layout, null);
223+
tooltipView.measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
224+
tooltipView.setBackgroundResource(mReactTooltipShape);
225+
226+
TextView tooltipTextView = tooltipView.findViewById(R.id.react_tooltip_text);
227+
tooltipTextView.setTextColor(mReactTooltipTextColor);
228+
tooltipTextView.setText(currentReaction.getReactText());
229+
230+
popupWindow[0] = new PopupWindow(tooltipView, tooltipView.getMeasuredWidth(), tooltipView.getMeasuredHeight(), true);
231+
popupWindow[0].setOutsideTouchable(true);
232+
233+
final int[] viewLocation = new int[2];
234+
view.getLocationOnScreen(viewLocation);
235+
float xOffset = viewLocation[0];
236+
float yOffset = viewLocation[1] - mTooltipOffsetFromReaction;
237+
238+
if (yOffset <= TOOLTIP_VIEW_MIN_HEIGHT) yOffset += mTooltipOffsetFromReaction * 2 + TOOLTIP_VIEW_MIN_HEIGHT;
239+
240+
popupWindow[0].showAtLocation(tooltipView, Gravity.NO_GRAVITY, (int) xOffset, (int) yOffset);
241+
return false;
242+
}
243+
});
244+
245+
reactionsGrid.setOnTouchListener(new OnTouchListener() {
246+
247+
@SuppressLint("ClickableViewAccessibility")
248+
@Override
249+
public boolean onTouch(View v, MotionEvent event) {
250+
if (event.getAction() == MotionEvent.ACTION_UP) {
251+
if (popupWindow[0] != null) popupWindow[0].dismiss();
252+
}
253+
return false;
254+
}
255+
});
256+
}
257+
179258
AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(context);
180259
dialogBuilder.setView(dialogView);
181260
mReactAlertDialog = dialogBuilder.create();
@@ -227,6 +306,34 @@ public void setReactionDialogShape(@DrawableRes int drawableShape) {
227306
this.mReactDialogShape = drawableShape;
228307
}
229308

309+
/**
310+
* @param offset from the reaction icon
311+
*/
312+
public void setTooltipOffsetFromReaction(int offset) {
313+
mTooltipOffsetFromReaction = offset;
314+
}
315+
316+
/**
317+
* @param color tooltip text color
318+
*/
319+
public void setReactionTooltipTextColor(@ColorInt int color) {
320+
mReactTooltipTextColor = color;
321+
}
322+
323+
/**
324+
* @param drawableShape tooltip shape for the layout
325+
*/
326+
public void setReactionTooltipShape(@DrawableRes int drawableShape) {
327+
mReactTooltipShape = drawableShape;
328+
}
329+
330+
/**
331+
* @param isEnable enable/disable the reactions tooltip feature
332+
*/
333+
public void setEnableReactionTooltip(boolean isEnable) {
334+
enableReactionTooltip = isEnable;
335+
}
336+
230337
/**
231338
* @param reactions Array of six Reactions to update default six Reactions
232339
*/

‎reactbutton/src/main/res/drawable/react_tooltip_shape.xml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<shape xmlns:android="http://schemas.android.com/apk/res/android">
3+
<stroke
4+
android:width="1dp"
5+
android:color="#B7A6A3A3" />
6+
7+
<solid android:color="#B7A6A3A3" />
8+
9+
<padding
10+
android:bottom="5dp"
11+
android:left="5dp"
12+
android:right="5dp"
13+
android:top="5dp" />
14+
15+
<corners android:radius="25dp" />
16+
</shape>

‎reactbutton/src/main/res/layout/react_tooltip_layout.xml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:tools="http://schemas.android.com/tools"
4+
android:layout_width="wrap_content"
5+
android:layout_height="wrap_content"
6+
android:background="@drawable/react_tooltip_shape"
7+
android:minWidth="50dp">
8+
9+
<TextView
10+
android:id="@+id/react_tooltip_text"
11+
android:layout_width="match_parent"
12+
android:layout_height="match_parent"
13+
android:layout_gravity="center"
14+
android:gravity="center"
15+
tools:text="Reaction" />
16+
</LinearLayout>

0 commit comments

Comments
 (0)