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

Billy Newman

02/24/2023, 9:38 PM
Hello all. I am moving over to compose material 3 and I am struggling to figure out why I cannot change the title and action colors in the TopAppBar. Code in reply
Copy code
TopAppBar(
   ...
   colors = TopAppBarDefaults.smallTopAppBarColors(
      containerColor = MaterialTheme.colorScheme.tertiary,
      actionIconContentColor = Color.White,
      titleContentColor = Color.White,
      navigationIconContentColor = Color.White
   )
)
However title text and icons are both black.
k

Kirill Grouchnikov

02/24/2023, 9:44 PM
How does your
title
composable child look like? Does it use its own text color? You can print
LocalContentColor.current
inside that child to verify that you’re indeed getting the white color, but the child itself would need to not override the color that is being set at the
TopAppBarLayout
level
b

Billy Newman

02/24/2023, 9:45 PM
Thanks, good thing to check. I do not override the color there:
Copy code
title = {
   Text(
      text = title,
      maxLines = 1,
      overflow = TextOverflow.Ellipsis,
      style = MaterialTheme.typography.titleLarge
   )
},
Possibly an import or dependency isssue?
z

Zun

02/24/2023, 9:48 PM
Somewhat related but is TopAppBar even a M3 component? I’m only seeing app bars such as CenterAlignedTopAppBar
b

Billy Newman

02/24/2023, 9:50 PM
Yes, from my import TopAppBar replaces the deprecated SmallTopAppBar
Copy code
@Deprecated(
    message = "Use TopAppBar instead.",
    replaceWith = ReplaceWith(
        "TopAppBar(title, modifier, navigationIcon, actions, windowInsets, colors, " +
            "scrollBehavior)"
    ),
    level = DeprecationLevel.WARNING
)
@ExperimentalMaterial3Api
@Composable
fun SmallTopAppBar(
s

Stylianos Gakis

02/24/2023, 9:50 PM
There’s an m2 version and an m3 version
k

Kirill Grouchnikov

02/24/2023, 9:50 PM
Start by adding
color=LocalContentColor.current
in this
title
block to verify that your white color is propagating correctly
b

Billy Newman

02/24/2023, 9:51 PM
@Kirill Grouchnikov, still black
k

Kirill Grouchnikov

02/24/2023, 9:54 PM
This is something that you’ll need to debug then step by step. See that the right color is set on the
TopAppBarColors
that you create at the top, and then trace where
titleContentColor
is being pushed down to
TopAppBarLayout
b

Billy Newman

02/24/2023, 10:06 PM
Looks like it is, weird.
l

Louis Pullen-Freilich [G]

02/24/2023, 10:39 PM
Make sure all your imports are consistent. E.g you aren't using the material 2 text / theme apis
k

Kirill Grouchnikov

02/24/2023, 10:39 PM
Right, maybe that
Text
is from M2 and not M3
b

Billy Newman

02/24/2023, 11:01 PM
Well, that of course is it. I still had an import for m2.Text
Thank you!
3 Views