Balloon-Compose height issue

[isansc]

Discussed in #468

^{Originally posted by isansc August 15, 2023}
I'm trying to use the compose version of balloon and its height seems to have some limit. It seems to be the same problem that the xml version faced in this issue: #148

It doesn't work even when I set a height value (e.g. 500)

But in my case I'm using the Compose version.

Below is the simple code I'm using based on the Medium arcticle:

`
val context = LocalContext.current
// ToolTip Builder:
val builder = rememberBalloonBuilder {
setArrowSize(16)
setArrowColorMatchBalloon(true)
setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
// setArrowPosition(0.5f)
setTextColor(Color.Black)
setWidth(BalloonSizeSpec.WRAP)
setHeight(BalloonSizeSpec.WRAP)
setPadding(12)
setCornerRadius(12f)
setBackgroundColor(White)
setBalloonAnimation(BalloonAnimation.ELASTIC)
setIsVisibleOverlay(true)
setOverlayColor(Overlay)
setBalloonHighlightAnimation(BalloonHighlightAnimation.NONE)
setDismissWhenClicked(true)
}

[...]

        IconButton(onClick = { /* Empty while testing */ }
        ) {

            Box(modifier = Modifier.fillMaxSize()) {

                Balloon(
                    modifier = Modifier.wrapContentHeight(),
                    builder = builder,
                    balloonContent = {
                            Column() {
                                Text(
                                    modifier = Modifier.fillMaxWidth().wrapContentHeight(),
                                    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                                    textAlign = TextAlign.Start,
                                    color = Color.Gray,
                                    fontSize = 14.sp
                                )
                                Row(
                                    modifier = Modifier
                                        .padding(0.dp, 4.dp)
                                ) {
                                    Button(
                                        onClick = {
                                            Toast.makeText(
                                                context,
                                                "Primary!",
                                                Toast.LENGTH_LONG
                                            )
                                                .show()
                                        },
                                        modifier = Modifier
                                            .wrapContentHeight()
                                            .wrapContentWidth(),
                                        shape = RoundedCornerShape(size = 8.dp),
                                        colors = ButtonDefaults.buttonColors(backgroundColor = GreenPersonalization)
                                    ) {
                                        Text(
                                            modifier = Modifier
                                                .padding(
                                                    start = 4.dp,
                                                    end = 4.dp,
                                                    top = 16.dp,
                                                    bottom = 16.dp
                                                ),
                                            text = "Primary",
                                            color = White,
                                            textAlign = TextAlign.Center,
                                            fontSize = 18.sp,
                                        )
                                    }
                                    Spacer(modifier = Modifier.height(8.dp))
                                    Button(
                                        onClick = {
                                            Toast.makeText(
                                                context,
                                                "Secondary!",
                                                Toast.LENGTH_LONG
                                            )
                                                .show()
                                        },
                                        modifier = Modifier
                                            .wrapContentHeight()
                                            .wrapContentWidth(),
                                        border = BorderStroke(2.dp, Grey),
                                        shape = RoundedCornerShape(size = 8.dp),
                                        colors = ButtonDefaults.buttonColors(backgroundColor = White)
                                    ) {
                                        Text(
                                            modifier = Modifier
                                                .padding(
                                                    start = 4.dp,
                                                    end = 4.dp,
                                                    top = 16.dp,
                                                    bottom = 16.dp
                                                ),
                                            text = "Secondary",
                                            color = Grey,
                                            textAlign = TextAlign.Center,
                                            fontSize = 18.sp,
                                        )
                                    }
                                }
                            }
                        }
                    }
                ) { balloonWindow ->

                    if (showTooltip) {
                        balloonWindow.showAlignBottom()
                    }

                    IconButton(
                        modifier = Modifier.size(60.dp, 60.dp),
                        onClick = { balloonWindow.showAlignBottom() }
                    ) {
                        Box {
                            Image(
                                modifier = Modifier
                                    .width(24.dp)
                                    .height(24.dp),
                                painter = painterResource(id = R.drawable.ic_logo_svg),
                                contentDescription = "TEST TOOLTIP",
                                colorFilter = ColorFilter.tint(Red)
                            )
                        }
                    }
                }
            }

`

[kostapostolakis]

I mention here this comment describing the same issue.
#148 (comment)

[isansc]

Good! Exactly the same issue I'm facing, and I'm using it in a TopAppBar too, it may be related to the bar then.
I did some tests:

• I cloned the repository and put a long text in the sample app and it worked fine
• Then I copied the sample implementation to my app (using on a button inside TopAppBar) and the issue appeared

[gaborrosta]

I have a similar issue.
I have some checkboxes with balloons in a Column. The text for the first ballon has 3 lines but only 2 are visible and the next ballon has a different string which has 3 lines as well and the whole text is visible.
If I add padding to the text inside the balloonContent and if without it the text would fit into 2 lines, the text is cut. But if I add the padding in the builder, the same happens. Without padding the whole text is displayed.
My current workaround is to add a "\n" to the text.

