androidandroid-jetpack-compose

I am having a problem with the Top App Bar in Android development using Jetpack Compose

Is there any top app bar composable in Android with Jetpack Compose where the value of the 'title' parameter is not mandatory?

I asked an LLM, and it suggested using SmallTopAppBar(), but I am facing an issue with its import statement: import androidx.compose.material3.SmallTopAppBar. The LLM also recommended adding a dependency: implementation("androidx.compose.material3:material3:1.3.1"). I synced my Gradle file with this dependency, but nothing works. The problem shown in studio was: Unresolved Reference

Please help...

Solution

  • There is no SmallTopAppBar Composable, this is just the name of this kind of top app bar, which maps to the TopAppBar Composable.

    You will continuously stumble across this type of inaccuracies if you solely rely on LLM. I would suggest that you make yourself familiar with the Jetpack Compose documentation:

    Also, if you generate a project using the Jetpack Compose Template in Android Studio, it will generate a project that has all important dependencies set up already, including the material3 dependency:

    Android Studio Screenshot

    Besides that, you can just leave the title parameter empty for all sorts of TopAppBars:

    @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarDemo() {
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        LargeTopAppBar(
            title = {},
            navigationIcon = {
                Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "")
            },
            actions = {
                Icon(Icons.Default.MoreVert, "")
            }
        )
        MediumTopAppBar(
            title = {},
            navigationIcon = {
                Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "")
            },
            actions = {
                Icon(Icons.Default.MoreVert, "")
            }
        )
        CenterAlignedTopAppBar(
            title = {},
            navigationIcon = {
                Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "")
            },
            actions = {
                Icon(Icons.Default.MoreVert, "")
            }
        )
        TopAppBar(
            title = {},
            navigationIcon = {
                Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "")
            },
            actions = {
                Icon(Icons.Default.MoreVert, "")
            }
        )
    }
}

    Output:

    Screenshot