CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-surface
Thracian
Thracian

Reputation: 66506

Jetpack Compose Surface click ripple is not clipped based on shape?

I have 3 Surfaces as can be seen in gif when i click ripple effect propagates without taking the shapes of Surfaces into consideration.

enter image description here

Which are created with

@Composable
fun SurfaceClickPropagationExample() {

    // Provides a Context that can be used by Android applications
    val context = AmbientContext.current

    // 🔥 Offset moves a component in x and y axes which can be either positive or negative
    // 🔥🔥 When a component inside surface is offset from original position it gets clipped.
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .clipToBounds()
            .clickable(onClick = {})
    ) {

        Surface(
            modifier = Modifier
                .preferredSize(150.dp)
                .padding(12.dp)
                .clickable(onClick = {
                })
                .clipToBounds(),
            elevation = 10.dp,
            shape = RoundedCornerShape(10.dp),
            color = (Color(0xFFFDD835))
        ) {

            Surface(
                modifier = Modifier
                    .preferredSize(80.dp)
                    .clipToBounds()
                    .offset(x = 50.dp, y = (-20).dp)
                    .clickable(onClick = {
                    }),
                elevation = 12.dp,
                shape = CircleShape,
                color = (Color(0xFF26C6DA))
            ) {

            }
        }

        Surface(
            modifier = Modifier
                .preferredSize(110.dp)
                .padding(12.dp)
                .offset(x = 110.dp, y = 20.dp)
                .clickable(onClick = {}),
            shape = CutCornerShape(10.dp),
            color = (Color(0xFFF4511E)),
            elevation = 8.dp
        ) {}
    }
}

I added Modifier.clipToBounds() to check if it works with it, but it does not work with or without it.

Upvotes: 44

Views: 33991

Answers (4)

Noah
Noah

Reputation: 3425

Update for compose version 1.0.0-beta08:

Use the new experimental overload of Surface that accepts onClick.

@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication? = LocalIndication.current,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    content: () -> Unit
): @Composable Unit

Documentation

Try applying Modifier.clip(shape: Shape) before Modifier.clickable.

When using Modifiers in compose, the order matters. Modifier elements that appear first will be applied first. (documentation)

Upvotes: 70

user2141235132412
user2141235132412

Reputation: 11

I recommend you pass the on click event to child view of Card because is very complicated got shape by child view. If somebody know, wrote the purpose.

This code works when child is clicked and show clipped shadow card (ripple).

PD: I'm using compose.material3

click here ripple card demo gif-ripple

package com.example.jettipapp.ui.widgets

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val IconButtonSizeModifier = Modifier.size(40.dp)

@Composable
fun RoundIconButton(
    modifier: Modifier,
    imageVector: ImageVector,
    onClick: () -> Unit,
    tint: Color = Color.Black.copy(alpha = 0.8f),
    backgroundColor: Color = MaterialTheme.colorScheme.background,
    elevation: Dp = 4.dp
) {
    Card(
        modifier = modifier
            .padding(all = 4.dp),
        shape = CircleShape,
        elevation = CardDefaults.cardElevation(
            defaultElevation = elevation,
            pressedElevation = elevation
        ),
    ) {
        Column(
            modifier = Modifier
                .clickable {
                    onClick.invoke()
                }
                .then(IconButtonSizeModifier)
                .background(color = backgroundColor)
                .fillMaxSize()
                .clip(CircleShape),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally

        ) {
            Icon(imageVector = imageVector, contentDescription = "Plus or minus icon", tint = tint)
        }
    }
}

Upvotes: 1

Javlon
Javlon

Reputation: 1334

I'm not too fond of the ripple effect of Surface.

You can also clip ripple effect while using clickable modifier:

Row(modifier = Modifier.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(bounded = true),
) {
    // do action
})

Upvotes: 8

Patryk Kubiak
Patryk Kubiak

Reputation: 1969

I was writing this answer when both Surface and Card layouts with the onClick parameter are experimental.

If you don't want to use experimental components, you can try wrapping your view inside a Button component like this:

    Button(
        onClick = { /* TODO to handle */ },
        shape = /* your shape */,
        colors = ButtonDefaults.buttonColors(backgroundColor = /* your color */),
        elevation = elevation(defaultElevation = 0.dp, pressedElevation = 0.dp)
    ) {
        /* Here you can paste your parent layout like Box, Column, or Row,
 but set max size and horizontal alignment to override the default button's center horizontal alignment */
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.Start
        ) {
            // other stuff there
        }
    }

Here is the result:

Ripple effect on click

Upvotes: 2

Related Questions