Shape Showcase

[UmairAhmed420]

shape of showcase can be change? from rectangle to the circle ?

[shekharsumn]

Adding code for circular showcase incase if it helps somebody else. We need to make changes to following classes. BubbleShowCase.kt and BubbleShowCaseBuilder.kt

1. GOTO BubbleShowCase.kt

2. Add a boolean value here : private val mIsCircle : Boolean = builder.mIsCircle. Now in show() method update the following line from addTargetViewAtBackgroundDimLayout(target, backgroundDimLayout) to addTargetViewAtBackgroundDimLayout(target, backgroundDimLayout, mIsCircle)

3. Search for addTargetViewAtBackgroundDimLayout method and update it use mIsCircle variable. private fun addTargetViewAtBackgroundDimLayout(targetView: View?, backgroundDimLayout: RelativeLayout?,isCircle:Boolean) { if (targetView == null) return val targetScreenshot = takeScreenshot(targetView, mHighlightMode, isCircle) val targetScreenshotView = ImageView(mActivity.get()!!) targetScreenshotView.setImageBitmap(targetScreenshot) targetScreenshotView.setOnClickListener { if (!mDisableTargetClick) dismiss() mBubbleShowCaseListener?.onTargetClick(this) } val targetViewParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT) targetViewParams.setMargins(getXposition(targetView), getYposition(targetView), getScreenWidth(mActivity.get()!!) - (getXposition(targetView) + targetView.width), 0) backgroundDimLayout?.addView(AnimationUtils.setBouncingAnimation(targetScreenshotView, 0, DURATION_BEATING_ANIMATION), targetViewParams) }

4. Update following methods to use the above variable: private fun takeScreenshot(targetView: View, highlightMode: HighlightMode?, isCircle:Boolean): Bitmap? { if (highlightMode == null || highlightMode == HighlightMode.VIEW_LAYOUT) return takeScreenshotOfLayoutView(targetView, isCircle) return takeScreenshotOfSurfaceView(targetView) }

5. private fun takeScreenshotOfLayoutView(targetView: View, isCircle:Boolean): Bitmap? { if (targetView.width == 0 || targetView.height == 0) { return null } val rootView = getViewRoot(mActivity.get()!!) val currentScreenView = rootView.getChildAt(0) currentScreenView.buildDrawingCache() val bitmap: Bitmap bitmap = Bitmap.createBitmap(currentScreenView.drawingCache, getXposition(targetView), getYposition(targetView), targetView.width, targetView.height) currentScreenView.isDrawingCacheEnabled = false currentScreenView.destroyDrawingCache() if(isCircle) { return bitmap.getCircularBitmap() } return bitmap }

6. Add this method that converts rectangular overlay to circular ImageView: //Creates new circular bitmap based on original one. fun Bitmap.getCircularBitmap(config: Bitmap.Config = Bitmap.Config.ARGB_8888): Bitmap { // circle configuration val circlePaint = Paint() if (mBackgroundColor != null) { circlePaint.setColor(mBackgroundColor) } circlePaint.apply { isAntiAlias = true } val circleRadius = Math.max(width, height) / 2f // output bitmap val outputBitmapPaint = Paint(circlePaint).apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) } val outputBounds = Rect(0, 0, width, height) val output = Bitmap.createBitmap(width, height, config) return Canvas(output).run { drawCircle(circleRadius, circleRadius, circleRadius, circlePaint) drawBitmap(this@getCircularBitmap, outputBounds, outputBounds, outputBitmapPaint) output } }

7. Open BubbleShowCaseBuilder.kt

8. add internal var mIsCircle:Boolean = false; to this file

9. Add setter method for circular showcase:

   //If this variable is true, when we show circular showcase on the target, if false we show rectangular showcase // Default value -> false fun isTargetCircle(isCircle: Boolean): BubbleShowCaseBuilder { mIsCircle = isCircle return this }

10. Now we can use this flag with BubbleShowCaseBuilder.

BubbleShowCaseBuilder(this) .title(titleText) .description(descText) .arrowPosition(BubbleShowCase.ArrowPosition.RIGHT) .textColor(Color.BLACK) .titleTextSize(17) .secondTitleTextSize(14) .descriptionTextSize(16) .disableCloseAction(false) .disableTargetClick(false) .isTargetCircle(true) // if true show circular showcase else rectangular .targetView(targetView) .show();

Result: