UI Render issue in Calculate a custom tip: Android Basics with Compose

[prembhaskal]

URL of codelab https://developer.android.com/codelabs/basic-android-kotlin-compose-calculate-tip

In which task and step of the codelab can this issue be found? In Add Switch step

Describe the problem If we follow the code to create the switch, the Switch is not properly aligned in the Row, it gets aligned to the top of the row, whereas the Text is aligned in center. The issue can be fixed by using Modifier instead of modifier in the code

       Switch(
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.End),
           //...
       )

Steps to reproduce? Run the app on emulator by adding code from codelab.

Versions Android Studio version:

Android Studio Hedgehog | 2023.1.1 Patch 2 Build #AI-231.9392.1.2311.11330709, built on January 19, 2024 Runtime version: 17.0.7+0-17.0.7b1000.6-10550314 aarch64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. macOS 14.4.1

_API version of the emulator: Pixel_3a_API_34_extension_level_7_arm64-v8a

Additional information Below screenshows the problem in the preview screen where Switch is aligned to the top of the Row.

[NumesSanguis]

Can confirm. I encountered the same issue. Capitalizing Modifier solved the issue, as suggested by @prembhaskal

I don't understand why this issue appears though, because modifier: Modifier = Modifier in:

@Composable
fun RoundTheTipRow(
    roundUp: Boolean,
    onRoundUpChanged: (Boolean) -> Unit,
    modifier: Modifier = Modifier
) {

should set modifier to be the same as Modifier?