Jetpack Compose

Oct 11 2022 Kotlin 1.7.10, Android 13, Android Studio Chipmunk

Part 2: Build Complex UI with Compose

10. Add Actions & Handlers

Episode complete

Play next episode

Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 9. Apply Error & Data Handling to the UI Next episode: 11. Build Custom Dialogs

The student materials have been reviewed and are updated as of September 2022.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock Now

Intro

[Slide 1 - Dialogs and Actions]

Demo

Let’s start off with the BookReviews feature. Open the BookReviewsFragment, and add the following code at the top:

private val _deleteReviewState = mutableStateOf<BookReview?>(null)

Box(
  contentAlignment = Alignment.Center,
  modifier = Modifier.fillMaxSize()
) {
    
    val reviewToDelete = _deleteReviewState.value

      if (reviewToDelete != null) {
        DeleteReviewDialog(
          item = reviewToDelete,
          message = stringResource(id = R.string.delete_review_message, reviewToDelete.book.name),
			...
        )
      }

...
          onDeleteItem = { bookReview ->
            deleteReview(bookReview)
            _deleteReviewState.value = null
          },
          onDismiss = {
            _deleteReviewState.value = null
          }

...   
  fun deleteReview(bookReview: BookReview) {
    lifecycleScope.launch {
      repository.removeReview(bookReview.review)

      bookReviewsState.value = repository.getReviews()
    }
  }

onItemLongTap = {
  _deleteReviewState.value = it
}

onItemLongTap: (BookReview) -> Unit

LazyColumn(Modifier.fillMaxSize()) // new

// BookReviewItem
.combinedClickable(
  interactionSource = remember { MutableInteractionSource() },
  onClick = { onItemClick(bookReview) },
        onLongClick = { onItemLongTap(bookReview) },
        indication = null)

@Composable
fun DeleteReviewDialog(
  item: BookReview,
  message: String,
  onDeleteItem: (BookReview) -> Unit,
  onDismiss: () -> Unit
) {

}

  AlertDialog(
    title = { Text(text = stringResource(id = R.string.delete_title)) },
    text = { Text(text = message) },
    onDismissRequest = onDismiss,
    buttons = {
      Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.End
      ) {

      }
    })

        DialogButton(
          text = R.string.yes,
          onClickAction = { onDeleteItem(item) }
        )

        DialogButton(text = R.string.cancel, onClickAction = onDismiss)

@Composable
fun DialogButton(
  modifier: Modifier = Modifier,
  @StringRes text: Int,
  onClickAction: () -> Unit
) {
  TextButton(
    modifier = modifier.padding(start = 8.dp, end = 8.dp, top = 8.dp, bottom = 8.dp),
    colors = buttonColors(
      backgroundColor = colorResource(id = R.color.colorPrimary),
      contentColor = Color.White),
    onClick = onClickAction
  ) {
    Text(text = stringResource(id = text))
  }
}