Change alignment of child in column in jetpack compose

Question

I want to change the horizontalAlignment of particular child and remaining will use the same horizontalAlignment. Is this possible in Column?

For example, Column parent modifier use horizontalAlignment = Alignment.CenterHorizontally, and I want particular child modifier will be different horizontalAlignment.

 Column( modifier = Modifier .padding(16.dp) .fillMaxSize() .verticalScroll(rememberScrollState()), horizontalAlignment = Alignment.CenterHorizontally, ) { ScreenImage() Description() if (viewModel.isBluetoothEnabled) { ScanDeviceList(scanDeviceList) } else { Warning() Spacer(modifier = Modifier.weight(1f)) TryAgainButtonView { tryAgainAction() } ButtonView { openSettingAction() } } }

I want to change ScanDeviceList() to be different horizontalAlignment

@Composable fun ColumnScope.ScanDeviceList(scanDeviceList: List<ScanResult>) { Spacer(modifier = Modifier.height(20.dp)) AnimatedVisibility(scanDeviceList.isNotEmpty()) { Text( text = stringResource(R.string.vailable_device), ) } }

Many Thanks

Mohamed Rejeb · Accepted Answer · 2022-11-24 06:40:08Z

You can use Modifier.align(Alignment.Start) to align a particular child. So for example to make your ScanDeviceList() at the Start of the column the code will be like this:

@Composable fun ColumnScope.ScanDeviceList(scanDeviceList: List<ScanResult>) { Spacer(modifier = Modifier.height(20.dp)) AnimatedVisibility( scanDeviceList.isNotEmpty(), modifier = Modifier.align(Alignment.Start) ) { Text( text = stringResource(R.string.vailable_device), ) } }

You can also pass the modifier as an argument to ScanDeviceList composable function to make it more generic to the code will be like this:

@Composable fun ColumnScope.ScanDeviceList( scanDeviceList: List<ScanResult>, modifier: Modifier = Modifier ) { Spacer(modifier = Modifier.height(20.dp)) AnimatedVisibility( scanDeviceList.isNotEmpty(), modifier = modifier ) { Text( text = stringResource(R.string.vailable_device), ) } }

And when you call it you can specify the alignment that you want:

ScanDeviceList(scanDeviceList, modifier = Modifier.align(Alignment.Start))

Note: adding the modifier an argument to your composable functions is considered as a best practice because it will make the function reusable like the example above you can call ScanDeviceList with Alignment.Start or Alignment.End without changing the function itself, just by passing a different modifier as a parameter.

Another question, Suppose inside ScanDeviceList() have 2 text and I want to change 1st one is Alignment.Start and another one is Alignment.Start. So how can I use that one in that case? I am asking this you use modifier in AnimatedVisibility. Thanks
If the two texts are inside AnimatedVisibility, passing the modifier to AnimatedVisibility is enough, but if one or the two of them are direct child for the column pass the modifier to both of them, Modifier.align(Alignment.Start)) needs to be applied to a direct child of the column, that's why I passed it to AnimatedVisibility in the example above not to Text because AnimatedVisibility is the direct child of the Column

Collectives™ on Stack Overflow

Change alignment of child in column in jetpack compose

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related