CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpackandroid-compose-appbar
sanjay_siddharth
sanjay_siddharth

Reputation: 33

TopAppBar in jetpack compose without scaffold gives error

TopAppBar(title = { Text(text = "Notes") },actions = {Icon(imageVector =Icons.Default.Notifications,contentDescription = "Notif",)},) {}

when I try running the above code I get the following error "None of the following functions can be called with the arguments supplied." When I look into the declaration of TopAppBar , there are two Composables of same name however only the Composable which I want cannot be used ! Any tips?

Upvotes: 2

Views: 2248

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363785

Just remove the {}

TopAppBar(
    title = { Text(text = "Notes") },
    actions = {
        Icon(
            imageVector =Icons.Default.Notifications,
            contentDescription = "Notif",
        )},
) //{} remove this part

Using the {} you are trying to use the constructor with the attribute content: @Composable RowScope.() -> Unit that doesn't have the title and the action attributes

Upvotes: 3

Thracian
Thracian

Reputation: 66674

It happens because there is no matching functions with parameters you provided. Because of function overloading there can be several functions with slightly different parameters. Best way to avoid ambiguity is to use named parameters.

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
)

closest one to yours is above and which can be set as

TopAppBar(
    title = { Text(text = "Notes") },
    actions = {
        Icon(
            imageVector = Icons.Default.Notifications,
            contentDescription = "Notif",
        )
    }
)

Or you can use this one

@Composable
fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

such as

TopAppBar(
    // other params
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = "Notes")
        Spacer(modifier = Modifier.weight(1f))
        Icon(
            imageVector = Icons.Default.Notifications,
            contentDescription = "Notif"
        )
    }
}

Upvotes: 3

Related Questions