Hello All,

# compose

[Deepak Gahlot]

Hello All,

[Deepak Gahlot]

Below is the jetpack compose code for an Item in LazyColumn

[Deepak Gahlot]

Row(
    modifier = Modifier
        .padding(start = dimensionResource(id = R.dimen.dp_36))
        .padding(top = dimensionResource(id = R.dimen.dp_12))
        .padding(bottom = dimensionResource(id = R.dimen.dp_12)),
    verticalAlignment = <http://Alignment.Top|Alignment.Top>
) {
    Checkbox(
        modifier = Modifier.weight(1f),
        checked = checkedStateForCustom.value,
        onCheckedChange = {
            checkedStateForCustom.value = it
            when(dataType) {
                MasterDataType.CommodityType -> {
                    questionnaireViewModel.onCommodityCheckBoxClicked(item)
                }
                MasterDataType.RegionType -> {
                    questionnaireViewModel.onRegionCheckBoxClicked(item)
                }
                MasterDataType.DepartmentType -> {
                    questionnaireViewModel.onDepartmentCheckBoxClicked(item)
                }
            }
        },
        colors = CheckboxDefaults.colors(
            checkedColor = colorResource(id = R.color.blue1),
            uncheckedColor = colorResource(id = R.color.gray1)
        ),
    )
    Column(
        modifier = Modifier
            .padding(start = dimensionResource(id = R.dimen.dp_8))
            .weight(15f)
    ) {
        Text(
            text = if (dataType == MasterDataType.CommodityType) { item.name!! } else { item.value!! },
            color = colorResource(id = R.color.black),
            style = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Bold,
                lineHeight = 21.sp
            ),
            fontFamily = FontFamily(Font(R.font.roboto))
        )
        Text(
            text = stringResource(id = R.string.COMMODITY_ITEM_PREFIX).plus(item.key),
            color = colorResource(id = R.color.gray6),
            fontSize = 12.sp,
        )
    }
    if (childListMapCount.value > 0) {
        AnimatedVisibility(
            visible = ((questionnaireViewModel.mutableChildListItems.value != null)
                    && (questionnaireViewModel.mutableChildListItems.value.size > 0)
                    && (questionnaireViewModel.mutableChildListItems.value.containsKey(item.key))
                    && (questionnaireViewModel.mutableChildListItems.value[item.key]!!))
        ) {
            IconButton(
                modifier = Modifier
                    .weight(1f)
                    .padding(end = dimensionResource(id = R.dimen.dp_22)),
                onClick = {
                    when(dataType) {
                        MasterDataType.CommodityType -> {
                            questionnaireViewModel.setTopBarTitle(dataType, item.name!!)
                            questionnaireViewModel.setCommodityTopBarTitle(questionID, item.name)
                        }
                        MasterDataType.RegionType,MasterDataType.DepartmentType -> {
                            questionnaireViewModel.setTopBarTitle(dataType, item.value!!)
                            questionnaireViewModel.setCommodityTopBarTitle(questionID, item.value)
                        }
                    }
                    questionnaireViewModel.addToBackStackRouteList("Select commodity")
                    navHostController.navigate(QuestionnaireScreens.FirstChild.route + "/${item.key}")
                }
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ico_right_arrow),
                    contentDescription = "",
                    tint = colorResource(id = R.color.black)
                )
            }
        }
    }
}

[Deepak Gahlot]

Below is the result for the code above

[Deepak Gahlot]

As you can see that is icon button is at the center of the Row

[Deepak Gahlot]

I have tried verticalAlignment = Alignment.Top but for some reason that is not working.

[Deepak Gahlot]

And there is no top padding applied to the IconButton. Is there something i'm missing

[Zach Klippenstein (he/him) [MOD]]

I don’t think this will fix your problem, but any reason to not use ListItem for this? Looks like you’re trying to recreate that layout from scratch.

[Albert Chang]

I don't understand what you want. If you want the IconButton to be placed at the top, it is at the top already. You are adding the padding in your Row.

[Deepak Gahlot]

I want the icon to be placed at the same level as Checkbox and text

[Deepak Gahlot]

right now the icon is sitting in the middle of theRow and checkbox and text are sticking to the top of the Row

[Albert Chang]

That is because IconButton has a default size of 48dp for accessibility and the Icon is placed in the center of the 48dp square.

[Deepak Gahlot]

okay i got it.

[dewildte]

You would have more control if you did 1 row containing 3 colums

[dewildte]

The end Column that has your icon button could have center vertical alignment.