CODEWITHSUNDEEP
androidandroid-jetpack-compose
Android_programmer_office
Android_programmer_office

Reputation: 3748

JetpackCompose Android - Rotate Image by an angle when clicked on it


I have scenario where I want to rotate image by an angle when clicked on it in Jetpack Compose. Please find my code below of what I tried till now: 

@Composable
fun RotateImage() {  
    Image(
        painter = painterResource(id = R.drawable.ic_expand_more),
        modifier = Modifier
                   .padding(end=5.dp)
                   .clickable { Modifier.rotate(angle) },
                    contentDescription = "Expandable Image"
    )
}

Please help me regarding this:

Upvotes: 5

Views: 3115

Answers (1)

Thracian
Thracian

Reputation: 66929

You need to change angle inside Modifier.clickable instead of putting Modifier.rotate inside it.

@Composable
private fun RotateImage() {
    var angle by remember {
        mutableStateOf(0f)
    }

    Image(
        modifier = Modifier
            .rotate(angle)
            .clickable {
               // Change this angle as required, i set it to rotate by 90 degrees
                angle = (angle + 90) % 360f
            },
        painter = painterResource(id = R.drawable.landscape1),
        contentDescription = null
    )
}

Also, side note order of rotate and clickable determines whether clickable region also rotated. If you set rotate after clickable only content is rotated.

@Composable
private fun RotateImage2() {
    var angle by remember {
        mutableStateOf(0f)
    }

    Image(
        modifier = Modifier
            .clickable {
                angle = (angle + 90) % 360f
            }
            .rotate(angle),
        painter = painterResource(id = R.drawable.landscape1),
        contentDescription = null
    )
}

will have different outcome from the first one

Upvotes: 9

Related Questions