Compose Medium

build.gradle.kts

dependencies {
  implementation("androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02")
}

ComposeExample.kt

data class Message(val sender : String, val content : String)

@Composable
fun MessageList() {
  val viewModel : SampleViewModel = viewModel()
  val messages = viewModel.messages.observeAsState()
  
  LazyColumn { items(items = messages, key = { it }) { message -> MessageLayout(message) } }
}

@Composable
fun MessageLayout(data : Chat) {
  Row(Modifier.padding(top = 10.dp)
      .clickable {  
        Toast.makeText(LocalContext.current,"${data.sender} clicked",Toast.LENGTH_SHORT).show() 
      }) {
    Text(data.sender)
    Text(data.content)
  }
}

ComposeSimple.kt

@Composable
fun WaterCounter(modifier: Modifier = Modifier) {
   Column(modifier = modifier.padding(16.dp)) {
       var count by remember { mutableStateOf(0) }

       if (count > 0) {
           // This text is present if the button has been clicked
           // at least once; absent otherwise
           Text("You've had $count glasses.")
       }
       Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) {
           Text("Add one")
       }
   }
}

ConstraintSample.kt

@Composable
fun ConstraintSample(data : SampleDate) {
    ConstraintLayout {
        // Use this syntax to create multiple reference for your constraint
        // Later you can use it to set constraint it position like, ivIcon.top or ivIcon.bottom
        val (ivIcon, tvCategory, tvDescription) = createRefs()
        
        Image(
            painter = painterResource(id = R.drawable.sampleImage),
            contentDescription = null,
            modifier = Modifier
                .constrainAs(ivIcon) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                    width = Dimension.value(25.dp)
                    height = Dimension.value(25.dp)
                }
        )
        Text(
            text = data.category,
            modifier = Modifier.constrainAs(tvCategory) {
                // Use method as below to bind your compoent with the reference
                
                // To link constraint, you can call linkTo function from top, bottom, end, and start
                top.linkTo(ivIcon.top)
                
                // Or if you want to constraint both start and end, or top and bottom you can directly call linkTo like this
                // Using it like this, you can set the bias for horizontal or vertical
                linkTo(
                    start = ivIcon.end,
                    end = tvAmount.start,
                    startMargin = 5.dp,
                    endMargin = 5.dp,
                    bias = 0f
                )
                bottom.linkTo(ivIcon.bottom)
                
                // width and height are defined using Dimension, there are multiple Dimension you can use, for example:
                // Dimension.fillToConstaints , same as setting 0dp in XML
                // Dimension.prefferedWrapContent , same as settings wrap_content in XML
                // Dimension.value(theValue.dp) , same as setting value in dp
                width = Dimension.fillToConstraints
                height = Dimension.preferredWrapContent
            }
        )
        Text(
            text = data.amount,
            modifier = Modifier
                .constrainAs(tvAmount) {
                    end.linkTo(parent.end)
                    top.linkTo(tvCategory.top)
                    bottom.linkTo(tvCategory.bottom)
                    width = Dimension.preferredWrapContent
                    height = Dimension.preferredWrapContent
                }
        )
    }
}

NavigationExample.kt

@Composable
fun SampleApp() {
  // define a NavController
  val navController = rememberNavController()
  
  NavHost(navController,startDestination = "splash") {
    // Simple destination with popUpToInclusive
    composable("splash") {
      SplashScreen {
        navController.navigate("home") {
          launchSingleTop = true
          popUpTo("splash") { inclusive = true }
        }
      }
    }

    composable("home") { HomeScreen() }
    
    // Destination with argument and deep link defined
    composable(
      route = "$account/{name}",
      arguments = listOf(
        navArgument("name") {
          type = NavType.StringType
        }
      ),
      deepLinks = listOf(
        navDeepLink { uriPattern = "app://acoount/{name}" }
      )
    ) { entry ->
      val name = entry.arguments?.getString("name")
      AccountScreen(name)
    }
  }
}

@Composable
fun SplashScreen(){
  // Compose functon here
}

@Composable
fun HomeScreen(){
  // Compose functon here
}

@Composable
fun AccountScreen(name : String){
  // Compose functon here
}