Width of the balloon with a custom layout not adjusted properly when setting text dynamically

[wkubaty]

Please complete the following information:

• Library Version 1.3.1+
• Affected Device(s) All devices, in particular, Pixel 3a API 28

Describe the Bug:
We are using Balloon.Factory() with a custom layout resource that includes several textViews. After setting text values dynamically, the width of the balloon is not resized to wrap its content (it is fixed with the initial value). As a result, the height of the content increases. The solution provided in #91 cannot be used anymore, since method measureTextWidth is private now.
The issue can be easily reproduced using the demo application:

Step 1 - Add id to the TextView in the layout_custom_tag.xml:

  <TextView
    android:id="@+id/tagTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="12"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    tools:ignore="HardcodedText" />

Step 2 - change the text of that tagTextView to a different value, i.e.:

customTagBalloon.getContentView().findViewById<TextView>(R.id.tagTextView).text = "Long text"

Step 3 - launch the application and click on the bottomNavBar. As a result, the height of the balloon increased, instead of the width. However, it works properly on version 1.3.0 of the library. Modified demo app to reproduce the issue is also available at: https://github.com/wkubaty/Balloon/tree/custom-layout-size-issue

Unexpected behavior on version 1.3.4:

Expected Behavior:
The width of the balloon with a custom layout should be adjusted properly when setting content dynamically.

Proper behavior on version 1.3.0:

[skydoves]

That is the expected result because the width size of the balloon will be decided on initializing the balloon.
So the width size of the Balloon was measured with the text 12 on the XML.
By the way, is the any needs to change the width size of the Balloon dynamically like the above example?

[wkubaty]

Thanks for the answer. So we have a real case where we need to set the text dynamically, which is not known during the balloon's initialization process (it is done much earlier than displaying the content). So is there any known solution for recalculating the width of the balloon, after modifying its content?

[salokristian]

We're also facing this issue. Would it be possible to enable recalculating the width of the balloon? For example, by making the traverseAndMeasureTextWidth function public?

[skydoves]

I will consider processing the changes internally. 🤔
Here is just the quick solution:

val label = customTagBalloon.getContentView().findViewById<TextView>(R.id.label)
label.text = "111111111111111111111344555"
val width = label.paint.measureText(label.text.toString())
label.maxWidth = width.toInt()

[kaustav07]

I am also facing this issue, I have 3,4 textviews inside custom layout and the contents I get from backend API, and there is also a relay of 4,5 of this type of pop up for coach mark purpose, but the pop does not correctly meausre height and width of the inflated layout.

[skydoves]

Hi, @kaustav07.
That makes sense. Thank you for sharing your experience.
Does the below solution work well?

I will consider processing the changes internally. 🤔
Here is just the quick solution:

val label = customTagBalloon.getContentView().findViewById<TextView>(R.id.label)
label.text = "111111111111111111111344555"
val width = label.paint.measureText(label.text.toString())
label.maxWidth = width.toInt()

[kaustav07]

Hi @skydoves ,

thanks for replying so quickly

it still doesn't calculate the height properly...

uploading layout file as well.
bottom_nav_coach_mark_layout.txt

below is my code -

val popupLayoutBinding = BottomNavCoachMarkLayoutBinding.inflate(LayoutInflater.from(this)).apply {
                title.applyText("We have moved all the options at the bottom")
                countIndicator.text = "1 of 2"
                nextCTA.text = "Next"
            }

            val baloon = createBalloon(this) {
                setLayout(popupLayoutBinding.root)
                setArrowSize(10)
                setArrowOrientation(ArrowOrientation.BOTTOM)
                setArrowPosition(0.5f)
                setWidthRatio(1f)
                setMarginHorizontal(20)
                setCornerRadius(4f)
                setBackgroundColor(ContextCompat.getColor(this@HomeV2Activity, R.color.black))
                setBalloonAnimation(BalloonAnimation.CIRCULAR)
                setLifecycleOwner(this@HomeV2Activity)
            }

            val bindingV2 = BottomNavCoachMarkLayoutBinding.bind(baloon.getContentView().findViewById(R.id.popupRoot))
            bindingV2.apply {
                title.maxWidth = title.paint.measureText(title.text.toString()).toInt()
                title.maxHeight = title.paint.measureText(title.text.toString()).toInt()
            }


            binding.textView.setOnClickListener {
                baloon.show(navView)
            }

            binding.textView2.setOnClickListener {
                bindingV2.title.text = "sdfsdfsdfjshdfbhjsdbfsdbnfkbnskfnbsdkjfn"
                bindingV2.apply {
                    title.maxWidth = title.paint.measureText(title.text.toString()).toInt()
                    title.maxHeight = 90.toPx()
                }
                baloon.show(navView)
            }

Now when I use title.maxHeight = title.paint.measureText(title.text.toString()).toInt() it get like this -

And when I use a fixed maxheight using title.maxHeight = title.paint.measureText(title.text.toString()).toInt() it gets like this -

[kaustav07]

@skydoves

I found out that if I use constraintLayout it doesn't calculate the view height properly even when initializing the balloon but with linearlayout it works fine.

[gastsail]

I found out that if you are using ConstrainLayout and have any view that has 0dp for the constrain, the lib will not adapt for what you see in the editor, instead, use match_parent or wrap_content for those views, or simply use LinearLayout

[skydoves]

Thanks to everyone! The above information was very helpful for troubleshooting.
And released a new version 1.3.6-SNAPSHOT!
The snapshot includes that measuring text size automatically before showing.
Please test using this new version and let me know. 😄

[skydoves]

Released a new stable 1.3.6!

[viettranhoang]

@skydoves, please help me, when I upgraded to version 1.3.6, I still faced with this issue, many thanks.

[TaoSunkist]

me too , but release-1.2.9 the version is okay.

[bulbigood]

@skydoves Faced this issue with ConstraintLayout and 0dp, version 1.4.1. Wrap constraint doesn't work correctly.