Strange behaviour with horizontalArrangement using JetPack Compose - android-jetpack-compose

Question

I don't understand why my switches are not aligned, why it is expanding outside the screenview ? of course I didn't succeed so far to find a proper solution to align my switches with jetpack compose.
the kotlin code :
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Switch
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
class ToolsActivityK2 : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
ToolContent_()
}
}
}
}
#Preview
#Composable
fun Preview_ToolContent_() {
ToolContent_()
}
#Composable
fun SettingsSwitch_(
subtitle: String
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
subtitle,
Modifier.padding(end = 16.dp)
)
Switch(checked = false, onCheckedChange = null)
}
}
#Composable
fun ToolContent_() {
Column {
SettingsSwitch_("launch something 1")
SettingsSwitch_("launch launch launch launch again and again and again something 2")
SettingsSwitch_("launch something 3")
}
}
if I replace the switches by images, it's worse the image for line 2 does not show on screen ! I for sure miss something but I cannot figure what
Configuration infos:
Android Studio Bumblebee | 2021.1.1
classpath 'com.android.tools.build:gradle:7.1.0'
ext.kotlin_version = '1.6.10'
kotlinCompilerExtensionVersion '1.1.0-rc02'
androidx.compose.ui:ui:1.0.5

Answer 1

Use weight to achieve something like this,
Complete code
#Composable
fun SettingsSwitch_(
subtitle: String
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Text(
subtitle,
Modifier.padding(end = 16.dp).weight(1f)
)
Switch(checked = false, onCheckedChange = null)
}
}
Reason
I have applied background color to all the components in your code to show how they are placed.
#Composable
fun SettingsSwitch_(
subtitle: String
) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(Red)
.padding(start = 16.dp, end = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Text(
subtitle,
Modifier.background(Cyan).padding(end = 16.dp)// .weight(1f)
)
Switch(checked = false, onCheckedChange = null, modifier = Modifier.background(Green))
}
}
And this code gives the following layout.
So, you can see that the Text has occupied the full space available in the Row. Hence the Switch appears in the wrong position.
More info
If we look into the docs for Arrangement.SpaceBetween we can see,
Place children such that they are spaced evenly across the main axis,
without free space before the first child or after the last child.
Visually: 1##2##3 for LTR or 3##2##1 for RTL.
All the Arrangement options only affect the extra free space between the children. Since the is no extra free space in the second Row the Arrangement does not have any effect there.