How to change Background Color for TopAppBar in Android Compose?

TopAppBar – Change Background Color

To change the background color for TopAppBar in Android Compose, set backgroundColor parameter with required Color.

The following code snippet illustrates how to assign a Color to backgroundColor parameter.

TopAppBar(
	backgroundColor = Color.Red
)

Example

Let us create an Android application with TopAppBar. We shall set the background color for this TopAppBar with red color.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Scaffold(
                    topBar = { MyTopAppBar() }
                ) {
                    //content
                }
            }
        }
    }
}

@Composable
fun MyTopAppBar(){
    TopAppBar(
        title = { Text("My Application")},
        backgroundColor = Color.Red
    )
}

Screenshot

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to change the background color for TopAppBar.