TopAppBar – Change Content Color

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

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

TopAppBar(
	contentColor = Color.Red
)

Example

Let us create an Android application with TopAppBar. We shall set the content color for this TopAppBar with yellow 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.Gray,
        contentColor = Color.Yellow
    )
}

Screenshot

ADVERTISEMENT
TopAppBar - Change Content Color

Conclusion

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