Merge pull request #41 from NicholasMata/custom-guide

Custom Guide Shape

app/src/main/java/ir/smartdevelop/eram/showcaseview/CircleView.java

@@ -0,0 +1,113 @@
+package ir.smartdevelop.eram.showcaseview;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.RectF;
+import android.util.AttributeSet;
+import android.view.View;
+
+import smartdevelop.ir.eram.showcaseviewlib.Targetable;
+
+public class CircleView extends View implements Targetable {
+
+    private static final int DEFAULT_CIRCLE_COLOR = Color.RED;
+    private int _circleColor = DEFAULT_CIRCLE_COLOR;
+    private Paint _paint;
+    private Path _guidePath = new Path();
+    private RectF _boundingRect = new RectF();
+
+    public CircleView(Context context)
+    {
+        super(context);
+        init(context, null);
+    }
+
+    public CircleView(Context context, AttributeSet attrs)
+    {
+        super(context, attrs);
+        init(context, attrs);
+    }
+
+    private void init(Context context, AttributeSet attrs)
+    {
+        _paint = new Paint();
+        _paint.setAntiAlias(true);
+    }
+
+    public void setCircleColor(int circleColor)
+    {
+        this._circleColor = circleColor;
+        invalidate();
+    }
+
+    public int getCircleColor()
+    {
+        return _circleColor;
+    }
+
+    private int usableWidth() {
+        int w = getWidth();
+
+        int pl = getPaddingLeft();
+        int pr = getPaddingRight();
+
+        return w - (pl + pr);
+    }
+
+    private int usableHeight() {
+        int h = getHeight();
+
+        int pt = getPaddingTop();
+        int pb = getPaddingBottom();
+
+        return h - (pt + pb);
+    }
+
+    protected void onDraw(Canvas canvas)
+    {
+        super.onDraw(canvas);
+
+        int pl = getPaddingLeft();
+        int pt = getPaddingTop();
+
+        int usableWidth = this.usableWidth();
+        int usableHeight = this.usableHeight();
+
+        int halfUsableWidth = usableWidth / 2;
+        int halfUsableHeight = usableHeight / 2;
+
+        int radius = Math.min(usableWidth, usableHeight) / 2;
+        int cx = pl + halfUsableWidth;
+        int cy = pt + halfUsableHeight;
+
+        _paint.setColor(_circleColor);
+
+        canvas.drawCircle(cx, cy, radius, _paint);
+
+        int[] locationTarget = new int[2];
+        getLocationOnScreen(locationTarget);
+        int centerX = pl + halfUsableWidth + locationTarget[0];
+        int centerY = pt + halfUsableHeight + locationTarget[1];
+        _guidePath.reset();
+        _guidePath.addCircle(centerX, centerY, radius, Path.Direction.CW);
+
+        _boundingRect.left = locationTarget[0];
+        _boundingRect.top = locationTarget[1];
+        _boundingRect.right = locationTarget[0] + getWidth();
+        _boundingRect.bottom = locationTarget[1] + getHeight();
+
+    }
+
+    @Override
+    public Path guidePath() {
+        return _guidePath;
+    }
+
+    @Override
+    public RectF boundingRect() {
+        return _boundingRect;
+    }
+}

app/src/main/java/ir/smartdevelop/eram/showcaseview/MainActivity.java

