https://kotlinlang.org logo
#compose
Title
# compose
g

Geert

09/18/2020, 8:47 AM
I was trying to make this example from youtube, but I have 2 problems. The first one is that state is deprecated, but I cant make remember work with these 2 values. The second thing is that I cannot ripple anymore from Modifier Code:
Copy code
@Composable
fun ModifiedShape(){
    // TODO: Replace by remember?
     val (shape, setShape) = state<Shape> { CircleShape }

    // TODO: Fix error
    //       Destructuring declaration initializer of type Shape must have a 'component1()' function
    //       Destructuring declaration initializer of type Shape must have a 'component2()' function
    // val (shape, setShape) = remember<Shape> { CircleShape }
    Image(
        asset = imageResource(id = R.drawable.ic_launcher_background),
        modifier = Modifier
            .size(256.dp)
            .padding(16.dp)
            .drawShadow(8.dp, shape)
            .border(6.dp, MaterialTheme.colors.primary, shape)
            .border(12.dp, MaterialTheme.colors.secondary, shape)
            .border(18.dp, MaterialTheme.colors.background, shape)
            // TODO: Add ripple?
            //.ripple(color = MaterialTheme.colors.surface)
            .clickable {
                setShape(
                    if (shape == CircleShape) {
                        CutCornerShape(topLeft = 32.dp, bottomRight = 32.dp)
                    } else {
                        CircleShape
                    }
                )
            }

    )

}
y

Yann Badoual

09/18/2020, 8:50 AM
Replace
= state
with =
= remember { mutableStateOf(CircleShape) }
The
clickable
modifier should apply a ripple by default I believe. It can be changed with the
interaction
parameter of
clickable
modifier. As for the color, I'm not sure what color it's using by default. But you can create your own instance of
RippleIndication
and pass the color you want if needed. You can check the default value in
DefaultRippleTheme.
By default it seems to be either white or
contentColor()
depending on current theme (light or dark) and contentColor's lumiance
g

Geert

09/18/2020, 9:07 AM
I tried to edit remember, but getting these two errors.
There is something wrong with the Shape type I guess
b

Brett Best

09/18/2020, 9:07 AM
@Geert try two expressions
Might also need to instantiate the CircleShape
mutableStateOf(CircleShape())
g

Geert

09/18/2020, 9:11 AM
Instantiate is not working. Also setshape is not working anymore
b

Brett Best

09/18/2020, 9:11 AM
Do you have this on GitHub?
g

Geert

09/18/2020, 9:13 AM
No. I just created a new project and this is the only code
This is the video, but thery are using an old version if Compose i guess

https://youtu.be/U5BwfqBpiWU?t=609

This line is actually working:
Copy code
val (shape, setShape) = remember { mutableStateOf(CircleShape) }
But the CutCornerShape and CircleShape are both inheriting the Shape interface.
But the problem with the shape interface is that is doesnt have the destructering declaration
And I cannot use mutableState of Shape since its an interface
y

Yann Badoual

09/18/2020, 9:20 AM
Copy code
val (shape, setShape) = remember { mutableStateOf<Shape>(CutCornerShape()) }
this should work. the type parameter should be specified on
mutableStateOf
, and the argument should be the default value
so you need to pass an actual instance, and not a type (Shape)
g

Geert

09/18/2020, 9:25 AM
Yes thank you! I see that remember must be MutableState. So that was why I couldn’t specify Shape. I did it in the wrong place.
And CutCornershape has to be instantiated, but with more parameters, but using CircleShipe only it also works!
Where CircleShape is instantiated already:
Copy code
val CircleShape = RoundedCornerShape(50)
👍 1
y

Yann Badoual

09/18/2020, 9:33 AM
Btw, you can also use the following form:
var shape by remember { mutableStateOf(CirlceShape) }
and instead of calling
setShape
, you can use
shape
as a mutable variable. If you do, just make sure to add the following import
Copy code
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
Or you'll get an error (known intellij bug)
3 Views