Build Layouts with Jetpack Compose

Open the Starter project in the 04-utilize-flow-layouts directory of the m3-ljp-materials repo in Android Studio Hedgehog or later.

Build and run the project.

This is the GitHub repository app you have worked on in previous lessons. In this lesson, you’ll use flow layout to show the languages used in each repository.

Open MainViewModel.kt and scroll down to getPublicRepositories.

private suspend fun getPublicRepositories() {
    val result = repository.getPublicRepositories().filter {
        it.description != null && it.owner.avatarUrl != null
    }.take(20)

    val requests = result.map { repo ->
        viewModelScope.async(Dispatchers.IO) {
            val languages = repository.getLanguages(repo.languagesURL).entries.take(5).associate { it.toPair() }
            repo.languages = languages
            repo        }
    }
    val updatedResult = requests.map { it.await() }

    _state.postValue(updatedResult)
}

You’ll notice a second network call being made on each of the results object to fetch each repository’s language.

To avoid hitting the GitHub API rate limit, the results are limited. And to avoid endless vertical card expansion, the number of languages accepted for each repository is limited to five.

Next, open GitHubRepoCard.kt.

You’ll notice a TODO. Replace the TODO with the following:

FlowRow(
    modifier = Modifier.padding(8.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp)) {

}

The snippet above creates a FlowRow container with a padding of 8dp on all sides and a horizontalArrangement, where each child will be spaced 4dp apart.

Next, for the content of this flow row, add the following to the contents of the FlowRow:

repo.languages.forEach { (language, _) ->
        Chip(onClick = {}) {
            Text(text = language, textAlign = TextAlign.Start, maxLines = 1)
        }
    }

Here, you loop over each of the repository’s languages, use the key that contains the language name, and render a Chip component.

Because both FlowRow and Chip are still in the experimental stage, add the following to the top of the GitHubRepoCard.kt:

@file:OptIn(ExperimentalLayoutApi::class, ExperimentalMaterialApi::class)

The IDE errors should go away now.

Build and run the app. You should now see the language for each repository show up in a chip on each card. Cards might have only one chip or more, but none of the language chips get cut off. They flow to the next line if the space is not sufficient.

That concludes this demo. Continue on for the lesson summary.