how to change status bar color in jectpack compose.

 Step1: Go to MainActivity and do following:

enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.light(
            Color.Green.hashCode(), Color.Green.hashCode()
        )
    )

How to Make TopAppBar in android using Jectpack Compose.

 1. How to Make TopAppBar in android using Jectpack Compose.

Step 1:- Go to ui.theme -> Color.kt add below new color code

val GreenJC= Color(0xFF3FDB85)

Step2:- Go to MainActivity.kt and write below code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Box(Modifier.safeDrawingPadding()){
                LearnTopBar()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LearnTopBar(){
    val context= LocalContext.current.applicationContext
    TopAppBar(title = { Text(text = "Contact") },
        navigationIcon = {
            IconButton(onClick = { Toast.makeText(context,"Contact Home",Toast.LENGTH_LONG).show()}) {
                Toast.makeText(context,"Contact",Toast.LENGTH_LONG).show()
                Icon(painter = painterResource(id = R.drawable.contact), contentDescription ="Contact" )

            }
        }, colors = TopAppBarDefaults.topAppBarColors(
            containerColor = GreenJC,
            titleContentColor = Color.White,
            navigationIconContentColor = Color.White
        ), actions = {
            IconButton(onClick = { Toast.makeText(context, "Profile", Toast.LENGTH_LONG).show() }) {
                Icon(imageVector =Icons.Filled.Person , contentDescription ="Profile" , tint = Color.White)
            }
            IconButton(onClick = { Toast.makeText(context, "Search", Toast.LENGTH_LONG).show() }) {
                Icon(imageVector =Icons.Filled.Search , contentDescription ="Search" , tint = Color.White)
            }
            IconButton(onClick = { Toast.makeText(context, "More", Toast.LENGTH_LONG).show() }) {
                Icon(imageVector =Icons.Filled.MoreVert , contentDescription ="More" , tint = Color.White)
            }
        })
}

What to if your compose screen starts from status bar in android jectpack compose UI.

 1. How to correct if our screen overlap on status bar of screen in android.For example like below image

Box(Modifier.safeDrawingPadding()){
    Column {
        Text(text = "Heloo my all android friends")
        Text(text = "World is good if you are good")
    }
}

Just add Box(Modifier.safeDrawingPadding()){

//add rest of your code of UI

}