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

}

How to manage different different screen size in Android

 For Different screen size, The following is a list of resource directories in an application that provides different layout designs for different screen sizes and different bitmap drawables for small, medium, high, and extra high density screens.

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

res/drawable-mdpi/my_icon.png        // bitmap for medium density
res/drawable-hdpi/my_icon.png        // bitmap for high density
res/drawable-xhdpi/my_icon.png       // bitmap for extra high density

<supports-screens android:smallScreens="true" 

         android:normalScreens="true" 
          android:largeScreens="true"
          android:xlargeScreens="true"
          android:anyDensity="true" />