Vertical scroll affecting the modifier weight in jetpack compose

Question

I want my button to be bottom of the screen using Column. When I am trying to smaller device my content is not scrollable. So I search in stack overflow and found this answer. When I am adding

.verticalScroll(rememberScrollState())

in my modifier it breaks the spacer weight stuff and placed my button to top.

Input

@Composable

fun Input() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(10.dp)
    ) {
        Item()
    }
}

Item

@Composable
fun Item {
    Image()
    Text() // more item here
    Pressure()
}

Pressure

@Composable
fun Pressure() {
      var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
         mutableStateOf(TextFieldValue())
      }
    Column {
        Text(value)
        Image()
        // more item here
        Spacer(modifier = Modifier.weight(1f))
        OnSubmit(value)
    }
}

Actual Output

Expected Output

I want my button to be bottom with vertical scroll in smaller device.

UPDATE

After @SemicolonSpace I tried code and my button is behind from the screen

fun Input() {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.SpaceBetween
        ){
          Column(
              modifier = Modifier
                  .verticalScroll(rememberScrollState())
                  .padding(10.dp)
          ) {
              Item()
          }
          // behind from screen
          OnSubmit()
       }
    }

You can see my button is behind the screen, I cannot scroll

score 2 · Accepted Answer · answered Aug 08 '22 at 15:19

I don't know where exactly you face the issue. I made a sample with similar structure as in the images and looks like it works fine if i'm not missing anything.

@Composable
private fun MyComposable() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(10.dp)
    ) {
        var text by remember { mutableStateOf("") }
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")
        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier=Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text("Left")
            TextField(value = text, onValueChange = { text = it })
            Text("Right")

        }

        Spacer(modifier = Modifier.weight(1f))
        Button(modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color(0xff4DD0E1),
                contentColor = Color.White
            )
            , onClick = { /*TODO*/ }) {
            Text("Submit", modifier = Modifier.padding(vertical = 20.dp))
        }
    }

}

I don't know but your way is working fine... I just copy paste your code. — Kotlin Learner, Aug 08 '22 at 15:53
can you help me on this [issue](https://stackoverflow.com/q/73402144/11560810) — Kotlin Learner, Aug 18 '22 at 11:46

SemicolonSpace · Answer 2 · 2022-08-08T16:00:29.000

Final Working Code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BlogPostsTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MyUI()
                }
            }
        }
    }
}

@Composable
fun MyUI() {
    val longText = """
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    """.trimIndent()

    
    Box(
        modifier = Modifier.fillMaxHeight()
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .padding(10.dp)
        ) {
            // your UI here
            Text(
                text = longText,
                fontSize = 20.sp
            )
        }

        // your button here
        Button(
            modifier = Modifier.align(alignment = Alignment.BottomCenter),
            onClick = { }
        ) {
            Text(text = "Button")
        }
    }
}

I updated my code as well. Can you please guide me on this. You put my `Button` from `Pressure` composable to parent `Column`. So please guide me my new changes to get value — Kotlin Learner, Aug 08 '22 at 12:14
note: `value` is just one property for example. I have so many property. which are passing value to my Submit function. — Kotlin Learner, Aug 08 '22 at 12:15
why not hoisting the `value` to its parent composable, all the way to `Item()` ? — SemicolonSpace, Aug 08 '22 at 12:36
Remove the `fillMaxSize()` of the child `Column`. I updated the code. — SemicolonSpace, Aug 08 '22 at 14:09
Please see my `UPDATE` section. I added image as well. @SemicolonSpace — Kotlin Learner, Aug 08 '22 at 14:18
I messed up terribly. The parent layout should be `Box`. Put the scrollable `Column` and `Button` inside a `Box` and put the `Button` at the bottom. See the updated code. I tested it. It's working fine. If the buttton overlaps, add a bottom padding to the scrollabe `Column`. — SemicolonSpace, Aug 08 '22 at 15:59

Vertical scroll affecting the modifier weight in jetpack compose

2 Answers2

Linked