How to place TextField Composable under the TodoList Composable(Android, Jetpack Compose)

Question

I'm developing using Jetpack Composable to place TextField Composable under TooList Composable.
The principle of operation is that when i click Floating Button, i can see expandMenu, there are six buttons in the expandMenu, and when you click one of them, FloatingButton and expandMenu disappear, and TextField is shown.
The operating principles are performed correctly, but there is a problem in terms of UI. When I click the FloatingActionbutton, I see expandMenu, and there are six buttons in expandMenu, and when I click one of them, the floating action button and expandMenu disappear and TextField appears, but it is hidden by the screens of TodoList and AVD.
How can i fix it?

Screen Code

fun CalendarScreen(routeAction: RouteAction) {

    var isVisibility by remember { mutableStateOf(false) }

    var multiFloatingState by remember {
        mutableStateOf(FloatingStateType.Collapsed)
    }

    val colorFAB = if (multiFloatingState == FloatingStateType.Expanded) {
        Color(0xff9E9E9E)
    } else {
        Color(0xffFFDAB9)
    }

    var todoList = remember {
        mutableStateListOf<RToDoResponse>()
    }

    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current

    LaunchedEffect(isVisibility) {
        if (isVisibility) {
            focusRequester.requestFocus()
        }
    }

    val onButtonClick: (String) -> Unit = { id ->
        when (id) {
            "1" -> {
                isVisibility = !isVisibility
                color = "1"
                Log.d("id", "id : ${id}")
            }
            "2" -> {
                isVisibility = !isVisibility
                color = "2"
                Log.d("id", "id : ${id}")
            }
            "3" -> {
                isVisibility = !isVisibility
                color = "3"
                Log.d("id", "id : ${id}")
            }
            "4" -> {
                isVisibility = !isVisibility
                color = "4"
                Log.d("id", "id : ${id}")
            }
            "5" -> {
                isVisibility = !isVisibility
                color = "5"
                Log.d("id", "id : ${id}")
            }
            "6" -> {
                isVisibility = !isVisibility
                color = "6"
                Log.d("id", "id : ${id}")
            }
        }
    }

    Scaffold() {
        Column(modifier = Modifier
            .fillMaxSize()
            .background(Color(0xfff0f0f0))
            .imePadding()) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 21.dp, end = 21.dp, top = 30.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically) {
                Text(text = day.toString(),
                    fontSize = 26.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(end = 5.dp))

                Divider(modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 5.dp),
                    color = Color(0xffD8D8D8))
            }

            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(top = 15.dp, start = 21.dp, end = 21.dp),
                contentAlignment = Alignment.TopCenter
            ) {
                Column() {

                    TodoItemList(Todo = todoList)

                    if (isVisibility) {
                        TextField(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                                .focusRequester(focusRequester),
                            value = title,
                            colors = TextFieldDefaults.textFieldColors(
                                containerColor = Color(0xffD8D8D8),
                                disabledLabelColor = Color(0xffD8D8D8),
                                focusedIndicatorColor = Color.Transparent,
                                unfocusedIndicatorColor = Color.Transparent
                            ),
                            singleLine = true,
                            shape = RoundedCornerShape(8.dp),
                            onValueChange = {
                                title = it
                            },
                            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text,
                                imeAction = ImeAction.Done),
                            keyboardActions = KeyboardActions(onDone = {
                                createTodo(token, year, month, day, title, color)
                                keyboardController?.hide()
                                title = ""
                                isVisibility = !isVisibility
                            })
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun AddTodoFloatingButton(
    multiFloatingState: FloatingStateType,
    onMultiFloatingStateChange: (FloatingStateType) -> Unit,
    backgroundColor: Color,
    onButtonClick: (String) -> Unit,
) {
    val transition = updateTransition(targetState = multiFloatingState, label = null)
    val rotate by transition.animateFloat(label = "rotate") {
        if (it == FloatingStateType.Expanded) {
            315f
        } else {
            0f
        }
    }
    Column(
        horizontalAlignment = Alignment.End
    ) {
        if (transition.currentState == FloatingStateType.Expanded) {
            FloatingActionButtonMenus(
                onMultiFloatingStateChange,
                onButtonClick
            )
        }

        Spacer(modifier = Modifier.padding(vertical = 10.dp))

        FloatingActionButton(
            containerColor = backgroundColor,
            shape = CircleShape,
            onClick = {
                onMultiFloatingStateChange(
                    if (transition.currentState == FloatingStateType.Expanded) {
                        FloatingStateType.Collapsed
                    } else {
                        FloatingStateType.Expanded
                    })
            }) {
            Icon(
                imageVector = Icons.Filled.Add,
                contentDescription = "todolist 추가",
                modifier = Modifier.rotate(rotate),
            )
        }
    }
}

@Composable
fun FloatingActionButtonMenus(
    onMultiFloatingStateChange: (FloatingStateType) -> Unit,
    onButtonClick: (String) -> Unit,
) {
    Surface(
        modifier = Modifier
            .width(150.dp)
            .height(110.dp)
            .shadow(shape = RoundedCornerShape(20.dp), elevation = 15.dp)
            .background(Color.White)
    ) {
        Column(modifier = Modifier
            .fillMaxSize()
            .wrapContentSize()) {
            Row(modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceEvenly) {
                Button(modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffFFB4B4)),
                    onClick = {
                        onButtonClick("1")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }) {
                }
                Button(modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffFFDCA8)),
                    onClick = {
                        onButtonClick("2")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }) {
                }
                Button(modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffB1E0CF)),
                    onClick = {
                        onButtonClick("3")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }) {
                }
            }

            Spacer(modifier = Modifier.padding(vertical = 7.dp))

            Row(modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceEvenly) {
                Button(modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffB7D7F5)),
                    onClick = {
                        onButtonClick("4")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }) {
                }
                Button(modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffFFB8EB)),
                    onClick = {
                        onButtonClick("5")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }) {
                }
                Button(
                    modifier = Modifier.size(width = 25.dp, height = 25.dp),
                    colors = ButtonDefaults.buttonColors(Color(0xffB6B1EC)),
                    onClick = {
                        onButtonClick("6")
                        onMultiFloatingStateChange(FloatingStateType.Collapsed)
                    }
                ) {
                }
            }
        }
    }
}

