skydoves / Balloon

:balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html
Apache License 2.0
3.75k stars 291 forks source link

setArrowDrawable not show as expected arrow. #461

Open popeyee27 opened 1 year ago

popeyee27 commented 1 year ago

Please complete the following information:

Describe the Bug: I try to custom tooltip arrow with .setArrowDrawable(ContextCompat.getDrawable(context, {drawable)) in my custom layout.

The drawable with size 16x8

Screenshot 2566-06-14 at 15 09 18

However the arrow not show as expected. With setArrowDrawable(), It look like I only little round my arrow.

with setArrowDrawable

Screenshot 2566-06-14 at 15 21 57

default

Screenshot 2566-06-14 at 15 22 49

Expected Behavior: I has expected the arrow to like this no matter size of the balloon.

Screenshot 2566-06-14 at 15 17 27

Should I fixed my arrow vector or set another thing? I already set setArrowPositionRules(ALIGN_ANCHOR), setArrowPosition(0.5f),setArrowOrientation(ArrowOrientation.TOP) and setArrowSize(12) before .setArrowDrawable()

skydoves commented 1 year ago

The arrow must be decided by the size of your arrow. Would you able to increase the arrow size with setArrowSize(12) method?

popeyee27 commented 1 year ago

yes, no matter I call setArrowSize() before or after .setArrowDrawable(). I able to increase a size of arrow but it look like not my drawable arrow.

.setArrowDrawable(ContextCompat.getDrawable(context, {drawable}))
.setArrowSize(8)
Screenshot 2566-06-14 at 17 20 49
.setArrowSize(8)
.setArrowDrawable(ContextCompat.getDrawable(context,  {drawable}))
Screenshot 2566-06-14 at 17 22 30

only .setArrowDrawable(ContextCompat.getDrawable(context, {drawable}))

Screenshot 2566-06-14 at 17 23 38
.setArrowSize(20)
.setArrowDrawable(ContextCompat.getDrawable(context,  {drawable}))
Screenshot 2566-06-14 at 17 24 24
alexanderfilipzik commented 1 year ago

ping, i think it's because the library will render it as a square, we have the same issue here.

As far as i know this is all related:

skydoves commented 1 year ago

They guys thanks for raising this issue. I will take a look at this, but I believe it will take some time to resolve this issue since the squared-arrow size already has been used overall project. In the meantime, you can adjust your arrow image file as square or include some transparent padding on your image file itself following your preferences.

kikin81 commented 11 months ago

I'm having the same issue. My design calls for an arrow with 28.dp width and 12.dp height. We tried doing the drawable trick of adding more padding top but this results on the Balloon popover being too far away from the target as you can see in this screenshot.

Hope we can have custom width and height!

Another possible solution is to be able to set negative padding between the arrow and the target to account for this empty space in the drawable. I tried setting setArrowAlignAnchorPadding or setArrowTopPadding with negative values but it just crashes.

Current behavior Expected
nubbin outline CleanShot 2023-12-13 at 15 54 20

SVG I am using:

popover_nub (2)

codercoderme commented 10 months ago

Facing the same issue. while I'm trying to add a border (include arrow)