Merge pull request #829 from tobioyelekan/stroke_balloon

Stroke balloon

Author: skydoves

balloon/api/balloon.api

@@ -253,6 +253,7 @@ public final class com/skydoves/balloon/Balloon$Builder {
 	public final fun getBalloonOverlayAnimation ()Lcom/skydoves/balloon/overlay/BalloonOverlayAnimation;
 	public final fun getBalloonOverlayAnimationStyle ()I
 	public final fun getBalloonRotateAnimation ()Lcom/skydoves/balloon/animations/BalloonRotateAnimation;
+	public final fun getBalloonStroke ()Lcom/skydoves/balloon/BalloonStroke;
 	public final fun getCircularDuration ()J
 	public final fun getCornerRadius ()F
 	public final fun getDismissWhenClicked ()Z
@@ -325,6 +326,7 @@ public final class com/skydoves/balloon/Balloon$Builder {
 	public final fun getWidth ()I
 	public final fun getWidthRatio ()F
 	public final fun isAttachedInDecor ()Z
+	public final fun isClipArrowEnabled ()Z
 	public final fun isComposableContent ()Z
 	public final fun isFocusable ()Z
 	public final fun isRtlLayout ()Z
@@ -402,8 +404,11 @@ public final class com/skydoves/balloon/Balloon$Builder {
 	public final synthetic fun setBalloonOverlayAnimationStyle (I)V
 	public final synthetic fun setBalloonRotateAnimation (Lcom/skydoves/balloon/animations/BalloonRotateAnimation;)V
 	public final fun setBalloonRotationAnimation (Lcom/skydoves/balloon/animations/BalloonRotateAnimation;)Lcom/skydoves/balloon/Balloon$Builder;
+	public final fun setBalloonStroke (IF)Lcom/skydoves/balloon/Balloon$Builder;
+	public final synthetic fun setBalloonStroke (Lcom/skydoves/balloon/BalloonStroke;)V
 	public final fun setCircularDuration (J)Lcom/skydoves/balloon/Balloon$Builder;
 	public final synthetic fun setCircularDuration (J)V
+	public final synthetic fun setClipArrowEnabled (Z)V
 	public final synthetic fun setComposableContent (Z)V
 	public final fun setCornerRadius (F)Lcom/skydoves/balloon/Balloon$Builder;
 	public final synthetic fun setCornerRadius (F)V
@@ -457,6 +462,7 @@ public final class com/skydoves/balloon/Balloon$Builder {
 	public final fun setIncludeFontPadding (Z)Lcom/skydoves/balloon/Balloon$Builder;
 	public final synthetic fun setIncludeFontPadding (Z)V
 	public final fun setIsAttachedInDecor (Z)Lcom/skydoves/balloon/Balloon$Builder;
+	public final fun setIsClipArrowEnabled (Z)Lcom/skydoves/balloon/Balloon$Builder;
 	public final fun setIsComposableContent (Z)Lcom/skydoves/balloon/Balloon$Builder;
 	public final fun setIsStatusBarVisible (Z)Lcom/skydoves/balloon/Balloon$Builder;
 	public final fun setIsVisibleArrow (Z)Lcom/skydoves/balloon/Balloon$Builder;
@@ -785,6 +791,25 @@ public final class com/skydoves/balloon/BalloonSizeSpec {
 	public static final field WRAP I
 }
 
+public final class com/skydoves/balloon/BalloonStroke {
+	public static final field Companion Lcom/skydoves/balloon/BalloonStroke$Companion;
+	public static final field STROKE_THICKNESS_MULTIPLIER F
+	public fun <init> (IF)V
+	public synthetic fun <init> (IFILkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public final fun component1 ()I
+	public final fun component2 ()F
+	public final fun copy (IF)Lcom/skydoves/balloon/BalloonStroke;
+	public static synthetic fun copy$default (Lcom/skydoves/balloon/BalloonStroke;IFILjava/lang/Object;)Lcom/skydoves/balloon/BalloonStroke;
+	public fun equals (Ljava/lang/Object;)Z
+	public final fun getColor ()I
+	public final fun getThickness ()F
+	public fun hashCode ()I
+	public fun toString ()Ljava/lang/String;
+}
+
+public final class com/skydoves/balloon/BalloonStroke$Companion {
+}
+
 public final class com/skydoves/balloon/DeferredBalloon {
 	public fun <init> (Lcom/skydoves/balloon/Balloon;Lcom/skydoves/balloon/BalloonPlacement;)V
 	public final fun component1 ()Lcom/skydoves/balloon/Balloon;
@@ -1068,8 +1093,25 @@ public final class com/skydoves/balloon/radius/RadiusLayout : android/widget/Fra
 	public fun <init> (Landroid/content/Context;Landroid/util/AttributeSet;)V
 	public fun <init> (Landroid/content/Context;Landroid/util/AttributeSet;I)V
 	public synthetic fun <init> (Landroid/content/Context;Landroid/util/AttributeSet;IILkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public final fun getArrowHeight ()F
+	public final fun getArrowOrientation ()Lcom/skydoves/balloon/ArrowOrientation;
+	public final fun getArrowPositionRatio ()F
+	public final fun getArrowWidth ()F
+	public final fun getCustomShapeBackgroundDrawable ()Landroid/graphics/drawable/Drawable;
+	public final fun getDrawCustomShape ()Z
 	public final fun getRadius ()F
+	public final fun rebuildPath ()V
+	public final fun setArrowHeight (F)V
+	public final fun setArrowOrientation (Lcom/skydoves/balloon/ArrowOrientation;)V
+	public final fun setArrowPositionRatio (F)V
+	public final fun setArrowWidth (F)V
+	public final fun setCustomShapeBackgroundDrawable (Landroid/graphics/drawable/Drawable;)V
+	public final fun setDrawCustomShape (Z)V
+	public final fun setFillColor (I)V
+	public fun setPadding (IIII)V
 	public final fun setRadius (F)V
+	public final fun setStroke (FI)V
+	public final fun updateEffectivePadding ()V
 }
 
 public final class com/skydoves/balloon/vectortext/VectorTextView : androidx/appcompat/widget/AppCompatTextView {

balloon/src/main/kotlin/com/skydoves/balloon/Balloon.kt

@@ -113,6 +113,7 @@ import com.skydoves.balloon.internals.unaryMinus
 import com.skydoves.balloon.overlay.BalloonOverlayAnimation
 import com.skydoves.balloon.overlay.BalloonOverlayOval
 import com.skydoves.balloon.overlay.BalloonOverlayShape
+import com.skydoves.balloon.radius.RadiusLayout
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Deferred
 import kotlinx.coroutines.Dispatchers
@@ -321,6 +322,66 @@ public class Balloon private constructor(
     }
   }
 
+  /**
+   * Updates the arrow position on the RadiusLayout based on the anchor position.
+   * This method calculates the appropriate arrow position ratio and updates the
+   * RadiusLayout properties when isClipArrowEnabled is true.
+   *
+   * @param anchor The anchor view to align the arrow with
+   */
+  private fun updateBalloonCardArrowPosition(anchor: View) {
+    val balloonCard = binding.balloonCard
+    val balloonLocation = IntArray(2)
+    val anchorLocation = IntArray(2)
+
+    balloonCard.getLocationOnScreen(balloonLocation)
+    anchor.getLocationOnScreen(anchorLocation)
+
+    val orientation = builder.arrowOrientation.getRTLSupportOrientation(builder.isRtlLayout)
+
+    val ratio = when (orientation) {
+      ArrowOrientation.TOP, ArrowOrientation.BOTTOM -> {
+        when (builder.arrowPositionRules) {
+          ArrowPositionRules.ALIGN_ANCHOR -> {
+            // Use arrowPosition to determine position within anchor
+            val anchorPositionX = anchorLocation[0] + (anchor.width * builder.arrowPosition)
+            val balloonLeft = balloonLocation[0].toFloat()
+            val relativeX = anchorPositionX - balloonLeft
+            (relativeX / balloonCard.width.toFloat()).coerceIn(0f, 1f)
+          }
+
+          ArrowPositionRules.ALIGN_BALLOON -> {
+            builder.arrowPosition.coerceIn(0f, 1f)
+          }
+        }
+      }
+
+      ArrowOrientation.START, ArrowOrientation.END -> {
+        when (builder.arrowPositionRules) {
+          ArrowPositionRules.ALIGN_ANCHOR -> {
+            // Use arrowPosition to determine position within anchor
+            val anchorPositionY = anchorLocation[1] + (anchor.height * builder.arrowPosition)
+            val balloonTop = balloonLocation[1].toFloat()
+            val relativeY = anchorPositionY - balloonTop
+            (relativeY / balloonCard.height.toFloat()).coerceIn(0f, 1f)
+          }
+
+          ArrowPositionRules.ALIGN_BALLOON -> {
+            builder.arrowPosition.coerceIn(0f, 1f)
+          }
+        }
+      }
+    }
+
+    (balloonCard as? RadiusLayout)?.let { layout ->
+      layout.arrowPositionRatio = ratio
+      layout.arrowOrientation = orientation
+
+      layout.rebuildPath()
+      layout.updateEffectivePadding()
+    }
+  }
+
   /** Returns [BitmapDrawable] that will be used for the foreground of the arrow. */
   private fun ImageView.getArrowForeground(x: Float, y: Float): BitmapDrawable? {
     return if (builder.arrowColorMatchBalloon && isAPILevelHigherThan23()) {
@@ -544,11 +605,51 @@ public class Balloon private constructor(
     with(binding.balloonCard) {
       alpha = builder.alpha
       radius = builder.cornerRadius
-      ViewCompat.setElevation(this, builder.elevation)
-      background = builder.backgroundDrawable ?: GradientDrawable().apply {
-        setColor(builder.backgroundColor)
-        cornerRadius = builder.cornerRadius
+      // Radius and elevation are applied to the RadiusLayout directly
+      (this as? RadiusLayout)?.let { layout ->
+        layout.radius = builder.cornerRadius // Radius is still set, used by path creation
+        ViewCompat.setElevation(layout, builder.elevation)
+
+        // --- Determine the drawing mode for RadiusLayout ---
+        // If true, RadiusLayout handles all drawing
+        layout.drawCustomShape = builder.isClipArrowEnabled
+
+        if (builder.isClipArrowEnabled) {
+          // If isClipArrowEnabled is true, RadiusLayout will draw its own shape
+          layout.arrowHeight = builder.arrowSize.toFloat() * 2f
+          layout.arrowWidth = builder.arrowSize.toFloat()
+
+          layout.arrowOrientation = builder.arrowOrientation
+
+          // --- Handle Custom Background Drawable for the combined shape ---
+          if (builder.backgroundDrawable != null) {
+            layout.customShapeBackgroundDrawable = builder.backgroundDrawable
+            layout.setFillColor(Color.TRANSPARENT)
+          } else {
+            layout.customShapeBackgroundDrawable = null
+            layout.setFillColor(builder.backgroundColor)
+          }
+
+          // --- ALWAYS configure RadiusLayout's strokePaint here if a stroke is desired ---
+          // This ensures the stroke is drawn by RadiusLayout on the custom path,
+          // regardless of whether a custom backgroundDrawable is provided for the fill.
+          builder.balloonStroke?.let { stroke ->
+            layout.setStroke(thickness = stroke.thickness, color = stroke.color)
+          } ?: run {
+            // No stroke if not provided in builder
+            layout.setStroke(thickness = 0f, color = Color.TRANSPARENT)
+          }
+        } else {
+          // --- Old mode: ImageView arrow, RadiusLayout acts as a regular FrameLayout with
+          // rounded background ---
+          background = builder.backgroundDrawable ?: GradientDrawable().apply {
+            setColor(builder.backgroundColor)
+            cornerRadius = builder.cornerRadius
+          }
+        }
       }
+      // Apply padding. RadiusLayout's setPadding will now internally adjust for the arrow
+      // if drawCustomShape is true. Otherwise, it just passes padding to super.
       setPadding(
         builder.paddingLeft,
         builder.paddingTop,
@@ -827,7 +928,19 @@ public class Balloon private constructor(
           FrameLayout.LayoutParams.MATCH_PARENT,
           FrameLayout.LayoutParams.MATCH_PARENT,
         )
-        initializeArrow(mainAnchor)
+
+        if (!builder.isClipArrowEnabled) {
+          initializeArrow(mainAnchor)
+        } else {
+          binding.balloonCard.post {
+            onBalloonInitializedListener?.onBalloonInitialized(getContentView())
+
+            adjustArrowOrientationByRules(mainAnchor)
+
+            updateBalloonCardArrowPosition(mainAnchor)
+          }
+        }
+
         initializeBalloonContent()
 
         applyBalloonOverlayAnimation()
@@ -861,19 +974,25 @@ public class Balloon private constructor(
     val xOff = placement.xOff
     val yOff = placement.yOff
 
+    val protrusion = if (builder.isClipArrowEnabled) builder.arrowSize else 0
+
     return when (placement.align) {
       BalloonAlign.TOP ->
         builder.supportRtlLayoutFactor * (halfAnchorWidth - halfBalloonWidth + xOff) to
-          -(getMeasuredHeight() + anchor.measuredHeight) + yOff
+          -(getMeasuredHeight() + anchor.measuredHeight - protrusion) + yOff
 
       BalloonAlign.BOTTOM ->
         builder.supportRtlLayoutFactor * (halfAnchorWidth - halfBalloonWidth + xOff) to yOff
 
-      BalloonAlign.START -> builder.supportRtlLayoutFactor * (-getMeasuredWidth() + xOff) to
-        -(halfBalloonHeight + halfAnchorHeight) + yOff
+      BalloonAlign.START -> builder.supportRtlLayoutFactor * (
+        -getMeasuredWidth() +
+          protrusion + xOff
+        ) to -(halfBalloonHeight + halfAnchorHeight) + yOff
 
-      BalloonAlign.END -> builder.supportRtlLayoutFactor * (anchor.measuredWidth + xOff) to
-        -(halfBalloonHeight + halfAnchorHeight) + yOff
+      BalloonAlign.END -> builder.supportRtlLayoutFactor * (
+        anchor.measuredWidth -
+          protrusion + xOff
+        ) to -(halfBalloonHeight + halfAnchorHeight) + yOff
     }
   }
 
@@ -1629,7 +1748,11 @@ public class Balloon private constructor(
   @MainThread
   private fun update(placement: BalloonPlacement) {
     if (isShowing) {
-      updateArrow(placement.anchor)
+      if (builder.isClipArrowEnabled) {
+        updateBalloonCardArrowPosition(placement.anchor)
+      } else {
+        updateArrow(placement.anchor)
+      }
 
       val (xOff, yOff) = calculateOffset(placement)
       this.bodyWindow.update(
@@ -2373,6 +2496,32 @@ public class Balloon private constructor(
     @set:JvmSynthetic
     public var isComposableContent: Boolean = false
 
+    @set:JvmSynthetic
+    public var isClipArrowEnabled: Boolean = false
+
+    @set:JvmSynthetic
+    public var balloonStroke: BalloonStroke? = null
+
+    /**
+     * Sets whether the arrow should be drawn as part of the balloon background shape.
+     * When enabled, the arrow is integrated into the balloon's RadiusLayout background
+     * and supports stroke drawing. When disabled, uses the legacy separate arrow ImageView.
+     * Default is false for backward compatibility.
+     */
+    public fun setIsClipArrowEnabled(value: Boolean): Builder = apply {
+      this.isClipArrowEnabled = value
+    }
+
+    /**
+     * Sets the stroke (outline) properties for the balloon.
+     * Only works when isClipArrowEnabled is true.
+     * @param color The color of the stroke
+     * @param thickness The thickness of the stroke in dp
+     **/
+    public fun setBalloonStroke(@ColorInt color: Int, @Dp thickness: Float): Builder = apply {
+      this.balloonStroke = BalloonStroke(color, thickness)
+    }
+
     /** sets the width size. */
     public fun setWidth(@Dp value: Int): Builder = apply {
       require(

balloon/src/main/kotlin/com/skydoves/balloon/BalloonStroke.kt

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 skydoves
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.skydoves.balloon
+
+import androidx.annotation.ColorInt
+import com.skydoves.balloon.annotations.Dp
+
+public data class BalloonStroke(
+  @ColorInt public val color: Int,
+  @Dp public val thickness: Float = 1f,
+) {
+  public companion object {
+    /**
+     * The stroke looks visually thinner due to how it's drawn over the path,
+     * so we multiply thickness to compensate for better visibility.
+     * this is a workaround for the issue.
+     **/
+    public const val STROKE_THICKNESS_MULTIPLIER: Float = 1.5f
+  }
+}