TodoList Code

@ExperimentalMaterial3Api
@ExperimentalMaterialApi
@Composable
fun TodoItem(Todo: RToDoResponse) {

    var checked by remember { mutableStateOf(false) }

    var todoList = remember {
        mutableStateListOf<RToDoResponse>()
    }


    Card(
        colors = CardDefaults.cardColors(Color.White),
        shape = RoundedCornerShape(8.dp),
        modifier = Modifier
            .width(350.dp)
            .height(50.dp)) {
        Row(
            modifier = Modifier
                .padding(start = 13.dp, top = 15.dp, bottom = 15.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {

            Checkbox(
                checked = checked,
                onCheckedChange = {
                    checked = it
                }
            )
            Text(
                text = Todo.title,
                fontSize = 13.sp,
                fontStyle = FontStyle.Normal
            )
        }
    }
    
    Spacer(modifier = Modifier.height(6.dp))
}

@ExperimentalMaterialApi
@ExperimentalMaterial3Api
@Composable
fun TodoItemList(Todo: List<RToDoResponse>) {

    LazyColumn {

        itemsIndexed(items = Todo) { index, item ->
            TodoItem(Todo = item)
        }
    }
}

Image

Answer 1

you should consider TodoItemList's parent which is a column, and change its modifier using :

Column(modifier = Modifier.fillMaxHeight())

furthermore you can also add this :

Column(modifier = Modifier.fillMaxHeight().padding(20.dp))

I think your work shouldn't be the best UX choice for this affair, for example you can try using dialog!

Answer 2

You need to either make the parent layout (that contains calender, todo list and textview composables) scrollable so that the textview can be shown below the list or assign weights/percentage heights to these composables in the parent layout. By parent layout I mean the Column or ConstraintLayout that was used to wrap these items probably in a screen level composable.