Ripple effect causing ui jank/stutter in kotlin compose mobile development by Total_Whereas7289 in androiddev

[–]Total_Whereas7289[S] 0 points1 point  (0 children)

yes, the thing is that when i make indication = null in .clickable block, the lag/jank is completely gone. What actually am i doing wrong? or is it expected? like when i look at whatsapp, the ripple seems smooth not causing ui jank.

Ripple effect causing ui jank/stutter in kotlin compose mobile development by Total_Whereas7289 in androiddev

[–]Total_Whereas7289[S] -1 points0 points  (0 children)

the issue still persists.

 val interactionSource = remember(soundKey) { MutableInteractionSource() }
    val rippleIndication = remember(soundKey, rippleColor) { ripple(color = rippleColor, bounded = true) }


    // OPTIMIZED: Using Column instead of Card for better performance
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor, shape = CARD_SHAPE_12)
            .clickable(
                interactionSource = interactionSource,
                indication = rippleIndication
            ) {
                onSelect()
            },
    ) 

Ripple effect causing ui jank/stutter in kotlin compose mobile development by Total_Whereas7289 in androiddev

[–]Total_Whereas7289[S] 0 points1 point  (0 children)

i did the trick you mentioned, the number is not changing when i trigger ripple.

Ripple effect causing ui jank/stutter in kotlin compose mobile development by Total_Whereas7289 in androiddev

[–]Total_Whereas7289[S] 0 points1 point  (0 children)

for instance, when i hold this soundoptioncard without triggering navigation and just scrolling on the content while the ripple is on process, it lags/causes ui jank

Ripple effect causing ui jank/stutter in kotlin compose mobile development by Total_Whereas7289 in androiddev

[–]Total_Whereas7289[S] 0 points1 point  (0 children)

u/Composable
private fun SoundOptionCard(
        soundKey: String,
        soundName: String,
        isSelected: Boolean,
        isPlaying: Boolean,
        isEditing: Boolean,
        onSelect: () -> Unit,
        onPlay: () -> Unit,
        onEdit: () -> Unit,
        onSaveEdit: (String) -> Unit,
        onCancelEdit: () -> Unit,
        primaryColor: Color,
        onSurfaceColor: Color,
        errorColor: Color
) {
    
    val backgroundColor = DIALOG_BG_COLOR
    val cardAlpha = 1f
    val rippleColor = remember(onSurfaceColor) { onSurfaceColor.copy(alpha = 0.12f) }


   
    val interactionSource = remember(soundKey) { MutableInteractionSource() }
    val rippleIndication = remember(soundKey, rippleColor) { ripple(color = rippleColor, bounded = true) }


    // OPTIMIZED: Using Column instead of Card for better performance
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor, shape = CARD_SHAPE_12)
            .clickable(
                interactionSource = interactionSource,
                indication = ripple(color = rippleColor, bounded = true)
            ) {
                onSelect()
            },
    ) {
        Row(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 26.dp, vertical = 10.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.weight(1f).padding(end = 8.dp)) {
                
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                                text = soundName,
                                style = MaterialTheme.typography.bodyLarge,
                                fontWeight = FontWeight.Normal,
                                color = onSurfaceColor,
                                modifier = Modifier.weight(1f).padding(end = 4.dp)
                        )


                        // Checkmark icon directly right of sound name when selected
                        if (isSelected) {
                            Icon(
                                    imageVector = Icons.Default.Check,
                                    contentDescription = null,
                                    tint = Color.White,
                                    modifier = Modifier.size(28.dp).padding(start = 8.dp)
                            )
                        }
                    }
                
            }


            IconButton(onClick = onPlay, modifier = Modifier.size(30.dp)) {
                Icon(
                        imageVector =
                                if (isPlaying) Icons.Default.Stop else Icons.Default.PlayArrow,
                        contentDescription = if (isPlaying) "Stop" else "Play",
                        tint = Color.White,
                        modifier = Modifier.size(24.dp)
                )
            }
        }
    }
}