Jetpack Compose is a lot more similar to web development I think, and a lot more intuitive than XML. (from my limited understanding)

So here is a: How to do things in Jetpack compose that you used to do in web development. Please let me know if there’s any mistakes/additions you’d like to see:)

DIVS → Boxes

A div in web development is closest to a ‘Box’ in Jetpack Compose.

It can have a background color, padding, a certain size. If you want rounded borders you can use RoundedShape(10.dp) or ‘circleshape’ for maximum rounding. You can also define alignment within the div.

Box(
    modifier = Modifier.background(color = Primary400Color, CircleShape).clip(CircleShape)
          .size(80.dp).padding(2.dp),
      contentAlignment = Alignment.Center
  ) {
     Text(text = "this is text in jetpack compose", fontSize = 60.sp, color = Color.White)

  }

Please note; it matters in which order you put padding and background color, and you can apply padding/background colors multiple times. Can also give boxes a border.

The colors are defined in a separate file in this case.

Text inside the Div is a separate element;

Text(    text = "Text in Jetpack Compose ")

Colors in separate ‘constant’ file (can also include them directly, but nice to have a central theme)

val Primary50Color = Color(0xFFf1f3ff)
val Primary75Color = Color(0xFFE6EAFF)
val Primary100Color = Color(0xFFe0e4ff)
val Primary200Color = Color(0xFFbfc9ff)

A button (with text) and onclick function (that is defined elsewhere) + enabled variable;

Button(    
	onClick = { goToGrantUsageStatsPermission(activity)    },    
	enabled = !hasUsageStatsPermissionState) {    
	Text(text = "Go to settings - usage statistics permission")
}