[skydoves]

Hey @isansc lobo @kostapostolakis @gaborrosta guys, sorry for the very delayed response.

A new version 1.6.0 has been released, please check it out the new version still produces the same issue. Thank you!

[gaborrosta]

@skydoves
I've tried the new version. It is still not working.

[skydoves]

With the given example by @isansc, it seems to work well. @gaborrosta Would you give me any other examples? You can provide any samples with gist.

[gaborrosta]

@skydoves
This is an example of my situation. I also attached a screenshot of how it is displayed on my phone.

@Composable
fun Example() {
    val interactionSource = remember { MutableInteractionSource() }

    val backgroundColor = MaterialTheme.colors.secondary.toArgb()
    val builder = rememberBalloonBuilder {
        this.backgroundColor = backgroundColor
        this.setHeight(BalloonSizeSpec.WRAP)
    }

    Balloon(
        builder = builder,
        balloonContent = {
            Text(
                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
                modifier = Modifier
                    .padding(all = 8.dp),
            )
        },
    ) { balloonWindow ->
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable(
                    interactionSource = interactionSource,
                    indication = LocalIndication.current,
                    onClick = {},
                )
                .padding(end = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Checkbox(
                checked = true,
                onCheckedChange = null,
                modifier = Modifier
                    .padding(all = 12.dp),
            )

            Text(
                text = "Lorem ipsum",
                modifier = Modifier
                    .weight(weight = 1f),
            )

            IconButton(
                onClick = { balloonWindow.showAlignBottom() },
            ) {
                Icon(
                    imageVector = Icons.Filled.Info,
                    contentDescription = "Info",
                )
            }
        }
    }
}

[kostapostolakis]

Hey @isansc lobo @kostapostolakis @gaborrosta guys, sorry for the very delayed response.

A new version 1.6.0 has been released, please check it out the new version still produces the same issue. Thank you!

It was fixed in compose. Thanks!

[skydoves]

@kostapostolakis Thanks for checking this issue!

[skydoves]

@gaborrosta Are you sure you're using 1.6.0?

My Samsung devices (S10, S23) works really work:

[skydoves]

@gaborrosta I hope you try the builder below:

      val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setArrowPosition(0.5f)
        setPadding(12)
        setMarginHorizontal(12)
        setTextSize(15f)
        setCornerRadius(8f)
        setBackgroundColorResource(R.color.skyBlue)
        setBalloonAnimation(BalloonAnimation.ELASTIC)
        setIsVisibleOverlay(true)
        setOverlayColorResource(R.color.overlay)
        setOverlayPaddingResource(R.dimen.editBalloonOverlayPadding)
        setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)
        setOverlayShape(
          BalloonOverlayRoundRect(
            R.dimen.editBalloonOverlayRadius,
            R.dimen.editBalloonOverlayRadius,
          ),
        )
        setDismissWhenClicked(true)
      }

[gaborrosta]

@gaborrosta Are you sure you're using 1.6.0?

My Samsung devices (S10, S23) works really work:

@skydoves Yes.
But the text must be able to fit into two rows without padding. And then if padding is added, it will need 3 lines but only 2 will be visible.
You need to alter my example a little bit to get the same result on your devices.

[skydoves]

That's weird..

        Balloon(
          modifier = Modifier
            .padding(20.dp)
            .align(Alignment.Center),
          builder = rememberBalloonBuilder {
            setBackgroundColorResource(R.color.skyBlue)
            setHeight(BalloonSizeSpec.WRAP)
          },
          balloonContent = {
            Text(
              text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
              modifier = Modifier
                .padding(all = 8.dp),
            )
          },
        ) { balloonWindow ->
          Button(
            modifier = Modifier.size(160.dp, 60.dp),
            onClick = { balloonWindow1.showAlignTop() },
          ) {
            Text(text = "showAlignTop")
          }
        }

Result: (Pixel 4a API 32)

[gaborrosta]

@skydoves
I've tried again, but still not working. I took screenshots (Honor 20), so the text is properly displayed without 8.dp padding like this:

But if I add padding even in the builder or inside the Text Composable inside balloonContent, I get this:

Interestingly, I tried with different padding rather than 8.dp in both places. With padding12.dp (as in your previously sent builder) and 9.dp it is working properly, but I get the same problem with 7.dp.

I hope this explanation helps you with finding the solution.

[skydoves]

Hey guys, a new version, 1.6.4, has been released. I'm wondering if this issue still happens in the new version. Thank you for your time in advance!

[gaborrosta]

@skydoves I've tried the new version and it seems it is working now. Thank you for the fix!

[skydoves]

@gaborrosta Thanks for checking this! I'm closing this issue now. If you still face any similar issue with this, please reopen this issue anytime.

[TomTruyen]

@skydoves This issue should be reopened. When setting the "setWidthRatio" to for example: 0.8f it breaks again