https://kotlinlang.org logo
#compose
Title
# compose
t

Travis Griggs

03/14/2023, 6:27 PM
I'm trying to prototype this diagnostics dump screen in compose. The text is longer than can be shown. So I make it scrollable using Modifier, but then it decides to make the outline as big as the text and scroll the whole thing. You can see the box is "cut off" at the bottom. I'd rather have the box all visible, but the text scroll inside of the box. What is the proper way to configure a sized box of text with vertical scroll? (code tried in thread)
Copy code
Column {
   var scrollState = rememberScrollState()
   OutlinedTextField(
      value = Globals.diagnosticsExample,
      onValueChange = { _ -> },
      modifier = Modifier
         .fillMaxWidth()
         .verticalScroll(scrollState)
         .weight(1f),
      readOnly = true,
      textStyle = TextStyle(fontSize = 10.sp)
   )
   Button(
      onClick = {},
      modifier = Modifier
         .fillMaxWidth()
         .padding(vertical = 16.dp),
      colors = ButtonDefaults.buttonColors(containerColor = AccentBlue)
   ) {
      Text(text = "Share")
   }
}
e

ephemient

03/14/2023, 6:41 PM
doesn't it just work out of the box if you don't put
Modifier.verticalScroll()
on it?
t

Travis Griggs

03/14/2023, 6:43 PM
Now I feel like an idiot kinda.
File this one under the "trying too hard" I guess.
e

ephemient

03/14/2023, 6:46 PM
if you do want anything more complex (such as controlling where it's scrolled to), the current Compose APIs don't really let you do that. but as long as this works for you, it works :)
t

Travis Griggs

03/14/2023, 6:48 PM
Here's a more complicated question about that screenshot... Is there a way to get the IconButton at the top to right align itself by the actual drawn icon? Instead of the padded box it puts the icon in?
e

ephemient

03/14/2023, 6:55 PM
IconButton set its minimum size to 48x48dp, which is the recommended minimum touch target size. perhaps your icon is smaller than that?
t

Travis Griggs

03/14/2023, 6:57 PM
I'm just using:
Copy code
Box(modifier = Modifier.fillMaxWidth()) {
   IconButton(onClick = dismissClick, modifier = Modifier.align(Alignment.CenterStart)) {
      Icon(
         Icons.Default.ArrowBack,
         contentDescription = "Exit Diagnostics",
         tint = AccentBlue
      )
   }
And I get that it forces the 48x48 touchable target size. And that's fine and appreciated even. What I want though, is the left edge of the arrow to visually line up with the left edges of the outlined text box and the button at the bottom
6 Views