Balloon does not adapt to the height of a custom View

[cooltey]

Please complete the following information:

• Library version: com.github.skydoves:balloon:1.2.7
• Affected Device: Samsung Galaxy s9 with Android 9.0

Describe the Bug:

We have implemented Balloon with a custom layout. Although the height has specified, some of the text will be cut out if the user adjusts the system font-size.

Code:
https://github.com/wikimedia/apps-android-wikipedia/blob/22b07cdefc8fd184601ae657a2b01dcefd31ed57/app/src/main/java/org/wikipedia/util/FeedbackUtil.java#L226-L234

Expected Behavior:
The library adapts the height of the custom view automatically.

I have checked #112 but it does not work for me.

[skydoves]

Hi, @cooltey!
It seems the balloon has two TextViews in the custom layout.
in this case, we should set the height as setHeight(BalloonSizeSpec.WRAP) and should set the maxWidth on each TextViews like this way. However, as you know the solution is not good to see and not a clean way, so I'm considering measuring the heights of the TextView internally in a custom layout in the next release.
Thanks!

[cooltey]

Thank you @skydoves
I tried your suggestion but looks like it does not work properly if the TextView or its parent view contains paddings

        View view = LayoutInflater.from(context).inflate(layoutRes, null);
        TextView title = view.findViewById(R.id.tooltip_title);
        TextView content = view.findViewById(R.id.tooltip_content);

        Balloon balloon = getTooltipBuilder(context, topOrBottomMargin, aboveOrBelow, autoDismiss)
                .setLayout(view)
                .setHeight(BalloonSizeSpec.WRAP)
                .setWidthRatio(DimenUtil.isLandscape(context) ? 0.4f : 0.8f)
                .setArrowAlignAnchorPadding(arrowAnchorPadding)
                .build();

        title.setMaxWidth(balloon.getMeasuredWidth());
        content.setMaxWidth(balloon.getMeasuredWidth());

Looking forward to see the upcoming release :) Thank you.

[skydoves]

We should use the measureTextWidth() instead of the getMeasuredWidth().

val title = customProfileBalloon.getContentView().findViewById<TextView>(R.id.text1)
customProfileBalloon.measureTextWidth(title)

val content = customProfileBalloon.getContentView().findViewById<TextView>(R.id.text2)
customProfileBalloon.measureTextWidth(content)

We can resolve that issue like this temporarily but I will find a more polished way to resolve this issue.
Thank you for your issue :)

[skydoves]

@cooltey
In the next release, the measuring TextView will be executed automatically.
Thanks!

[skydoves]

@cooltey
It has been released a new version 1.3.1!
Please check about this issue :)

[cooltey]

Hi @skydoves, thanks for the quick fixes 👍

But unfortunately, looks like the issue is still there, here are the screenshots in different font-sizes:

You may notice that the right edge is cutting off and maybe that's the cause of the issue.

Here is the PR I have created:
wikimedia/apps-android-wikipedia#1998

[skydoves]

Hi, @cooltey
I just published 1.3.1-alpha01. Measuring with the padding sizes was added and I tested using the demo project.
In this version, for measuring the height of the textView exactly, we have to set the width size of the root view and TextViews as android:layout_width="wrap_content" or a specific size for the root view.
If the same issue still occurs, please let me know again. Thanks for your issue!

[cooltey]

Hi @skydoves
Thanks for the quick fix again. I tried to upgrade the version 1.3.1-alpha01 and also updated the width of views to wrap_content, but now the bottom is cut off, and also too much space on the right of the content.

and you can see the changes here:
wikimedia/apps-android-wikipedia@e48a7fb

[skydoves]

Thanks for your details!

I just found the problem is Drawable on the TextView.
It seems the measuring is not properly executed if TextView has a (left or right) drawable.
So we can check the balloon's height will be created correctly or not without using the app:drawableStartCompat="@drawable/ic_star_24".

And I just pushed a commit for testing the measuring is being correct. The solution is just creating an ImageView instead of using the drawable on the TextView.

If we want to use the drawableStartCompat on the TextView, it should be calculated using the height size of the drawable internally when the TextVIew has a single line. I will check out more details about this issue :)

Thanks!

[cooltey]

Makes sense. Thanks for checking :)

[epool]

@skydoves first of all thank you for all your work/help on this library.

I'm facing a similar issue to this one, but I'm not using a custom layout nor a icon.

I'm trying to display this text in the balloon Puedes cargar tu INE, pasaporte, FM 2 o FM 3. but it's cuting off the las part as Puedes cargar tu INE, pasaporte, FM 2 o FM...

