working on a composable and would like some feedba...

# compose

[Sterling Albury]

working on a composable and would like some feedback. doing a TopAppBar with this content:

Row(
                modifier = Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                leftHandContent(
                    Modifier
                        .wrapContentWidth()
                )

                Text(
                    modifier = Modifier
                        .wrapContentWidth()
                        .align(CenterVertically)
                        .weight(1F, fill = true),
                    text = appBarTitle,
                    color = topBarPrimaryColor,
                    fontWeight = FontWeight.Bold,
                    fontSize = 22.sp,
                    textAlign = TextAlign.Center
                )

                rightHandContent(
                    Modifier
                        .wrapContentWidth()
                )
            }

I would like the Text to be in the center of the bar but also be constrained by the left and right hand content. If one of the content items is missing, then I'd still like the text to be centered in the row. Considering a couple of options here. I briefly tried using a Box and using the align modifiers for the content items, but the text wasn't getting constrained like i wanted and got some overlap with the contents. trying to not use the constraint layout. Was looking at a custom layout and using some vertical baselines but not very familiar with using those objects. Any thoughts?

[ste]

you could use a Spacer with the same size of the item at the right

[Sterling Albury]

yeah that's another option i was considering..using a default spacer. i'm not specifying sizes for the left and right content though..you think I should set a standard size for those items?

[ste]

Probably yes, I think that's the only way to avoid ugly "adjusting" visual effects. Otherwise, ConstraintLayout is the way

[Sterling Albury]

ok, word. thanks for the input!

[Chris Sinco [G]]

I think it’s also fine to use if/else conditionals here. You can see this with how TopAppBar is implemented with consideration of the actions param

[Oleksandr Balan]

I would go with custom Layout. You can take m3 implementation of TopAppBarLayout as an inspiration:
https://androidx.tech/artifacts/compose.material3/material3/1.0.0-alpha01-source/androidx/compose/material3/AppBar.kt.html

See how it measures and places title when titleHorizontalArrangement is Arrangement.Center .

Basically you should measure your “left hand” and “right hand” first and then constraint the width for title accordingly.

[Sterling Albury]

ok yeah, I started looking using a BoxWithConstraints so I could do the measuring the side contents and adjust the title. I saw the custom layout..seems very similar to the BoxWithConstraints, right? looks like the way the composition happens is a bit different, is that right?

[Sterling Albury]

hm, yeah Layout looks a bit better

[Oleksandr Balan]

Almost, but BoxWithConstraints uses SubcomposeLayout which is more powerful, but less efficient than Layout