title: Jetpack Compose set sibling Composables' width to longest one dynamically with SubcomposeLayout
body: <p>How can i set width of a group of composables, siblings layout from top to bottom, to width of longest one?</p>
  <p><img src="https://i.stack.imgur.com/hOKXG.png" width="300">
  <img src="https://i.stack.imgur.com/8mzVx.png" width="300"></p>
  <p>What i try to build is exactly same thing as in the images above. For simplicity let's say <strong>quote</strong> the component at the top and <strong>message box</strong> which contains message and another container that stores date and message status.</p>
  <p>The longest one of quote and message box must be set as parent width and other one must be set to same width as longest one which requires  a remeasuring for short one i assume.</p>
  <p>Also if <code>message box</code> gets to resized there needs to be an internal parameter that passes this width to set position of container that stores date and status. As can be seen clearly with bounds message text is moved to start while status to end when <strong>quote</strong> is longer than <strong>message box</strong>. When message has more than one line <strong>message box</strong> width and height are set with a calculation as telegram or whatsapp does.</p>
  <p>Built this initially with <code>Layout</code> as</p>
  <pre><code>@Composable
  private fun DynamicLayout(
      modifier: Modifier = Modifier,
      quote: @Composable () -&gt; Unit,
      message: @Composable () -&gt; Unit
  ) {
  
      val content = @Composable {
          quote()
          message()
      }
  
      Layout(content = content, modifier = modifier) { measurables, constraints -&gt;
  
  
          val placeableQuote = measurables.first().measure(constraints)
          val quoteWidth = placeableQuote.width
  
          val placeableMessage =
              measurables.last()
                  .measure(Constraints(minWidth = quoteWidth, maxWidth = constraints.maxWidth))
          val messageWidth = placeableMessage.width
  
          val maxWidth = quoteWidth.coerceAtLeast(messageWidth)
          val totalHeight = placeableQuote.height + placeableMessage.height
  
          layout(maxWidth, totalHeight) {
              placeableQuote.placeRelative(x = 0, y = 0)
              placeableMessage.placeRelative(x = 0, y = placeableQuote.height)
          }
      }
  }
  </code></pre>
  <p>Where i measure <strong>message box</strong>  using width of <strong>quote</strong> constraint it works but only when quote is longer.</p>
  <pre><code>DynamicLayout(
      quote = {
          Text(
              &quot;QUOTE with a very long text&quot;,
              modifier = Modifier
                  .background(Color(0xffF44336))
                  .height(60.dp),
              color = Color.White
          )
      },
      message = {
          Text(
              &quot;MESSAGE Content&quot;,
              modifier = Modifier
                  .background(Color(0xff9C27B0)),
              color = Color.White
          )
      }
  )
  
  DynamicLayout(
      quote = {
          Text(
              &quot;QUOTE&quot;,
              modifier = Modifier
                  .background(Color(0xffF44336))
                  .height(60.dp),
              color = Color.White
          )
      },
      message = {
          Text(
              &quot;MESSAGE with very long Content&quot;,
              modifier = Modifier
                  .background(Color(0xff9C27B0)),
              color = Color.White
          )
      }
  )
  </code></pre>
  <p><img src="https://i.stack.imgur.com/168De.png" width="300"></p>
  <p>As it's must be remeasured i think solution for this question should be done with <code>SubComposeLayout</code> but couldn't figure out how to use it for this setup?</p>
  <pre><code>@Composable
  private fun SubComponentLayout(
      modifier: Modifier = Modifier,
      mainContent: @Composable () -&gt; Unit,
      dependentContent: @Composable (Int) -&gt; Unit
  ) {
  
      SubcomposeLayout(modifier = modifier) { constraints -&gt;
  
          val mainMeasurables: List&lt;Measurable&gt; = subcompose(SlotsEnum.Main, mainContent)
  
          val mainPlaceables: List&lt;Placeable&gt; = mainMeasurables.map {
              it.measure(constraints)
          }
  
          val maxSize =
              mainPlaceables.fold(IntSize.Zero) { currentMax: IntSize, placeable: Placeable -&gt;
                  IntSize(
                      width = maxOf(currentMax.width, placeable.width),
                      height = maxOf(currentMax.height, placeable.height)
                  )
              }
  
          var maxWidth =
              mainPlaceables.maxOf { it.width }
  
  
          layout(maxSize.width, maxSize.height) {
  
              println(&quot; SubcomposeLayout-&gt; layout() maxSize width: ${maxSize.width}, height: ${maxSize.height}&quot;)
  
              val dependentMeasurables: List&lt;Measurable&gt; = subcompose(
                  slotId = SlotsEnum.Dependent,
                  content = {
                      println(&quot; SubcomposeLayout-&gt; layout()-&gt;subcompose() mainWidth ZERO&quot;)
                      dependentContent(0)
                  }
              )
  
              val dependentPlaceables: List&lt;Placeable&gt; = dependentMeasurables.map {
                  it.measure(constraints)
              }
  
              maxWidth = maxWidth.coerceAtLeast(
                  dependentPlaceables.maxOf { it.width }
              )
  
              subcompose(SlotsEnum.NEW) {
                  println(&quot; SubcomposeLayout-&gt; layout()-&gt;subcompose() maxWidth: $maxWidth&quot;)
                  dependentContent(maxWidth)
              }
  
              mainPlaceables.forEach { it.placeRelative(0, 0) }
              dependentPlaceables.forEach { it.placeRelative(0, 150) }
          }
      }
  }
  </code></pre>
  <p>Why cannot remeasure same component second time with same id? When i try to call <code>subCompose</code> with SlotsEnum.Dependent it throws an exception</p>
  <pre><code>subcompose(SlotsEnum.NEW) {
      println(&quot; SubcomposeLayout-&gt; layout()-&gt;subcompose() maxWidth: $maxWidth&quot;)
      dependentContent(maxWidth)
  }
  </code></pre>
  <p>Still not remeasuring correctly after calling it? How can setting sibling can be solved with <code>SubcomposeLayout</code>?</p>