binding.ivTooltip.setOnClickListener(tooltipView -> new Balloon.Builder(tooltipView.getContext())
        .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        .setBackgroundColorResource(R.color.tooltip_background)
        .setTextColorResource(R.color.white)
        .setCornerRadiusResource(R.dimen.margin_md)
        .setWidthRatio(1f)
        .setPaddingResource(R.dimen.margin_xs)//6dp
        .setMarginLeftResource(R.dimen.margin_xl)//32dp
        .setMarginRightResource(R.dimen.margin_xl)//32dp
        .setTextSizeResource(R.dimen.font_mdl)//16sp NOT SURE IF THIS COULD BE CAUSING THE ISSUE
        .setDismissWhenClicked(true)
        .setTextResource(tooltipInfoRes)
        .setLifecycleOwner(getViewLifecycleOwner())
        .build()
        .showAlignTop(tooltipView)
);

[epool]

@skydoves first of all thank you for all your work/help on this library.

I'm facing a similar issue to this one, but I'm not using a custom layout nor a icon.

I'm trying to display this text in the balloon Puedes cargar tu INE, pasaporte, FM 2 o FM 3. but it's cuting off the las part as Puedes cargar tu INE, pasaporte, FM 2 o FM...

binding.ivTooltip.setOnClickListener(tooltipView -> new Balloon.Builder(tooltipView.getContext())
        .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        .setBackgroundColorResource(R.color.tooltip_background)
        .setTextColorResource(R.color.white)
        .setCornerRadiusResource(R.dimen.margin_md)
        .setWidthRatio(1f)
        .setPaddingResource(R.dimen.margin_xs)//6dp
        .setMarginLeftResource(R.dimen.margin_xl)//32dp
        .setMarginRightResource(R.dimen.margin_xl)//32dp
        .setTextSizeResource(R.dimen.font_mdl)//16sp NOT SURE IF THIS COULD BE CAUSING THE ISSUE
        .setDismissWhenClicked(true)
        .setTextResource(tooltipInfoRes)
        .setLifecycleOwner(getViewLifecycleOwner())
        .build()
        .showAlignTop(tooltipView)
);

I'm sorry @skydoves, is this issue already fixed(I see the Release Next tag)? do you have an ETA for the next release that could include this fix? in advance thank you so much!

[skydoves]

Hi, @epool.
I just found the issue and I will check soon!
And I just solved the issue using .setPadding(8) for right now.

[skydoves]

A new stable version 1.3.2 is released!

[cooltey]

Hi @skydoves, thanks for the new release.

Not sure if we did the configuration incorrectly or something else, the existing code for the plain text Balloon also has the issue that the text is being cut off on the right side, should we update the current configuration?
https://github.com/wikimedia/apps-android-wikipedia/blob/62a4accee6823a888d0be49b86ffd709b2b8f9c1/app/src/main/java/org/wikipedia/util/FeedbackUtil.kt#L199-L215

Screenshot:

[skydoves]

Hi, @cooltey.
Ohh I'm sorry for this issue. 🙏 I just found there are some wrong calculations for measuring the width size of the TextView.
Could you build again using the below SNAPSHOT version?

1.3.3-SNAPSHOT

You may need to add this to your gradle file.

repositories {
   maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
}

If this issue would be fixed, I will release the next stable version.

[cooltey]

Hi, @cooltey.
Ohh I'm sorry for this issue. 🙏 I just found there are some wrong calculations for measuring the width size of the TextView.
Could you build again using the below SNAPSHOT version?

1.3.3-SNAPSHOT

You may need to add this to your gradle file.

repositories {
   maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
}

If this issue would be fixed, I will release the next stable version.

Thanks, @skydoves, the SNAPSHOT version looks pretty good to me! It fixes all the issues 💯 👍

Looking forward to seeing the latest release, and thanks again for your hard works!

[skydoves]

@cooltey @epool

Finally, released a new 1.3.3 stable version.

Thanks for helping to fix this issue! I hope your projects will be going well and I will more appreciate adding this library on the Librareis used or Open source license pages. 👍

[cooltey]

@cooltey @epool

Finally, released a new 1.3.3 stable version.

Thanks for helping to fix this issue! I hope your projects will be going well and I will more appreciate adding this library on the Librareis used or Open source license pages. 👍

@skydoves Thanks and I will absolutely add it to the license page :)

[epool]

@skydoves v1.3.3 fixed the issue on our side, thank you so much!!! 🙌🏼

[cooltey]

Hi @skydoves

Just notice that the issue still happens on the Pixel 2 and Pixel 3XL, but works fine on Samsung S9. Do you have any idea on how to fix it?
wikimedia/apps-android-wikipedia#2169 (review)

[lizhming]

Same height of a custom view problem in Galaxy A9 in 1.3.9

implementation "com.github.skydoves:balloon:1.3.9"

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableLeft="@drawable/ic_check"
        android:drawablePadding="@dimen/dim10"
        android:padding="15dp"
        tools:text="@string/complete_record"
        android:textSize="16sp"/>

