Skip to content

Commit

Permalink
Implement tooltip type
Browse files Browse the repository at this point in the history
  • Loading branch information
Isral Bustami committed Jun 17, 2021
1 parent 93aa059 commit fe87431
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 14 deletions.
5 changes: 5 additions & 0 deletions sample/src/main/java/com/happyfresh/showcaseview/MainActivity.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

import com.happyfresh.showcase.GuideView;
import com.happyfresh.showcase.config.AlignType;
import com.happyfresh.showcase.config.ShowCaseType;
import com.happyfresh.showcase.listener.GuideListener;

public class MainActivity extends AppCompatActivity {
Expand All @@ -33,6 +34,10 @@ private void showCoachLayout() {
.setTitle("Kami butuh alamatmu")
.setContentText("Untuk memastikan alamat pengantaran berada dalam jangkauan HappyFresh")
.setViewAlign(AlignType.center)
.setTooltipTriangleColor(ContextCompat.getColor(this, android.R.color.holo_blue_bright))
// remove this comment to perform tooltip type
// .setShowCaseType(ShowCaseType.TOOLTIP)
// .setTooltipTriangleSize(15)
.setTitleGravity(Gravity.LEFT)
.setContentGravity(Gravity.LEFT)
.setButtonGravity(Gravity.RIGHT)
Expand Down
89 changes: 75 additions & 14 deletions showcase/src/main/java/com/happyfresh/showcase/GuideView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@

import com.happyfresh.showcase.config.AlignType;
import com.happyfresh.showcase.config.DismissType;
import com.happyfresh.showcase.config.ShowCaseType;
import com.happyfresh.showcase.listener.GuideListener;

public class GuideView extends FrameLayout {

static final String TAG = "GuideView";

private static final int INDICATOR_HEIGHT = 40;
private static final int INDICATOR_HEIGHT_TOOLTIP = 10;
private static final int MESSAGE_VIEW_PADDING = 5;
private static final int SIZE_ANIMATION_DURATION = 700;
private static final int APPEARING_ANIMATION_DURATION = 400;
Expand All @@ -38,6 +40,7 @@ public class GuideView extends FrameLayout {
private static final int MARGIN_INDICATOR = 15;

private static final int BACKGROUND_COLOR = 0x99000000;
private static final int BACKGROUND_TRANSPARENT = 0X00ff0000;
private static final int CIRCLE_INNER_INDICATOR_COLOR = 0xffcccccc;
private static final int CIRCLE_INDICATOR_COLOR = Color.WHITE;
private static final int LINE_INDICATOR_COLOR = Color.WHITE;
Expand All @@ -58,6 +61,10 @@ public class GuideView extends FrameLayout {
private boolean mIsShowing;
private int yMessageView = 0;

@ColorInt
private int tooltipTriangleColor;
private int toolTipTriangleSize;

private float startYLineAndCircle;
private float circleIndicatorSize = 0;
private float circleIndicatorSizeFinal;
Expand All @@ -67,12 +74,14 @@ public class GuideView extends FrameLayout {
private float marginGuide;
private float strokeCircleWidth;
private float indicatorHeight;
private float indicatorHeightTooltip;

private boolean isPerformedAnimationSize = false;

private GuideListener mGuideListener;
private AlignType mAlignType;
private DismissType dismissType;
private ShowCaseType showCaseType;
public GuideMessageView mMessageView;

private GuideView(Context context, final View view) {
Expand Down Expand Up @@ -122,7 +131,11 @@ public void onGlobalLayout() {
marginGuide = (int) (isTop ? marginGuide : -marginGuide);
startYLineAndCircle = (isTop ? targetRect.bottom : targetRect.top) + marginGuide;
stopY = yMessageView + indicatorHeight;
startAnimationSize();

if (showCaseType == ShowCaseType.ON_BOARDING) {
startAnimationSize();
}

getViewTreeObserver().addOnGlobalLayoutListener(this);
}
};
Expand Down Expand Up @@ -183,6 +196,7 @@ private void init() {
lineIndicatorWidthSize = LINE_INDICATOR_WIDTH_SIZE * density;
marginGuide = MARGIN_INDICATOR * density;
indicatorHeight = INDICATOR_HEIGHT * density;
indicatorHeightTooltip = INDICATOR_HEIGHT_TOOLTIP * density;
messageViewPadding = (int) (MESSAGE_VIEW_PADDING * density);
strokeCircleWidth = STROKE_CIRCLE_INDICATOR_SIZE * density;
circleIndicatorSizeFinal = CIRCLE_INDICATOR_SIZE * density;
Expand Down Expand Up @@ -211,6 +225,9 @@ protected void onDraw(final Canvas canvas) {
canvas.drawRect(selfRect, selfPaint);

paintLine.setStyle(Paint.Style.FILL);
if (showCaseType == ShowCaseType.TOOLTIP) {
paintLine.setColor(tooltipTriangleColor);
}
paintLine.setStrokeWidth(lineIndicatorWidthSize);
paintLine.setAntiAlias(true);

Expand All @@ -226,19 +243,39 @@ protected void onDraw(final Canvas canvas) {


final float x = (targetRect.left / 2 + targetRect.right / 2);
canvas.drawLine(x,
startYLineAndCircle,
x,
stopY,
paintLine);

canvas.drawCircle(x, startYLineAndCircle, circleIndicatorSize, paintCircle);
canvas.drawCircle(x, startYLineAndCircle, circleInnerIndicatorSize, paintCircleInner);
if (showCaseType == ShowCaseType.ON_BOARDING) {
canvas.drawLine(x,
startYLineAndCircle,
x,
stopY,
paintLine);

targetPaint.setXfermode(X_FER_MODE_CLEAR);
targetPaint.setAntiAlias(true);
canvas.drawCircle(x, startYLineAndCircle, circleIndicatorSize, paintCircle);
canvas.drawCircle(x, startYLineAndCircle, circleInnerIndicatorSize, paintCircleInner);
targetPaint.setXfermode(X_FER_MODE_CLEAR);
targetPaint.setAntiAlias(true);

canvas.drawRoundRect(targetRect, RADIUS_SIZE_TARGET_RECT, RADIUS_SIZE_TARGET_RECT, targetPaint);
canvas.drawRoundRect(targetRect, RADIUS_SIZE_TARGET_RECT, RADIUS_SIZE_TARGET_RECT, targetPaint);
}

if (showCaseType == ShowCaseType.TOOLTIP) {
Path path = new Path();
float y = isTop ? targetRect.bottom : targetRect.top;
path.setFillType(Path.FillType.EVEN_ODD);
if (!isTop) {
path.moveTo(x - (toolTipTriangleSize * density), y - (toolTipTriangleSize * density));
path.lineTo(x, y);
path.lineTo(x + (toolTipTriangleSize * density), y - (toolTipTriangleSize * density));
}
else {
path.moveTo(x - (toolTipTriangleSize * density), y + (toolTipTriangleSize * density));
path.lineTo(x, y);
path.lineTo(x + (toolTipTriangleSize * density), y + (toolTipTriangleSize * density));
}
path.close();
canvas.drawPath(path, paintLine);
}
}
}

Expand Down Expand Up @@ -337,12 +374,12 @@ private Point resolveMessageViewLocation() {
//set message view bottom
if (targetRect.top + (indicatorHeight) > getHeight() / 2) {
isTop = false;
yMessageView = (int) (targetRect.top - mMessageView.getHeight() - indicatorHeight);
yMessageView = (int) (targetRect.top - mMessageView.getHeight() - (showCaseType == ShowCaseType.ON_BOARDING ? indicatorHeight : indicatorHeightTooltip));
}
//set message view top
else {
isTop = true;
yMessageView = (int) (targetRect.top + target.getHeight() + indicatorHeight);
yMessageView = ((int) (targetRect.top + target.getHeight() + (showCaseType == ShowCaseType.ON_BOARDING ? indicatorHeight : indicatorHeightTooltip)));
}

if (yMessageView < 0)
Expand Down Expand Up @@ -449,7 +486,7 @@ public void setContentTextSize(int size) {

public void setVisibleBackgroundOverlay(boolean isVisibleBackground) {
if(isVisibleBackground) {
selfPaint.setColor(BACKGROUND_COLOR);
selfPaint.setColor(showCaseType == ShowCaseType.ON_BOARDING ? BACKGROUND_COLOR : BACKGROUND_TRANSPARENT);
selfPaint.setStyle(Paint.Style.FILL);
selfPaint.setAntiAlias(true);
}
Expand All @@ -465,6 +502,7 @@ public static class Builder {
private String title, contentText;
private AlignType alignType;
private DismissType dismissType;
private ShowCaseType showCaseType;
private Context context;
private Spannable contentSpan;
private Typeface titleTypeFace, contentTypeFace;
Expand Down Expand Up @@ -497,6 +535,10 @@ public static class Builder {
private int paddingTopButton;
private int paddingBottomButton;

@ColorInt
private int tooltipTriangleColor;
private int tooltipTriangleSize;

public Builder(Context context) {
this.context = context;
}
Expand Down Expand Up @@ -681,6 +723,21 @@ public Builder setDismissType(DismissType dismissType) {
return this;
}

public Builder setShowCaseType(ShowCaseType showCaseType) {
this.showCaseType = showCaseType;
return this;
}

public Builder setTooltipTriangleColor(@ColorInt int color) {
this.tooltipTriangleColor = color;
return this;
}

public Builder setTooltipTriangleSize(int tooltipTriangleSize) {
this.tooltipTriangleSize = tooltipTriangleSize;
return this;
}

/**
* changing line height indicator
*
Expand Down Expand Up @@ -788,6 +845,10 @@ public GuideView build() {
GuideView guideView = new GuideView(context, targetView);
guideView.mAlignType = alignType != null ? alignType : AlignType.auto;
guideView.dismissType = dismissType;
guideView.showCaseType = showCaseType == null ? ShowCaseType.ON_BOARDING : showCaseType;
guideView.tooltipTriangleColor = tooltipTriangleColor;
guideView.toolTipTriangleSize = tooltipTriangleSize;

float density = context.getResources().getDisplayMetrics().density;

guideView.setTitle(title);
Expand Down
5 changes: 5 additions & 0 deletions showcase/src/main/java/com/happyfresh/showcase/config/ShowCaseType.java
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
package com.happyfresh.showcase.config;

public enum ShowCaseType {
TOOLTIP, ON_BOARDING
}

0 comments on commit fe87431

Please sign in to comment.