Hello guys. I have small issue creating layout i w...

# compose

[Jasmin Fajkic]

Hello guys. I have small issue creating layout i want. I have Scaffold. Inside Scaffold I have Top bar., bottom bar, floating button. Main content is Lazy column that contains different items including text input. I am trying to make when I type in text field that my lazy column moves and keep current text focus above bottom bar and floating button. Sample code and video are in 🧵

[Jasmin Fajkic]

@Composable
fun CreatePostContent() {
    val post = remember {
        mutableStateOf("")
    }
    Scaffold(
        modifier = Modifier
            .background(Style.colors.content)
            .navigationBarsPadding(),
        topBar = {
            Row(modifier = Modifier
                .height(80.dp)
                .fillMaxWidth()
                .background(Color.Yellow)) {
                Text(text = "Hello")
            }
        },
        bottomBar = {
            Row(modifier = Modifier
                .imePadding()
                .height(60.dp)
                .fillMaxWidth()
                .background(Color.Green)) {
                Text("bootom")
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /*TODO*/ }){
                Text("Hello")
            }
        })
    {
        LazyColumn(modifier = Modifier.padding(it)) {
            item {
                TextField(
                    modifier = Modifier
                        .fillMaxWidth(),
                    value = post.value,
                    onValueChange = { text -> post.value = text },
                    placeholder = { Text("Enter something") },
                    colors = TextFieldDefaults.textFieldColors(
                        containerColor = Color.Gray,
                        disabledIndicatorColor = Color.Gray,
                        unfocusedIndicatorColor = Color.Gray,
                        focusedIndicatorColor = Color.Gray,
                        placeholderColor = Color.Blue,
                        textColor = Color.Blue,
                    )
                )
            }
        }
    }
}

[Jasmin Fajkic]

SVID_20221025_192641_1.mp4

[Jasmin Fajkic]

this is what i am trying to make.

[Jasmin Fajkic]

And this is how my example looks like. If somebody have just idea is this possible to achieve with my current setup?

Screen Recording 2022-10-25 at 21.55.19.mov

[Colton Idle]

@Zach Klippenstein (he/him) [MOD] do you know if the stuff you're working on fixes this or is this something out of scope of those tickets?

[Jasmin Fajkic]

Best so far what I achieved is that I measure height of text field and start moving lazy column.

val height = remember {
    mutableStateOf(0)
}
val scope = rememberCoroutineScope()
val state = rememberLazyListState()

LaunchedEffect(key1 = height.value) {
    state.animateScrollBy(100f)
}

val kbVisible = WindowInsets.isImeVisible

LaunchedEffect(key1 = kbVisible) {
    if(!kbVisible) {
        height.value = 0
    }
}

  TextField(
                    modifier = Modifier
                        .fillMaxWidth()
                        .onGloballyPositioned {
                            scope.launch {
                             height.value =   it.size.height
                            }
                        },
                    value = post.value,
                    onValueChange = { text -> post.value = text },
                    placeholder = { Text("Enter something") },
                    colors = TextFieldDefaults.textFieldColors(
                        containerColor = Color.Gray,
                        disabledIndicatorColor = Color.Gray,
                        unfocusedIndicatorColor = Color.Gray,
                        focusedIndicatorColor = Color.Gray,
                        placeholderColor = Color.Blue,
                        textColor = Color.Blue,
                    )
                )