Reputation: 21880
I'm learning Jetpack Compose, so let me know if I'm just doing something really strangely and there is a better way to achieve my goal without causing myself this problem.
On my main menu, I've got my logo and two "buttons": New Sheet and Continue. I'm not using a true Button, because I want to strictly control the entire look of the Button with some vector drawables for the normal and pressed states. So, I'm using an Image with an onClick handler and a pointerInput modifier that adjusts which drawable is being shown.
The problem is that when I tap one of the buttons, they come WILDLY small and I have no idea why. I've confirmed that both the normal and pressed versions of the vector drawables are the same size (280x50 dp). Here's a few screenshots of what it looks like before, at the click, and after click:
Scaffold(modifier = Modifier.fillMaxSize()) { padding ->
Box(modifier = Modifier
.fillMaxSize()
.background( /* bg gradient */ )
.padding(padding)
) {
Column(
horizontalAlignment = CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxSize()
) {
Image( /* logo */ )
Spacer( /* height */ )
val buttonWidthFraction = 0.75f
ImageButton(
normal = R.drawable.button_new_sheet_normal,
pressed = R.drawable.button_new_sheet_active,
onClick = {
navController.navigate(Nav.newsheet)
},
modifier = Modifier
.shadow(
elevation = 100.dp,
ambientColor = Color.Black,
)
.width(logoImageWidth * buttonWidthFraction)
)
Spacer( /* height */ )
ImageButton( /* other other button, same config */ )
}
}
}
@Composable
fun ImageButton(
@DrawableRes normal: Int,
@DrawableRes pressed: Int,
modifier: Modifier = Modifier,
isdisabled: Boolean = false,
onClick: () -> Unit,
) {
var isPressed by remember { mutableStateOf(false) }
val coroutineScope = rememberCoroutineScope()
Image(
painter = painterResource(if (isPressed) pressed else normal),
contentScale = ContentScale.FillWidth,
modifier = modifier
.fillMaxWidth()
.alpha(if (isdisabled) 0.5f else 1f)
.pointerInput(Unit) {
detectTapGestures(
onPress = {
coroutineScope.launch {
isPressed = true
tryAwaitRelease() // Wait for the release of the button
isPressed = false
}
onClick()
}
)
}
)
}
When I click the button, the app navigates to my Game screen, but as you can see the buttons become incredibly tiny and I have no idea why.
Upvotes: 1
Views: 138