skydoves / Balloon

:balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.

Home Page:https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Balloon tooltip is not showing a shadow for the bottom arrow.

Digipom opened this issue · comments

  • Library Version: 1.0.5
  • Affected Device(s): All

Code to reproduce:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BalloonBugTheme {
                Scaffold(
                    bottomBar = {
                        BottomAppBar(actions = {
                            val backgroundColor = MaterialTheme.colorScheme.primaryContainer
                            val builder = rememberBalloonBuilder {
                                setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
                                setPadding(16)
                                setCornerRadius(12f)
                                setBackgroundColor(backgroundColor)
                                setDismissWhenTouchOutside(false)
                            }
                            Balloon(
                                builder = builder,
                                balloonContent = {
                                    Text(
                                        color = MaterialTheme.colorScheme.onPrimaryContainer,
                                        text = "Hello, world!"
                                    )
                                }
                            ) { balloonWindow ->
                                IconButton(
                                    onClick = { }) {
                                    Icon(
                                        imageVector = Icons.Default.MoreVert,
                                        contentDescription = null
                                    )
                                }
                                LaunchedEffect(Unit) {
                                    balloonWindow.showAlignTop()
                                }
                            }
                        })
                    }
                ) {
                    Greeting(modifier = Modifier.padding(it), name = "Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

Screenshot attached.
image

You should use setArrowElevation inside of the builder.

Also, the elevation will be only applied when the arrow is towards the bottom.
Because the arrow is placed on the body of the balloon, elevation will invade the body, and that will look weird.

Hmm, I tried that and ran into #159 and #156. Is that the reason why the default for the bubble elevation and arrow elevation are not the same?