Kenny Wyland
Kenny Wyland

Reputation: 21880

Jetpack Compose Images as Buttons wildly change size when clicked

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:

three screenshots, showing the state of the main menu, with the buttons normal, normal, then tiny

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

Answers (0)

Related Questions