CODEWITHSUNDEEP
android-jetpack-composeandroid-jetpack-compose-material3material3
M Rajoy
M Rajoy

Reputation: 4104

Compose: TopAppBar default height for Material3?

How can I find out the default height for the SmallTopAppBar (or just TopAppBar)? I am implementing a SearchView that replaces the topBar with a similar looking bar with the Search TextView but I cant find out how to apply the proper height.

In TopAppBarDefaults:

https://developer.android.com/reference/kotlin/androidx/compose/material3/TopAppBarDefaults

only the color is shown.

Upvotes: 3

Views: 3670

Answers (2)

easyScript
easyScript

Reputation: 633

The top of the device screen is influenced by the status bar and other system elements. Due to this, you must add some padding to the top.

You can use TopAppBar for your new SearchTopAppBar and I think you might use the title of TopAppBar for the view.

I found a better solution.

If you use Surface and TextField, the code for that solution would be:

import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.systemBars

Surface(
    color = MaterialTheme.colorScheme.primary
) {
    val windowInsets = WindowInsets.systemBars
    val innerPadding= windowInsets.asPaddingValues()
    
    TextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(innerPadding)
            .height(64.dp),
        colors = TextFieldDefaults.colors(
            disabledContainerColor = Color.Transparent,
            focusedContainerColor = Color.Transparent,
            errorContainerColor = Color.Transparent,
            unfocusedContainerColor = Color.Transparent,
            focusedTextColor = MaterialTheme.colorScheme.onPrimary,
            unfocusedTextColor = MaterialTheme.colorScheme.onPrimary,
            cursorColor = MaterialTheme.colorScheme.onPrimary,
            selectionColors = TextSelectionColors(
                MaterialTheme.colorScheme.secondary,
                backgroundColor = MaterialTheme.colorScheme.onPrimary
            ),
        )
    )
}

This is similar to using Scaffold and it's innerPadding in it's content lambda. I use this colors for TextField but you can use others.

Upvotes: 0

Jan Bína
Jan Bína

Reputation: 7248

It's 64dp, you can find that in TopAppBarSmallTokens and in material design docs.

Upvotes: 4

Related Questions