Bug setWidth(BalloonSizeSpec.WRAP) v 1.4.5 #331

gonzalomonzon02 · 2022-05-04T20:00:14Z

Library Version 1.4.5
Affected Device(s) All devices

I have a custom view that I use with balloon, the width WRAP not working correctly. I am displaying the view in a item from tabLayout.
I tried using the container linearLayout, relativeLayout and constraintLayout but I can't get it to fit the content. The width of the textView are dynamic.
The only way for the width to change is by setting it to a fixed value

tabLayout.getTabAt(TAB_NOTIFICATIONS_POSITION)?.view?.let {
val nUnreadLikes = 100L
val nUnreadComments = 1232L
val nUnreadFollowers = 12000L
Balloon.Builder(it.context)
.setLayout(R.layout.popup_window_notifications)
.setArrowOrientation(ArrowOrientation.TOP)
.setArrowPosition(0.5f)
.setHeight(BalloonSizeSpec.WRAP)
.setWidth(BalloonSizeSpec.WRAP)
.setCornerRadius(4f)
.setArrowColorMatchBalloon(true)
.setBackgroundDrawable(ContextCompat.getDrawable(it.context, R.drawable.bg_popup_window_notification))
.setBalloonAnimation(BalloonAnimation.FADE)
.setLifecycleOwner(lifecycleOwner)
.setAutoDismissDuration(4000)
.setOnBalloonInitializedListener { view ->
val tvLikes = view.findViewById(R.id.tvLikes)
val tvComments = view.findViewById(R.id.tvComments)
val tvFollowers = view.findViewById(R.id.tvFollowers)
nUnreadLikes.let {
tvLikes?.text = it.abbreviateNumber()
}
nUnreadComments.let {
tvComments?.text = it.abbreviateNumber()
}
nUnreadFollowers.let {
tvFollowers?.text = it.abbreviateNumber()
}
}.build().showAlignTop(it)

XML resource

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/tvLikes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding="4dp"
    android:textColor="@color/White"
    android:fontFamily="@font/lato_medium"
    android:textSize="13sp"
    android:maxLines="1"
    android:paddingEnd="16dp"
    android:paddingStart="0dp"
    android:layout_alignParentStart="true"
    app:drawableStartCompat="@drawable/ic_heart_notifications"
    tools:text="100" />

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/tvComments"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding="4dp"
    android:textColor="@color/White"
    android:fontFamily="@font/lato_medium"
    android:textSize="13sp"
    android:maxLines="1"
    android:layout_toEndOf="@+id/tvLikes"
    app:drawableStartCompat="@drawable/ic_comments_notifications"
    android:paddingEnd="16dp"
    android:paddingStart="0dp"
    tools:text="1.232" />

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/tvFollowers"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding="4dp"
    android:textColor="@color/White"
    android:fontFamily="@font/lato_medium"
    android:textSize="13sp"
    android:layout_toEndOf="@+id/tvComments"
    android:maxLines="1"
    app:drawableStartCompat="@drawable/ic_profile_notifications"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/tvComments"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="12K" />

Parent container
RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"

Current

Expected

Please help me!
thank you!

The text was updated successfully, but these errors were encountered:

skydoves · 2022-05-04T22:55:52Z

Hi, when you use a TextView, which includes the compound drawable in your custom layout, you should use VectorTextView instead as below:

<com.skydoves.balloon.vectortext.VectorTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableStart="@drawable/ic_edit"
    ...
 />

AlbertoSaezVela · 2022-05-05T10:04:34Z

Same here. I tried with VectorTextView but doesn't work. Height and Width have the same behavior.
Any idea?

skydoves · 2022-05-05T10:07:47Z

Hey, the best idea is just to split them up with the ImageView and TextView to let the Android SDK measure the exact size of the TextView. I guess measuring the width size of the TextView, which includes compound drawable is not handled by Android SDK.

AlbertoSaezVela · 2022-05-05T10:22:24Z

Hey, the best idea is just to split them up with the ImageView and TextView to let the Android SDK measure the exact size of the TextView. I guess measuring the width size of the TextView, which includes compound drawable is not handled by Android SDK.

Is exactly how I have the xml view. The problem is in the height or width of the parent layout. WrapContent does not work. You must set an exact dimension and it works.

skydoves · 2022-05-05T10:27:32Z

I see. Setting a android:maxWidth="130dp" for each TextView is another solution.
Also, I recommend setting the exact width/height dimension for your ImageView.

AlbertoSaezVela · 2022-05-05T10:53:36Z

Set dynamic height is required to reuse the code for custom layout configuration.

skydoves · 2022-05-05T11:21:39Z

But I'm not sure what makes the wrong behaves.
I just built with the demo project and as you can see from the result below, it works fine for me:

Factory:

class TagBalloonFactory : Balloon.Factory() {

  override fun create(context: Context, lifecycle: LifecycleOwner?): Balloon {
    return createBalloon(context) {
      setWidth(BalloonSizeSpec.WRAP)
      setHeight(BalloonSizeSpec.WRAP)
      setLayout(R.layout.layout_custom_tag)
      setArrowSize(10)
      setArrowOrientation(ArrowOrientation.BOTTOM)
      setArrowPosition(0.5f)
      setPadding(4)
      setCornerRadius(4f)
      setBalloonAnimationStyle(BalloonR.style.Balloon_Fade_Anim)
      setBackgroundColorResource(R.color.white_93)
      setBalloonRotationAnimation(BalloonRotateAnimation.Builder().build())
      setDismissWhenClicked(true)
      setDismissWhenShowAgain(true)
      setLifecycleOwner(lifecycle)
    }
  }
}

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="4dp">

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

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

  <androidx.appcompat.widget.AppCompatImageView
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:layout_marginStart="22dp"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1234"
    android:layout_marginEnd="22dp"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

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

</LinearLayout>

AlbertoSaezVela · 2022-05-05T11:26:53Z

But I'm not sure what makes the wrong behaves. I just built with the demo project and as you can see from the result below, it works fine for me:

Factory:

class TagBalloonFactory : Balloon.Factory() {

  override fun create(context: Context, lifecycle: LifecycleOwner?): Balloon {
    return createBalloon(context) {
      setWidth(BalloonSizeSpec.WRAP)
      setHeight(BalloonSizeSpec.WRAP)
      setLayout(R.layout.layout_custom_tag)
      setArrowSize(10)
      setArrowOrientation(ArrowOrientation.BOTTOM)
      setArrowPosition(0.5f)
      setPadding(4)
      setCornerRadius(4f)
      setBalloonAnimationStyle(BalloonR.style.Balloon_Fade_Anim)
      setBackgroundColorResource(R.color.white_93)
      setBalloonRotationAnimation(BalloonRotateAnimation.Builder().build())
      setDismissWhenClicked(true)
      setDismissWhenShowAgain(true)
      setLifecycleOwner(lifecycle)
    }
  }
}

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="4dp">

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

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

  <androidx.appcompat.widget.AppCompatImageView
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:layout_marginStart="22dp"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1234"
    android:layout_marginEnd="22dp"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark" />

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

</LinearLayout>

Could you try it with a ConstraintLayout instead a Linear, please?

skydoves · 2022-05-05T11:35:24Z

Measuring is not related to the parent layout. And as you can see, it's the same result as the below:

XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="4dp">

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1234"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/circleImageView2"
    app:layout_constraintStart_toEndOf="@id/circleImageView"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView2"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_marginStart="22dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView2"
    app:layout_constraintStart_toEndOf="@id/textView"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="22dp"
    android:text="1234"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/circleImageView3"
    app:layout_constraintStart_toEndOf="@id/circleImageView2"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView3"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView3"
    app:layout_constraintStart_toEndOf="@id/textView2"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="123456"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/circleImageView3"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>

AlbertoSaezVela · 2022-05-05T11:57:11Z

Measuring is not related to the parent layout. And as you can see, it's the same result as the below:

XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="4dp">

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1234"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/circleImageView2"
    app:layout_constraintStart_toEndOf="@id/circleImageView"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView2"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_marginStart="22dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView2"
    app:layout_constraintStart_toEndOf="@id/textView"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="22dp"
    android:text="1234"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/circleImageView3"
    app:layout_constraintStart_toEndOf="@id/circleImageView2"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

  <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/circleImageView3"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_assignment"
    android:tint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/textView3"
    app:layout_constraintStart_toEndOf="@id/textView2"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="123456"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/circleImageView3"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>

Thank you. I could make it work with a LinearLayout but I couldn't with a ConstraintLayout.

gonzalomonzon02 · 2022-05-05T13:31:11Z

Thank you very much to all!!
There it worked for me as expected !!
The changes i made were:

Leave the parent container as constraintLayout but as the width in match_parent.
Separate the icon from the textview and add it in an imageView.
Set the dynamic text from the Balloon variable and not in the setOnBalloonInitializedListener listener.

gonzalomonzon02 closed this as completed May 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug setWidth(BalloonSizeSpec.WRAP) v 1.4.5 #331

Bug setWidth(BalloonSizeSpec.WRAP) v 1.4.5 #331

gonzalomonzon02 commented May 4, 2022 •

edited

skydoves commented May 4, 2022

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022 •

edited

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022 •

edited

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022

gonzalomonzon02 commented May 5, 2022

Bug setWidth(BalloonSizeSpec.WRAP) v 1.4.5 #331

Bug setWidth(BalloonSizeSpec.WRAP) v 1.4.5 #331

Comments

gonzalomonzon02 commented May 4, 2022 • edited

skydoves commented May 4, 2022

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022 • edited

AlbertoSaezVela commented May 5, 2022

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022 • edited

skydoves commented May 5, 2022

AlbertoSaezVela commented May 5, 2022

gonzalomonzon02 commented May 5, 2022

gonzalomonzon02 commented May 4, 2022 •

edited

skydoves commented May 5, 2022 •

edited

AlbertoSaezVela commented May 5, 2022 •

edited