@@ -17,6 +17,7 @@ public class MainActivity extends AppCompatActivity {
     View view3;
     View view4;
     View view5;
+    View view6;
     private GuideView mGuideView;
     private GuideView.Builder builder;
 
@@ -30,6 +31,7 @@ protected void onCreate(Bundle savedInstanceState) {
         view3 = findViewById(R.id.view3);
         view4 = findViewById(R.id.view4);
         view5 = findViewById(R.id.view5);
+        view6 = findViewById(R.id.view6);
 
         builder = new GuideView.Builder(this)
                 .setTitle("Guide Title Text")
@@ -54,6 +56,9 @@ public void onDismiss(View view) {
                                 builder.setTargetView(view5).build();
                                 break;
                             case R.id.view5:
+                                builder.setTargetView(view6).build();
+                                break;
+                            case R.id.view6:
                                 return;
                         }
                         mGuideView = builder.build();

app/src/main/res/layout/activity_main.xml

@@ -50,6 +50,15 @@
             android:padding="10dp"
             android:text="Guide Test 4" />
 
+        <ir.smartdevelop.eram.showcaseview.CircleView
+            android:id="@+id/view6"
+            android:layout_width="100dp"
+            android:layout_height="100dp"
+            android:layout_gravity="end"
+            android:layout_marginRight="10dp"
+            android:background="@color/colorPrimary"
+            android:padding="10dp" />
+
         <LinearLayout
             android:gravity="center"
             android:id="@+id/view5"

showcaseviewlib/src/main/java/smartdevelop/ir/eram/showcaseviewlib/GuideView.java

@@ -35,7 +35,6 @@
 
 public class GuideView extends FrameLayout {
 
-
     static final String TAG = "GuideView";
 
     private static final int INDICATOR_HEIGHT              = 40;
@@ -95,12 +94,16 @@ private GuideView(Context context, View view) {
         density = context.getResources().getDisplayMetrics().density;
         init();
 
-        int[] locationTarget = new int[2];
-        target.getLocationOnScreen(locationTarget);
-        targetRect = new RectF(locationTarget[0],
-                locationTarget[1],
-                locationTarget[0] + target.getWidth(),
-                locationTarget[1] + target.getHeight());
+        if(view instanceof Targetable ){
+            targetRect = ((Targetable) view).boundingRect();
+        } else {
+            int[] locationTarget = new int[2];
+            target.getLocationOnScreen(locationTarget);
+            targetRect = new RectF(locationTarget[0],
+                    locationTarget[1],
+                    locationTarget[0] + target.getWidth(),
+                    locationTarget[1] + target.getHeight());
+        }
 
         mMessageView = new GuideMessageView(getContext());
         mMessageView.setPadding(messageViewPadding, messageViewPadding, messageViewPadding, messageViewPadding);
@@ -119,13 +122,17 @@ public void onGlobalLayout() {
                     getViewTreeObserver().removeGlobalOnLayoutListener(this);
 
                 setMessageLocation(resolveMessageViewLocation());
-                int[] locationTarget = new int[2];
-                target.getLocationOnScreen(locationTarget);
 
-                targetRect = new RectF(locationTarget[0],
-                        locationTarget[1],
-                        locationTarget[0] + target.getWidth(),
-                        locationTarget[1] + target.getHeight());
+                if(target instanceof Targetable ){
+                    targetRect = ((Targetable) target).boundingRect();
+                } else {
+                    int[] locationTarget = new int[2];
+                    target.getLocationOnScreen(locationTarget);
+                    targetRect = new RectF(locationTarget[0],
+                            locationTarget[1],
+                            locationTarget[0] + target.getWidth(),
+                            locationTarget[1] + target.getHeight());
+                }
 
                 selfRect.set(getPaddingLeft(),
                         getPaddingTop(),
@@ -254,7 +261,11 @@ protected void onDraw(final Canvas canvas) {
             targetPaint.setXfermode(X_FER_MODE_CLEAR);
             targetPaint.setAntiAlias(true);
 
-            canvas.drawRoundRect(targetRect, RADIUS_SIZE_TARGET_RECT, RADIUS_SIZE_TARGET_RECT, targetPaint);
+            if (target instanceof Targetable) {
+                canvas.drawPath(((Targetable) target).guidePath(), targetPaint);
+            } else {
+                canvas.drawRoundRect(targetRect, RADIUS_SIZE_TARGET_RECT, RADIUS_SIZE_TARGET_RECT, targetPaint);
+            }
         }
     }
 

showcaseviewlib/src/main/java/smartdevelop/ir/eram/showcaseviewlib/Targetable.java

@@ -0,0 +1,20 @@
+package smartdevelop.ir.eram.showcaseviewlib;
+
+import android.graphics.Path;
+import android.graphics.RectF;
+
+public interface Targetable {
+    /**
+     * This path will be used when drawing the guide.
+     * @return The path that will be drawn.
+     */
+    Path guidePath();
+
+    /**
+     * This rect is used when displaying the guide message.
+     * If the guidePath is a circle then the bounding box should
+     * be a square that contains the circle inside of it.
+     * @return The rect that will used for positioning guide message.
+     */
+    RectF boundingRect();
+}