Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jetpack Compose onClick ripple is not propagating with a circular motion?

As can be seen in gif

enter image description here

when Column that contains of Text, Spacer, and LazyRowForIndexed is touched ripple is not propagating with circular motion. And it gets touched effect even when horizontal list is touched.

@Composable
fun Chip(modifier: Modifier = Modifier, text: String) {
    Card(
        modifier = modifier,
        border = BorderStroke(color = Color.Black, width = Dp.Hairline),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier.preferredSize(16.dp, 16.dp)
                    .background(color = MaterialTheme.colors.secondary)
            )
            Spacer(Modifier.preferredWidth(4.dp))
            Text(text = text)
        }
    }
}

@Composable
fun TutorialSectionCard(model: TutorialSectionModel) {

    Column(
        modifier = Modifier
            .padding(top = 8.dp)
            .clickable(onClick = { /* Ignoring onClick */ })
            .padding(16.dp)
    ) {

        Text(text = model.title, fontWeight = FontWeight.Bold, style = MaterialTheme.typography.h6)
        Spacer(Modifier.preferredHeight(8.dp))
        Providers(AmbientContentAlpha provides ContentAlpha.medium) {
            Text(model.description, style = MaterialTheme.typography.body2)
        }
        Spacer(Modifier.preferredHeight(16.dp))
        LazyRowForIndexed(items = model.tags) { _: Int, item: String ->
            Chip(text = item)
            Spacer(Modifier.preferredWidth(4.dp))
        }
    }
}

@Preview
@Composable
fun TutorialSectionCardPreview() {

    val model = TutorialSectionModel(
        clazz = MainActivity::class.java,
        title = "1-1 Column/Row Basics",
        description = "Create Rows and Columns that adds elements in vertical order",
        tags = listOf("Jetpack", "Compose", "Rows", "Columns", "Layouts", "Text", "Modifier")

    )

    Column {
        TutorialSectionCard(model)
        TutorialSectionCard(model)
        TutorialSectionCard(model)
    }
}

What should be done to have circular effect, but not when list itself or an item from list is touched, or scrolled?

like image 837
Thracian Avatar asked Dec 20 '20 17:12

Thracian


3 Answers

You have to apply a Theme to your composable, which in turn provides a default ripple factory, or you have to set the ripple explicitly:

@Preview
@Composable
fun TutorialSectionCardPreview() {
    MaterialTheme() {
        Column {
            TutorialSectionCard
            ...
        }
    }
}

or

Column(
        modifier = Modifier
            .padding(top = 8.dp)
            .clickable(
                onClick = { /* Ignoring onClick */ },
                indication = rememberRipple(bounded = true)
            )
            .padding(16.dp)
    ) {
      // content
    }

(As of compose version 1.0.0-alpha09 there seems to be no way to prevent the ripple from showing when content is scrolled)

like image 108
jns Avatar answered Oct 17 '22 12:10

jns


I also figured out how to keep ripple only for the card not the scrollable list that contains tags. To prevent ripple only move through cards use a Box which places it's children as a stack, and add clickable to section that contains header and text.

ripple

@Composable
fun TutorialSectionCard(
    model: TutorialSectionModel,
    onClick: ((TutorialSectionModel) -> Unit)? = null
) {
    Card(
        modifier = Modifier.padding(vertical = 3.dp, horizontal = 8.dp),
        elevation = 1.dp,
        shape = RoundedCornerShape(8.dp)
    ) {
        Box(
            contentAlignment = Alignment.BottomStart
        ) {
            TutorialContentComponent(onClick, model)
            TutorialTagsComponent(model)
        }
    }
}

@Composable
private fun TutorialContentComponent(
    onClick: ((TutorialSectionModel) -> Unit)?,
    model: TutorialSectionModel
) {
    Column(Modifier
        .clickable(
            onClick = { onClick?.invoke(model) }
        )
        .padding(16.dp)
    ) {

        Text(
            text = model.title,
            fontWeight = FontWeight.Bold,
            style = MaterialTheme.typography.h6
        )

        // Vertical spacing
        Spacer(Modifier.height(8.dp))

        // Description text
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(model.description, style = MaterialTheme.typography.body2)
        }
        // Vertical spacing
        Spacer(Modifier.height(36.dp))
    }
}

@Composable
private fun TutorialTagsComponent(model: TutorialSectionModel) {
    Column(Modifier.padding(12.dp)) {

        // Horizontal list for tags
        LazyRow(content = {

            items(model.tags) { tag ->
                TutorialChip(text = tag)
                Spacer(Modifier.width(8.dp))
            }
        })
    }
}
like image 45
Thracian Avatar answered Oct 17 '22 12:10

Thracian


I'm using this approach:

        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = rememberRipple(
                color = Color.Black
            ),
            onClick = {

            }
        )
like image 33
Edgar Khimich Avatar answered Oct 17 '22 13:10

Edgar Khimich