title: Jetpack Compose: Row & Column Listitem Layout + RoundedCorners + Padding
body: <p>I'm new to Jetpack Compose so apologies if this is really simple but I've played with this for quite a while, and have tried to do searches on it and looked up tutorials I've taken, but haven't found a solution. My Row/Column is closest, but when I try to add internal padding to it the rounded corners disappear.</p>
  <p>This layout is for a listitem that is contained in a <code>LazyColumn</code> (see &quot;goal&quot; image).</p>
  <p><a href="https://i.stack.imgur.com/YzTtF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YzTtF.png" alt="example" /></a></p>
  <p>There's simply two <code>Text</code> lines, both left/start justified and one on top of the other, and another piece of <code>Text</code> right/end justified and centered. <em>But I also want the listitem to have rounded corners and the inside to have some padding.</em></p>
  <p>I've tried to get this to work using <code>Row</code>/<code>Column</code>, where the layout looks good but the rounded corners do not work if I put internal padding on it so the text doesn't touch the edge of the listitem.</p>
  <p>I've tried this with just <code>Box</code> and aligning each text piece, but the two text lines overlap each other, and the rounded corners don't work at all it seems.</p>
  <p>Please ignore background color difference between the pic and my code (and the fact that the Box image has only two listitems); I've had to adjust my code to make this simpler to post here, but the important things are here. I'd much appreciate any help. I am finding I like Compose more than the old XML layouts.</p>
  <p><strong>Parent Composable</strong>:</p>
  <pre><code>LazyColumn(
              modifier = Modifier
                  .fillMaxSize()
                  .padding(top = 8.dp)
          ) {
              items(
                  items = listOf(&quot;Test&quot;, &quot;Test&quot;, &quot;Test&quot;)
              ) { 
                  MyItem(
                      modifier = Modifier
                          .clickable {
                              navController.navigate(
                                  route = &quot;my route stuff goes here, you can leave this clickable off, doesn't matter&quot;
                              )
                          }
                          .fillMaxWidth()
                  )
              }
          }
  </code></pre>
  <p><strong>Row/Column layout</strong>:</p>
  <pre><code>@Composable
  fun MyItem(
      modifier: Modifier = Modifier
  ) {
      Box(
          modifier = modifier
              // spacing BETWEEN listitems (external padding, or margin)
              .padding(
                  top = 8.dp,
                  end = 16.dp,
                  bottom = 8.dp,
                  start = 16.dp
              )
              .clip(RoundedCornerShape(size = MaterialTheme.spacing.defaultRoundedCorner)) // 10.dp
      ) {
          Row(
  
          ) {
              Column(
                  modifier = Modifier
                      .fillMaxWidth()
                      .background(color = Color.LightGray)
              ) {
                  Text(
                      text = &quot;My Thing Name&quot;,
                      style = MaterialTheme.typography.h5
                  )
  
                  Text(
                      // this just randomly puts the note string in there to make sure
                      // the display looks good with or without; this isn't in my version
                      text = if (Random.nextInt(0, 9) &gt; 4) &quot;My notes string goes here lol&quot; else &quot;&quot;,
                      style = MaterialTheme.typography.subtitle1
                  )
              }
          }
  
          Row(
              modifier = Modifier
                  .padding(end = MaterialTheme.spacing.medium) // 16.dp
                  .align(Alignment.CenterEnd)
          ) {
              Text(
                  text = &quot;10,000&quot;
              )
          }
      }
  }
  </code></pre>
  <p><strong>Box layout</strong>:</p>
  <pre><code>@Composable
  fun MyItem(
      modifier: Modifier = Modifier
  ) {
      Box(
          modifier = modifier
              // spacing BETWEEN listitems (external padding, or margin)
              .padding(
                  top = 8.dp,
                  end = 16.dp,
                  bottom = 8.dp,
                  start = 16.dp
              )
              .fillMaxWidth()
              .background(Color.DarkGray)
              .clip(RoundedCornerShape(size = MaterialTheme.spacing.defaultRoundedCorner)) // 10.dp
      ) {
          Text(
              text = &quot;My Thing Name&quot;,
              style = MaterialTheme.typography.h5,
              modifier = Modifier.align(Alignment.TopStart)
          )
  
          Text(
              // this just randomly puts the note string in there to make sure
              // the display looks good with or without; this isn't in my version
              text = if (Random.nextInt(0, 9) &gt; 4) &quot;My notes string goes here lol&quot; else &quot;&quot;,
              style = MaterialTheme.typography.subtitle1,
              modifier = Modifier.align(Alignment.BottomStart)
          )
  
          Text(
              text = &quot;10,000&quot;,
              modifier = Modifier.align(Alignment.CenterEnd),
              style = MaterialTheme.typography.h6
          )
      }
  }
  </code></pre>