Practice problem: Click behavior

[GruFRe]

I dont understand the following:

In step 5 "Implement the App" you write there isnt a button in this app and we should read through the clickable dokumentation to make every composable clickable.
When i take a look at the solution code after trying to get it working for hours there is a button added...
I also can seond that i this codelab are a lot of new things wich were never refered to before....
btw i dont understand any word in your documentation...neither the weight one wich was refered before, not this one or any other one so this will not help me in any way.

So can anyone explain it to me?

here is how i implemented it till now...

package com.example.lemonadecompose

import android.os.Bundle
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.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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 androidx.compose.ui.unit.sp
import com.example.lemonadecompose.ui.theme.LemonadeComposeTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LemonadeComposeTheme {
LemonadeApp()
}
}
}
}

@composable
@Preview
fun LemonadeApp() {
MakeLemonade(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
)
}

@composable
fun MakeLemonade(modifier: Modifier = Modifier) {

var lemonState by remember { mutableStateOf(1) }
var toSqueeze by remember {mutableStateOf(0)}

var instructions = R.string.lemon_select
var imageResource = R.drawable.lemon_tree
var description = R.string.lemon_tree_description

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = stringResource(id = description),
            modifier = Modifier
                .padding(bottom = 16.dp)
                .height(280.dp)
                .width(280.dp)
                .clickable { when (lemonState) {
                        1 -> {
                            lemonState++
                            instructions = R.string.lemon_squeeze
                            imageResource = R.drawable.lemon_squeeze
                            description = R.string.lemon_description
                            toSqueeze = (2..4).random()
                        }

                        2 -> {
                            if (toSqueeze == 0) {
                                lemonState++
                                instructions = R.string.lemonade_drink
                                imageResource = R.drawable.lemon_drink
                                description = R.string.full_glass_description
                            } else {
                                toSqueeze--
                            }
                        }

                        3 -> {
                            lemonState++
                            instructions = R.string.start_again
                            imageResource = R.drawable.lemon_restart
                            description = R.string.empty_glass_description
                        }

                        else -> {
                            lemonState = 1
                            instructions = R.string.lemon_select
                            imageResource = R.drawable.lemon_tree
                            description = R.string.lemon_tree_description
                        }
                    }
                }
                .background(
                    shape = RoundedCornerShape(100.dp),
                    color = Color.Blue
                )
        )
        Text(
            text = stringResource(instructions),
            fontSize = 18.sp
        )
        //only works with this etra composable that prints the lemonState
        //doesnt work if i set the clickable modifier in the upper text composable
        Text(
            text = lemonState.toString(),
            modifier = Modifier.clickable { lemonState++ }
        )
    }
}

}

[VroomPsshh]

yea dude your concern is right and somewhat in the similar way i did it too

package com.vroom_psshh.lemonade.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.vroom_psshh.lemonade.R

@Preview(showBackground = true, showSystemUi = true)
@composable
fun LemonadePreview() {
Lemonade(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
)
}

@composable
fun Lemonade(modifier: Modifier = Modifier) {
data class ImageDetails(val drawableRes: Int, val description: String)

val context = LocalContext.current
var phase by remember { mutableIntStateOf(1) }
var clickCount = 0
val randomClickCount = (2..4).random()

val imageDetails = when (phase) {
    1 -> ImageDetails(R.drawable.lemon_tree, context.getString(R.string.Lemon_Tree))
    2 -> ImageDetails(R.drawable.lemon_squeeze, context.getString(R.string.Lemon))
    3 -> ImageDetails(R.drawable.lemon_drink, context.getString(R.string.Lemonade))
    else -> ImageDetails(R.drawable.lemon_restart, context.getString(R.string.Empty_Glass))
}



Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
)
{
    Image(
        painter = painterResource(id = imageDetails.drawableRes),
        contentDescription = null,
        modifier = Modifier
            .size(340.dp)
            .clip(RoundedCornerShape(26.dp))
            .background(color = Color(0xFFD2E7DA))
            .clickable(onClick = {
                clickCount++
                when (phase) {
                    1 -> phase++
                    2 -> {
                        if (clickCount == randomClickCount) {
                            clickCount = 0
                            phase++
                        }
                    }
                    3 -> phase++
                    4 -> phase = 1
                }
            })
    )
    Spacer(modifier = Modifier.height(16.dp))
    Text(
        text = imageDetails.description,
        fontSize = 21.sp,
        fontWeight = FontWeight.Bold
    )
}

}