Add Transition for show and dismiss ShowCaseView

Author: mreram

app/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'com.android.application'
 android {
     compileSdkVersion 26
     defaultConfig {
-        applicationId "parvane.ir.eram.showcaseview"
+        applicationId "smartdevelop.ir.eram.showcaseview"
         minSdkVersion 14
         targetSdkVersion 25
         versionCode 1

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

@@ -9,27 +9,45 @@
 
 public class MainActivity extends AppCompatActivity {
 
+    private View view;
+    private ShowCaseTask showCaseTask;
+
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
-        View view = findViewById(R.id.txt);
+        view = findViewById(R.id.txt);
         view.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View view) {
                 Toast.makeText(MainActivity.this, "Clicked!", Toast.LENGTH_LONG).show();
             }
         });
 
-        new GuideView.Builder(this)
-                .setTitle("Guide Title Text")
-                .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
-                .setGravity(GuideView.Gravity.AUTO)
-                .setTargetView(view)
-                .build()
-                .show();
+        showCaseTask = new ShowCaseTask();
+        view.postDelayed(showCaseTask, 1000);
+
+    }
 
+    @Override
+    protected void onDestroy() {
+        super.onDestroy();
+        if (showCaseTask != null)
+            view.removeCallbacks(showCaseTask);
+    }
 
+    class ShowCaseTask implements Runnable {
+
+        @Override
+        public void run() {
+            new GuideView.Builder(MainActivity.this)
+                    .setTitle("Guide Title Text")
+                    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
+                    .setGravity(GuideView.Gravity.AUTO)
+                    .setTargetView(view)
+                    .build()
+                    .show();
+        }
     }
 }

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

@@ -1,7 +1,6 @@
 package smartdevelop.ir.eram.showcaseviewlib;
 
 import android.app.Activity;
-import android.app.Dialog;
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
@@ -18,7 +17,7 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
-import android.view.Window;
+import android.view.animation.AlphaAnimation;
 import android.widget.FrameLayout;
 
 /**
@@ -38,6 +37,7 @@ public class GuideView extends FrameLayout {
     private Gravity mGravity;
     int marginGuide;
 
+    final int ANIMATION_DURATION = 600;
     final Paint emptyPaint = new Paint();
     final Paint paintLine = new Paint();
     final Paint paintCircle = new Paint();
@@ -89,7 +89,6 @@ public void onGlobalLayout() {
     }
 
 
-
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
@@ -103,7 +102,7 @@ protected void onDraw(Canvas canvas) {
             float circleInnerSize = 4.5f * density;
 
 
-            mPaint.setColor(0x99000000);
+            mPaint.setColor(0xdd000000);
             mPaint.setStyle(Paint.Style.FILL);
             mPaint.setAntiAlias(true);
             tempCanvas.drawRect(canvas.getClipBounds(), mPaint);
@@ -125,24 +124,24 @@ protected void onDraw(Canvas canvas) {
 
             marginGuide = (int) (isTop ? 15 * density : -15 * density);
 
-            float yLineAndCircle = (isTop ? rect.bottom : rect.top) + marginGuide;
+            float startYLineAndCircle = (isTop ? rect.bottom : rect.top) + marginGuide;
             float xLine = (rect.left / 2 + rect.right / 2);
             float cx = (target.getLeft() / 2 + target.getRight() / 2);
+            float stopY = (y + INDICATOR_HEIGHT * density);
 
-            tempCanvas.drawLine(xLine, yLineAndCircle, xLine,
-                    y + INDICATOR_HEIGHT * density
+            tempCanvas.drawLine(xLine, startYLineAndCircle, xLine,
+                    stopY
                     , paintLine);
 
-            tempCanvas.drawCircle(cx, yLineAndCircle, circleSize, paintCircle);
-            tempCanvas.drawCircle(cx, yLineAndCircle, circleInnerSize, paintCircleInner);
+            tempCanvas.drawCircle(cx, startYLineAndCircle, circleSize, paintCircle);
+            tempCanvas.drawCircle(cx, startYLineAndCircle, circleInnerSize, paintCircleInner);
 
 
             targetPaint.setXfermode(XFERMODE_CLEAR);
             targetPaint.setAntiAlias(true);
 
             tempCanvas.drawRoundRect(rect, 15, 15, targetPaint);
             canvas.drawBitmap(bitmap, 0, 0, emptyPaint);
-
         }
     }
 
@@ -156,6 +155,10 @@ public int getStatusBarHeight() {
     }
 
     public void dismiss() {
+        AlphaAnimation startAnimation = new AlphaAnimation(1f, 0f);
+        startAnimation.setDuration(ANIMATION_DURATION);
+        startAnimation.setFillAfter(true);
+        this.startAnimation(startAnimation);
         ((ViewGroup) ((Activity) getContext()).getWindow().getDecorView()).removeView(this);
     }
 
@@ -222,7 +225,10 @@ public void show() {
         this.setClickable(false);
 
         ((ViewGroup) ((Activity) getContext()).getWindow().getDecorView()).addView(this);
-
+        AlphaAnimation startAnimation = new AlphaAnimation(0.2f, 1.0f);
+        startAnimation.setDuration(ANIMATION_DURATION);
+        startAnimation.setFillAfter(true);
+        this.startAnimation(startAnimation);
 
     }
 
@@ -258,7 +264,6 @@ public void setContentTextSize(int size) {
     }
 
 
-
     public static class Builder {
         private View targetView;
         private String title, contentText;
@@ -267,7 +272,7 @@ public static class Builder {
         private int titleTextSize;
         private int contentTextSize;
         private Spannable contentSpan;
-        private Typeface titleTypeFace,contentTypeFace;
+        private Typeface titleTypeFace, contentTypeFace;
 
         public Builder(Context context) {
             this.context = context;
@@ -342,10 +347,10 @@ public GuideView build() {
                 guideView.setContentTextSize(contentTextSize);
             if (contentSpan != null)
                 guideView.setContentSpan(contentSpan);
-            if(titleTypeFace!=null){
+            if (titleTypeFace != null) {
                 guideView.setTitleTypeFace(titleTypeFace);
             }
-            if(contentTypeFace!=null){
+            if (contentTypeFace != null) {
                 guideView.setContentTypeFace(contentTypeFace);
             }
             return guideView;