skydoves/Balloon

[Compose] Balloon text cut when `setWidthRatio` is used

Closed this issue · 1 comments

Please complete the following information:

  • Library Version: v1.6.7
  • Affected Device: Google Pixel 5 (Android 14), various emulators

Describe the Bug:

Hello! When I use custom composable that contains text, it is being cut when widthRatio is less than 1f. It happens when text is long enough to fill more space than widthRatio allows.

Note that the same thing happens when applying flat value to width.

    val popupBuilder = rememberBalloonBuilder {
        setArrowSize(12)
        setArrowTopPadding(5)
        setArrowPosition(0.5f)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setWidthRatio(0.8f)
        setHeight(BalloonSizeSpec.WRAP)
        setPaddingHorizontal(8)
        setPaddingVertical(3)
        setCornerRadius(tooltipCornerRadius)
        setBackgroundColor(tooltipBackgroundColor)
        setBalloonAnimation(BalloonAnimation.OVERSHOOT)
        setDismissWhenTouchOutside(true)
        setOnBalloonDismissListener { tooltipDisplayed.value = false }
    }

    Balloon(
        builder = popupBuilder,
        balloonContent = {
            Text(
                text = "Some long text, that will for sure be broken into at least two lines and even more sure it will cover whole width of the screen",
            )
        }
    ) { ballonWindow ->  ... }

image

Expected Behavior:

It should break down text into separate lines based on available space specified by widthRatio.

Temporary workaround

If I use setWidth(BalloonSizeSpec.WRAP) alongside setMarginHorizontal it somehow works as expected, however I'd need to calculate width ratio manually, so it is not as elastic.

image


Note that this situation could be fixed with embedded setText (it works as expected), however we also have more complicated views, that can't be replaced with this method (some icons and buttons here and there).

Hey @GhulJr, a new version 1.6.8 has been released and it fixes the width ratio issues. Thank you so much for your report!