nuhkoca
04/01/2022, 8:12 PMTopBar
using a Box
as I needed Scroll-To-Fade animation but icon click is not working as efficient as TopBar
. In Compose’s TopBar
, touch target area is working well for navigation and action items as long as you touch within the boundaries of the blue square. Therefore, IconButton
successfully delegates click action to Icon
component but in my custom TopBar
, click behavior is not working as in Compose’s TopBar
. if I only touch within the boundaries of the red square, I am seeing ripple. How do I fix that? Thank you.@Composable
private fun BoxScope.FadingToolbar(
scrollState: ScrollState,
onBackPressed: () -> Unit,
onSharePressed: () -> Unit
) {
val isPageTitleScrolled = scrollState.value >= TitleOffsetInPx
val topBarElevation = if (scrollState.value >= HeroOffsetInPx) AppBarDefaults.TopAppBarElevation else 0.dp
val elevation by animateDpAsState(targetValue = topBarElevation)
val tint = animateColorAsState(
targetValue = if (isPageTitleScrolled) {
TRTheme.colors.appForeground3
} else {
TRTheme.colors.nonDynamicWhite
}
)
Box(
modifier = Modifier
.shadow(elevation)
.alpha(max(0.0f, scrollState.value / TitleOffsetInPx))
.fillMaxWidth()
.background(TRTheme.colors.appBackground1Elevated)
.align(Alignment.TopCenter)
.height(AppBarHeight)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = TRTheme.spacing.medium)
.height(AppBarHeight),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(TRTheme.spacing.double)
) {
TRIconButton(onClick = onBackPressed) {
TRIcon(iconResId = TRTheme.icons.arrowBackS, tint = tint.value)
}
Box(modifier = Modifier.weight(1f)) {
FadingTitle(visible = isPageTitleScrolled)
}
TRIconButton(onClick = onSharePressed) {
TRIcon(iconResId = TRTheme.icons.shareS, tint = tint.value)
}
}
}
pointerInput(Unit) {}
for the parent Row seems to have done the trick.
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = TRTheme.spacing.medium)
.height(AppBarHeight)
.pointerInput(Unit) {},
...
)