Create Composables with Jetpack Compose

In this demo, you’ll use layout composables to build out the Github repo list UI.

Open the Starter project in the 03-layout-composablese directory of the m3-cjp-materials repo in Android Studio Jellyfish or later.

Wait for the project to build.

Open MainViewModel.kt. You’ll notice getPublicRepositories, which is a function that fetches the list of GitHub repositories and assigns them to the state.

You’ll use the state to render out a list of repositories on the screen.

Open MainActivity.kt. Replace the TODO in MainActivity.kt with the following snippet:

val state by viewModel.state.observeAsState()  
Column(modifier = Modifier.padding(16.dp)) {  

}

Make sure to add the necessary imports:

import androidx.compose.ui.Modifier
import androidx.compose.runtime.getValue
import androidx.compose.ui.unit.dp

In the snippet above you used the observeAsState() extension function on LiveData to observe the value as a compose state object. You’ve then created a Column composable that will serve as the parent to the list UI.

Next, add the following inside the body of the Column:

state?.forEach { repo ->
	//TODO add card UI
}

Here, you’re looping over the state to access the individual repository item, which you’ll use next to build the individual repository card UI.

Next, replace the TODO in the loop with the following:

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

In the snippet above:

• You used a Box to serve as the parent for each repo card component.
• You then used a Row to create two horizontal sections in the card.
• You used the AsyncImage composable to show the avatar as the first item of the row.

Make sure you’ve the necessary imports in place. Then build and run the app. You should see a list of cards with avatars for each repo owner. Next, add the following snippet below the AsyncImage to complete the card UI and show the repo details in the card:

Column(  
	modifier = Modifier  
	.fillMaxWidth()  
	.padding(16.dp)
) {  
	
	Text(  
		text = repo.name,  
		fontSize = 16.sp,  
		fontWeight = FontWeight.SemiBold
	)  

	Spacer(modifier = Modifier.height(8.dp))  

	repo.description?.let { Text(text = it) }  
}

In the snippet above:

• You used a Column to show the repo details as a vertical list.
• You used a Text composable to show the repo name.
• You used a Spacer composable to give a vertical spacing of 8dp between the name and description.
• You then checked if a repo description is available and showed the description using another Text composable.

Build and run the app to see the entire list in action.

That concludes this demo, continue with the lesson for a summary.