Create Composables with Jetpack Compose
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Open 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))
}
}
}