whats a good way to make both the circular progres...

# compose

[Jan]

whats a good way to make both the circular progress bar and the checkbox to appear the same size and have the same padding?:

if(task.loading) {
    CircularProgressIndicator()
} else {
    Checkbox(checked = done, onCheckedChange = { onUpdate(!done, task.task, task.dueDate) })
}

[Stylianos Gakis]

So if the checkbox is taking a lot bigger space, do you want the progress to also be as big as that even when it does not show?

[Stylianos Gakis]

Box(Alignment.Center) {
  CircularProgressIndicator(Modifier.alpha(if (showProgress) 1f else 0f)).matchParentSize())
  Checkbox(Modifier.alpha(if (!showProgress) 1f else 0f)).matchParentSize())
}

This is a way for this to always take the same size, no matter which one of the two is showing, and no matter which one of the two is bigger than the other.

[Jan]

okay but now it looks weird, the CheckBox is in the text. This is the full code:

Row(Modifier.padding(8.dp), verticalAlignment = Alignment.CenterVertically) {
    val done = task.doneDate != null
    val localDate = remember(task) { task.dueDate.toLocalDateTime(TimeZone.currentSystemDefault()) }
    var showEditDialog by remember { mutableStateOf(false) }
  /*  if(task.loading) {
        CircularProgressIndicator()
    } else {
        Checkbox(checked = done, onCheckedChange = { onUpdate(!done, task.task, task.dueDate) })
    }*/
    Box(contentAlignment = Alignment.Center) {
        CircularProgressIndicator(Modifier.alpha(if (task.loading) 1f else 0f).matchParentSize())
        Checkbox(checked = done, modifier = Modifier.alpha(if (!task.loading) 1f else 0f).matchParentSize(), onCheckedChange = { onUpdate(!done, task.task, task.dueDate) })
    }
    Spacer(Modifier.width(8.dp))
    Column {
        Text(task.task)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            Text(
                text = task.dueDate.localizedDateString,
                fontSize = 10.sp
            )
        }
    }
    Spacer(Modifier.weight(1f))
    if(done) {
        IconButton(onClick = onDelete) {
            Icon(rememberDelete(), null)
        }
    } else {
        IconButton(onClick = { showEditDialog = true }) {
            Icon(EditIcon, null)
        }
    }
    if(showEditDialog) {
        TaskCreateDialog(task = task, onDismiss = { showEditDialog = false }, onCreate = { task, dueDate ->
            onUpdate(done, task, dueDate)
            showEditDialog = false
        })
    }
}

[Jan]

image.png