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

Sterling Albury

05/18/2022, 7:52 PM
working on a composable and would like some feedback. doing a TopAppBar with this content:
Copy code
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?
s

ste

05/18/2022, 7:55 PM
you could use a
Spacer
with the same size of the item at the right
s

Sterling Albury

05/18/2022, 7:58 PM
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?
s

ste

05/18/2022, 8:01 PM
Probably yes, I think that's the only way to avoid ugly "adjusting" visual effects. Otherwise,
ConstraintLayout
is the way
s

Sterling Albury

05/18/2022, 8:06 PM
ok, word. thanks for the input!
c

Chris Sinco [G]

05/18/2022, 9:59 PM
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
o

Oleksandr Balan

05/18/2022, 10:00 PM
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.
s

Sterling Albury

05/18/2022, 10:06 PM
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?
hm, yeah Layout looks a bit better
o

Oleksandr Balan

05/18/2022, 10:22 PM
Almost, but
BoxWithConstraints
uses
SubcomposeLayout
which is more powerful, but less efficient than
Layout
2 Views