Search code examples
androidandroid-studiokotlinandroid-jetpack-composescaffold

Adding image to scaffold top bar in jetpack compose


I'm trying to add an image from a database to my top bar but it shows up as a white filled in rectangle - the image doesn't show at all. here's the below code. the way I have the icon set up works elsewhere in my app, it's just in this top bar for the scaffold it doesn't work. any insights?

TopBar.kt

    TopAppBar (
        title = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Test
                )
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.End
                ) {
                    Icon(
                        painter = rememberAsyncImagePainter(test.firstImage),
                        contentDescription = "Image")
                }
            }
        }
    )
Class.kt

 Scaffold(topBar = {TopBar()}) { innerPadding ->
        Column(modifier = Modifier

Solution

  • The Icon applies a default tint.
    Use tint= Color.Unspecified to avoid it:

    Icon(
        painter = rememberAsyncImagePainter(test.firstImage),
        contentDescription = "Image",
        tint = Color.Unspecified
    )