Create Composables with Jetpack Compose

Sep 10 2024 · Kotlin 1.9, Android 14, Android Studio Jellyfish | 2023.3.1

Lesson 05: Leverage Components

Demo

Episode complete

Play next episode

Next

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

00:02Open the Starter project in the 05-leverage-components directory of the m3-cjp-materials repo in Android Studio Jellyfish or later.

@Composable  
fun GitHubRepoCard(repo: GitHubRepository) {

}
@Composable  
fun GitHubRepoCard(repo: GitHubRepository) {  
  Box {  
    Row(  
      verticalAlignment = Alignment.CenterVertically,  
      modifier = Modifier.padding(16.dp)  
    ) {  
      AsyncImage(  
        modifier = Modifier  
          .size(75.dp)  
          .clip(CircleShape),  
        model = repo.owner.avatarUrl,  
        contentDescription = null,  
      )  

      Column(  
        modifier = Modifier  
          .fillMaxWidth()  
          .padding(16.dp)  
      ) {  
          Text(  
            text = repo.name,  
            fontSize = 16.sp,  
            fontWeight = FontWeight.Bold  
          )  
          Spacer(modifier = Modifier.height(8.dp))  
          repo.description?.let {  
            Text(text = it, fontSize = 14.sp)  
          }  
          Spacer(modifier = Modifier.height(8.dp))  
          Text(  
            text = repo.htmlUrl,  
            fontWeight = FontWeight.Normal,  
            textDecoration = TextDecoration.Underline  
          )  

      }  
    }    
  }
}
setContent {  
  val state by viewModel.state.observeAsState()  
  Column(modifier = Modifier.padding(16.dp)) {  
    state?.forEach { repo ->  
      GitHubRepoCard(repo)  
      Spacer(modifier = Modifier.height(16.dp))  
    }  
  }
}
See forum comments
Cinema mode Download course materials from Github
Previous: Instruction Next: Conclusion