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

Karthick

01/03/2021, 3:30 AM
Is the title not centred is normal.
Iam using compose 1.0.0-alpha09
f

flosch

01/03/2021, 3:38 AM
Your appbar probably renders below your system bar. You probably need to add top window inset height/padding top
k

Karthick

01/03/2021, 4:47 AM
Thanks
r

rsktash

01/03/2021, 4:49 AM
Can you share your code?
k

Karthick

01/03/2021, 5:29 AM
@rsktash you can see the link below https://chrisbanes.github.io/accompanist/insets/
@flosch I added like this but not working
Copy code
val insets = AmbientWindowInsets.current

Scaffold(
    modifier = Modifier.padding(top = insets.statusBars.top.dp),
r

rsktash

01/03/2021, 6:03 AM
@Karthick I think it is not insets issue. How are you rendering app bar? share your codd
z

zoha131

01/03/2021, 6:33 AM
Are you using
TopAppBar
or
AppBar
. By default
AppBar
does not center the content vertically. You can do that using
align
modifier or wrapping the content inside a
Row
and using
CenterVertically
alignment.
k

Karthick

01/03/2021, 8:01 AM
Copy code
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeNavigationTheme {
                ProvideWindowInsets {
                    val navController = rememberNavController()
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        NavHost(navController = navController, startDestination = "first") {
                            composable("first") { FirstScreen(navController = navController) }
                            composable("second") { SecondScreen(navController = navController) }
                        }
                    }
                }
            }
        }
    }
}
Copy code
@Composable
fun FirstScreen(navController: NavController) {
    val insets = AmbientWindowInsets.current
    Scaffold(
        modifier = Modifier.padding(top = insets.statusBars.top.dp),
        topBar = {
            TopAppBar {
                Text("App Bar")
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { }) {
                Icon(Icons.Default.Check)
            }
        },
    ) {}
}
Using poco X2 phone, android 10
@flosch code added
j

Jan Bína

01/03/2021, 11:22 AM
Try this:
Copy code
TopAppBar(title = { Text("App Bar") })
Your code is probably using different TopAppBar composable (with
content
instead of
title
)
k

Karthick

01/03/2021, 12:07 PM
Wow super, thanks
👍 1