Question 256383 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Jetpack Composable – make the Image change after it has been clicked on

Currently, I am working on a simple app in Android Studio from the course that is available online for Kotlin. The general idea is to make an image in the center clickable and change the image whenever a certain number of clicks is met.
On the 1st image, I have to click once.
On the 2nd image I have to click from 2 to 4 times and it is random.
On the 3rd image, I have to click once.
The same goes for the 4th image to restart the whole process.

I was able to place all elements on the screen and the image is clickable. I can see that the currentPosition variable is incrementing, yet there is no change in the image that is being used in the app. I do realize this might be some newbie question, yet I am at the beginning of my path with Kotlin and Android Studio.

Can anyone please assist me on this case? I will be much obliged. The whole code placed below:

package com.example.lemonade

import android.os.Bundle
import android.text.style.BackgroundColorSpan
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.AbsoluteCutCornerShape
import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.lemonade.ui.theme.LemonadeTheme

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LemonadeTheme {
                LemonadeWithTextAndImage()
            }
        }
    }
}

@Preview
@Composable
fun LemonadeApp() {
    LemonadeWithTextAndImage()
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LemonadeWithTextAndImage(
    modifier: Modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .background(color = Color.White)
) {
    var currentPosition = 1
    var numberOfClicks = (2..4).random()
    var beforeLast = 1 + numberOfClicks + 1
    var imageSource = when (currentPosition) {
        1 -> R.drawable.lemon_tree
        numberOfClicks -> R.drawable.lemon_squeeze
        beforeLast -> R.drawable.lemon_drink
        else -> R.drawable.lemon_restart
    }
    var totalNumberOfClicks = beforeLast++;

    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CenterAlignedTopAppBar(
            title = {
                Text("Lemonade")
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Yellow,
                titleContentColor = Color.Black
            )
        )
        Spacer(modifier = Modifier.height(200.dp))
        Image(
            painter = painterResource(id = imageSource),
            contentDescription = imageSource.toString(),
            Modifier
                .clickable {
                    println("The current position is $currentPosition")
                    currentPosition++
                    painterResource(id = currentPosition)
                }
                .background(
                    color = Color(R.color.icons_background),
                    shape = AbsoluteRoundedCornerShape(10)
                )
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = stringResource(id = R.string.tap_the_lemon_tree))

    }
}
Tags:

2

Answers


  1. 0

    This is a Practice Jetpack Codelab:Click behavior

    Your answer can be found at:
    https://developer.android.com/codelabs/basic-android-kotlin-compose-button-click-practice-problem#1

    Login or Signup to reply.
  2. 0

    you dont use observables, to make your vars observable and mutable, you should use the mutableStateOf(), try the following:

    @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LemonadeWithTextAndImage(
    modifier: Modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .background(color = Color.White)
) {
    var currentPosition by remember { mutableStateOf(1) }
    var numberOfClicks by remember { mutableStateOf((2..4).random()) }
    var beforeLast by remember { mutableStateOf(1 + numberOfClicks + 1) }

    val imageSource = when (currentPosition.value) {
        1 -> R.drawable.lemon_tree
        numberOfClicks.value -> R.drawable.lemon_squeeze
        beforeLast.value -> R.drawable.lemon_drink
        else -> R.drawable.lemon_restart
    }
    
    // ... rest of your code ...

    Image(
        painter = painterResource(id = imageSource),
        contentDescription = imageSource.toString(),
        Modifier
            .clickable {
                println("The current position is ${currentPosition.value}")
                currentPosition.value++
            }
            .background(
                color = Color(R.color.icons_background),
                shape = AbsoluteRoundedCornerShape(10)
            )
    )

    // ... rest of your code ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search