Jetpack Compose
About this episode
See forum comments
Mark complete
Next episode: 09. Apply Error & Data Handling to the UI
Leave a rating/review
Notes: 08. Build Common UI Components - Part 3
The student materials have been reviewed and are updated as of September 2022.
In ui/reviews/ui/BookReviewsList file, within BookReviewItem() composable function, replace CoilImage() composable by AsyncImage() composable with updated parameters. CoilImage composable is old and not compatible with current Jetpack Compose version.
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
Demo
Last thing that you have to build in this three-part chunk of episodes, is the BookReviews and AddBookReview features.
@Composable
fun BookPicker(
books: List<BookAndGenre>,
selectedBookId: String,
onItemPicked: (BookAndGenre) -> Unit
) {
val isPickerOpen = remember { mutableStateOf(false) }
val selectedBookName =
books.firstOrNull { it.book.id == selectedBookId }?.book?.name ?: "None"
Row(verticalAlignment = Alignment.CenterVertically) {
TextButton(
onClick = { isPickerOpen.value = true },
content = { Text(text = stringResource(id = R.string.genre_select)) })
DropdownMenu(
expanded = isPickerOpen.value,
onDismissRequest = { isPickerOpen.value = false }) {
for (book in books) {
DropdownMenuItem(onClick = {
onItemPicked(book)
isPickerOpen.value = false
}) {
Text(text = book.book.name)
}
}
}
Text(text = selectedBookName)
}
}
private val _books = mutableStateOf(emptyList<BookAndGenre>())
override fun onCreate(savedInstanceState: Bundle?) {
...
loadBooks()
}
private fun loadBooks() {
lifecycleScope.launch {
_books.value = repository.getBooks()
}
}
@Composable
fun AddBookReviewForm() {
...
val currentRatingFilter = remember { mutableStateOf(0) }
val currentlySelectedBook = remember { mutableStateOf(EMPTY_BOOK_AND_GENRE) }
...
BookPicker(books = _books.value,
selectedBookId = currentlySelectedBook.value.book.id,
onItemPicked = { bookAndGenre ->
_bookReviewState.value = _bookReviewState.value?.copy(bookAndGenre = bookAndGenre)
currentlySelectedBook.value = bookAndGenre
})
...
}
RatingBar(
modifier = Modifier.align(CenterHorizontally),
range = 1..5,
currentRating = currentRatingFilter.value,
isLargeRating = true,
onRatingChanged = { newRating -> currentRatingFilter.value = newRating })
val bookReviewsState = mutableStateOf(emptyList<BookReview>())
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
lifecycleScope.launch {
bookReviewsState.value = repository.getReviews()
}
}
@Composable
fun BookReviewsContentWrapper() {
val bookReviews = bookReviewsState.value
BookReviewsList(bookReviews, onItemClick = ::onItemSelected)
}
@Composable
fun BookReviewsList(
bookReviews: List<BookReview>,
onItemClick: (BookReview) -> Unit
) {
LazyColumn {
items(bookReviews) { bookReview ->
BookReviewItem(bookReview = bookReview, onItemClick)
}
}
}
Card(
elevation = 8.dp,
border = BorderStroke(1.dp, MaterialTheme.colors.primary),
shape = RoundedCornerShape(16.dp),
modifier = Modifier
.wrapContentHeight()
.padding(16.dp)
) {
Card(
elevation = 8.dp,
border = BorderStroke(1.dp, MaterialTheme.colors.primary),
shape = RoundedCornerShape(16.dp),
modifier = Modifier
.wrapContentHeight()
.padding(16.dp)
.clickable(
onClick = { onItemClick(bookReview) },
indication = null
)
) {
Row(modifier = Modifier.fillMaxSize()) {
Spacer(modifier = Modifier.width(16.dp))
Column(
modifier = Modifier
.weight(0.6f)
.fillMaxHeight()
) {}
Spacer(modifier = Modifier.width(16.dp))
Card(
modifier = Modifier.weight(0.4f),
shape = RoundedCornerShape(
topEnd = 16.dp,
topStart = 16.dp,
bottomStart = 0.dp,
bottomEnd = 16.dp
),
elevation = 16.dp
) {
AsyncImage(
model = bookReview.review.imageUrl,
contentScale = ContentScale.FillWidth,
contentDescription = null
)
}
Spacer(modifier = Modifier.height(16.dp))
Text(
text = bookReview.book.name,
color = MaterialTheme.colors.primary,
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row {
Text(
text = stringResource(id = R.string.rating_text)
)
...
}
RatingBar(
modifier = Modifier.align(CenterVertically),
range = 1..5,
currentRating = bookReview.review.rating,
isSelectable = false,
isLargeRating = false
)
}
Text(
text = stringResource(
id = R.string.number_of_reading_entries,
bookReview.review.entries.size
))
Spacer(modifier = Modifier.height(8.dp))
Text(
text = bookReview.review.notes,
fontSize = 12.sp,
modifier = Modifier.fillMaxSize(),
overflow = TextOverflow.Ellipsis,
fontStyle = FontStyle.Italic,
maxLines = 4
)
Spacer(modifier = Modifier.height(16.dp))