1

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

Kotlin Learner
  • 3,995
  • 6
  • 47
  • 127

1 Answers1

3

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.

Mohamed Rejeb
  • 2,281
  • 1
  • 7
  • 16
  • 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 – Kotlin Learner Nov 24 '22 at 07:09
  • 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` – Mohamed Rejeb Nov 24 '22 at 07:17