</FrameLayout>

    val balloon = Balloon.Builder(this)
        .setLayout(R.layout.item_toast_check)
        .setArrowSize(0)
        .setArrowOrientation(ArrowOrientation.TOP)
        .setArrowPosition(0.5f)
        .setWidth(BalloonSizeSpec.WRAP)
        .setHeight(BalloonSizeSpec.WRAP)
        .setPaddingHorizontal(20)
        .setCornerRadius(4f)
        .setBackgroundColor(ContextCompat.getColor(this, R.color.white))
        .setTextColor(ContextCompat.getColor(this, R.color.white))
        .setBalloonAnimation(BalloonAnimation.OVERSHOOT)
        .setLifecycleOwner(this.lifecycleOwner())
        .setAutoDismissDuration(5000)
        .build()
    balloon.getContentView().findViewById<TextView>(R.id.text).setText("All Done Messages ....")
    balloon.showAlignTop(view, 0, 50)

[kostapostolakis]

I have the same issue with the version below:
com.github.skydoves:balloon-compose:1.5.4

Devide model : Xiaomi POCO F3

I am using TopAppBar and I set to actions the element below:

                SimpleTooltip(
                    showTooltip = instructionsTooltipIsVisible,
                    title = "Game Instructions",
                    description = "Whenever you want, you can see the instructions of the game from this button.,
                    textAlignment = TextAlign.Start,
                    tooltipAlignment = BalloonAlign.BOTTOM,
                    onTooltipDismiss = { mainGameViewModel.instructionsTooltipDismissed() }
                ) {
                    IconButton(onClick = { mainGameViewModel.showInstructions() }) {
                        Icon(imageVector = Icons.Outlined.Info, contentDescription = null, tint = BasePalette.onBackground)
                    }
                }

As far as the SimpleToolTip, I use this composable view:

@Composable
fun SimpleTooltip(
    showTooltip: Boolean = false,
    title: String? = "",
    description: String? = "",
    textAlignment: TextAlign = TextAlign.Center,
    tooltipAlignment: BalloonAlign = BalloonAlign.BOTTOM,
    isCircle: Boolean = true,
    onTooltipDismiss: (() -> Unit)? = null,
    selectedElement: @Composable () -> Unit = {}
) {
    Balloon(
        balloonContent = {
            Column {
                if (title?.isNotEmpty() == true) {
                    Text(
                        modifier = Modifier.wrapContentWidth(),
                        text = title,
                        textAlign = textAlignment,
                        style = BaseTypography.body1.copy(fontWeight = FontWeight.Bold),
                        color = BasePalette.onSurface
                    )
                    Spacer(modifier = Modifier.height(4.dp))
                }
                if (description?.isNotEmpty() == true) {
                    Text(
                        modifier = Modifier.wrapContentWidth(),
                        text = description,
                        textAlign = textAlignment,
                        style = BaseTypography.subtitle1,
                        color = BasePalette.onSurface
                    )
                }
            }
        },
        builder = rememberBalloonBuilder {
            setWidth(BalloonSizeSpec.WRAP)
            setHeight(BalloonSizeSpec.WRAP)

            setArrowSize(10)
            setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
            setArrowPosition(0.5f)

            setMarginLeft(16)
            setMarginRight(16)

            setPadding(12)
            setCornerRadius(16f)
            setBackgroundColor(BasePalette.surface)
            setBalloonAnimation(BalloonAnimation.ELASTIC)

            setIsVisibleOverlay(true)
            setOverlayColor(BasePalette.background.copy(0.8f))
            setOverlayPadding(16f)

            setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)
            setOverlayShape(
                if (isCircle) {
                    BalloonOverlayCircle(100f)
                } else {
                    BalloonOverlayRoundRect(16f, 16f)
                }
            )
            setDismissWhenClicked(true)

            // This is because the balloon was cut during animation
            if (tooltipAlignment == BalloonAlign.TOP) {
                setMarginTop(16)
            } else if (tooltipAlignment == BalloonAlign.BOTTOM) {
                setMarginBottom(16)
            }
        }
    ) { balloonWindow ->
        selectedElement.invoke()

        if (showTooltip && (title?.isNotEmpty() == true || description?.isNotEmpty() == true)) {
            balloonWindow.setOnBalloonDismissListener {
                onTooltipDismiss?.invoke()
            }

            when (tooltipAlignment) {
                BalloonAlign.START -> balloonWindow.showAlignLeft()
                BalloonAlign.END -> balloonWindow.showAlignRight()
                BalloonAlign.TOP -> balloonWindow.showAlignTop()
                BalloonAlign.BOTTOM -> balloonWindow.showAlignBottom()
            }
        }
    }
}