Layerbackdrop lagging when using in Samsung Device

[NongKao]

I using rememberbackdrop with lazycolum in Samsung A06 (android 15-one UI 7) and this very lag when scroll

[Kyant0]

How about the LazyColumn in the catalog demo?

[NongKao]

@composable
fun AdjustOverlayControl(
backdrop: LayerBackdrop,
consumeAllInput: Boolean = false,
onClickDone: () -> Unit, modifier: Modifier
) {
withControlCenter {
val scope = rememberCoroutineScope()

    val selectedActions = remember { mutableStateListOf<ControllerAction>() }
    var showMaxWarning by remember { mutableStateOf(false) }

    LaunchedEffect(Unit) {
        val loaded = withContext(Dispatchers.IO) { appPrefers.getSelectedActionsSafe() }
        val data = loaded.ifEmpty {
            DEFAULT_TILE_ACTIONS.also {
                withContext(Dispatchers.IO) { appPrefers.setSelectedActionsSafe(it) }
            }
        }
        selectedActions.clear()
        selectedActions.addAll(data)
    }

    val apps by appList.apps.collectAsStateWithLifecycle(initialValue = emptyList())
    val stateLoadingApps by appList.loadState.collectAsStateWithLifecycle()

// LaunchedEffect(Unit) { runCatching { appList.refresh(false) } }

    val selectedKeys by remember {
        derivedStateOf { selectedActions.keys() }
    }
    val uiState by remember(apps, selectedKeys, showMaxWarning) {
        derivedStateOf {
            buildAdjustUiStateController(
                apps = apps,
                selected = selectedActions,
                isEditMode = true,
                showMaxWarning = showMaxWarning
            )
        }
    }

    fun addSystem(type: TileSpecType) {
        if (type == TileSpecType.UserApp) return
        if (selectedActions.size >= 12) {
            showMaxWarning = true; return
        }
        if (selectedActions.any { it is ControllerAction.System && it.type == type }) return
        selectedActions.add(ControllerAction.System(type))
        showMaxWarning = false
    }

    fun addApp(pkg: String) {
        if (selectedActions.size >= 12) {
            showMaxWarning = true; return
        }
        if (selectedActions.any { it is ControllerAction.UserApp && it.packageName == pkg }) return
        selectedActions.add(ControllerAction.UserApp(pkg))
        showMaxWarning = false
    }

    fun removeAt(index: Int) {
        if (index in selectedActions.indices) {
            selectedActions.removeAt(index)
            showMaxWarning = false
        }
    }

    fun move(from: Int, to: Int) {
        if (from in selectedActions.indices && to in selectedActions.indices) {
            val it = selectedActions.removeAt(from)
            selectedActions.add(to, it)
        }
    }

    fun rollToDefault() {
        selectedActions.clear()
        selectedActions.addAll(DEFAULT_TILE_ACTIONS)
        showMaxWarning = false
    }

    val sysRows by remember(uiState.addableSystem) {
        derivedStateOf { uiState.addableSystem.chunked(4) }
    }
    val appRows by remember(uiState.addableApps) {
        derivedStateOf { uiState.addableApps.chunked(4) }
    }

    Box(modifier = modifier.fillMaxSize()) {
        if (consumeAllInput) {
            Box(
                Modifier
                    .fillMaxSize()
                    .pointerInput(Unit) {
                        awaitPointerEventScope {
                            while (true) awaitPointerEvent()
                        }
                    }
            )
        }

        Column {
            ToolbarAdjustController(
                onRollToDefault = { rollToDefault() },
                onClickDone = {
                    scope.launch(Dispatchers.IO) {
                        appPrefers.setSelectedActions(selectedActions.toList())
                    }
                    onClickDone()
                }
            )

            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()

            ) {
                item(key = "title_included", contentType = "title") {
                    SectionTitle(stringResource(R.string.control_inclued))
                }

                item(key = "included_grid", contentType = "included") {
                    AdjustSelectedGridController(
                        items = uiState.selected,
                        isEditMode = true,
                        onRemoveAt = ::removeAt,
                        backdrop = backdrop,
                        onMove = ::move
                    )
                }

                if (uiState.showMaxWarning) {
                    item(key = "warn_max", contentType = "warn") {
                        WarningMaxControls()
                    }
                }

                item(key = "title_add_controls", contentType = "title") {
                    SectionTitle(stringResource(R.string.add_controls))
                }
                items(
                    count = sysRows.size,
                    key = { row -> "sys_row:" + sysRows[row].joinToString("|") { it.type.name } },
                    contentType = { "sys_row" }
                ) { row ->
                    FourColRow(
                        items = sysRows[row],
                        keyOf = { "add_sys:${it.type.name}" }
                    ) { it ->
                        SystemCellGlassController(
                            backdrop = backdrop,
                            centerIconRes = it.type.systemIconResOrNull(),
                            overlayIconRes = R.drawable.ic_add_adjust
                        ) { addSystem(it.type) }
                    }
                }

                item(key = "title_add_apps", contentType = "title") {
                    SectionTitle(stringResource(R.string.add_apps))
                }
                if (stateLoadingApps.isLoading()) {
                    item(key = "apps_loading", contentType = "loading") {
                        Text(
                            text = stringResource(R.string.loading_apps),
                            style = BodyMedium_14sp_Regular.copy(ColorWhite),
                            modifier = Modifier
                                .paddingTopLarge()
                                .fillMaxWidth(),
                            textAlign = TextAlign.Center
                        )
                    }
                } else {
                    items(
                        count = appRows.size,
                        key = { row -> "app_row:" + appRows[row].joinToString("|") { it.packageName } },
                        contentType = { "app_row" }
                    ) { row ->
                        FourColRow(
                            items = appRows[row],
                            keyOf = { "add_app:${it.packageName}" }
                        ) { app ->
                            AppCellGlassController(
                                backdrop = backdrop,
                                app = app,
                                overlayIconRes = R.drawable.ic_add_adjust,
                                onClick = { addApp(app.packageName) }
                            )
                        }
                    }

                }
            }
        }
    }
}

}

@composable
private fun FourColRow(
items: List,
keyOf: (T) -> String,
cell: @composable (T) -> Unit,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.paddingHorizontalBase()
.padding(vertical = 4.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
for (i in 0 until 4) {
if (i < items.size) {
Box(Modifier.weight(1f)) { cell(items[i]) }
} else {
Spacer(Modifier.weight(1f))
}
}
}
}

@composable
fun AppCellGlassController(
modifier: Modifier = Modifier,
backdrop: LayerBackdrop,
app: AppInfo,
onClick: (AppInfo) -> Unit,
@DrawableRes overlayIconRes: Int? = R.drawable.ic_add_adjust
) {
val deps = LocalControlCenterDeps.current
val appList = deps.appList

val drawable by appList.iconFlow(app.packageName)
    .collectAsStateWithLifecycle(initialValue = null)

val interaction = remember { MutableInteractionSource() }

CircleTileContainer(
    modifier = modifier
        .clickable(interactionSource = interaction, indication = null) { onClick(app) }
        .padding(8.dp),
    backdrop = backdrop,
    overlayIconRes = overlayIconRes
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        if (drawable != null){
            Image(
                painter = rememberDrawablePainter(drawable!!),
                contentDescription = null,
                modifier = Modifier.fillMaxSize().padding(14.dp),
                contentScale = ContentScale.Inside
            )
        }

    }
}

}

@composable
fun CircleTileContainer(
modifier: Modifier = Modifier,
backdrop: LayerBackdrop,
overlayIconRes: Int? = null,
content: @composable (Modifier) -> Unit
) {
ConstraintLayout(modifier.aspectRatio(1f)) {
val (circle, badge) = createRefs()
val badgeSize = 22.dp

    val marginRatio = 0.5f - (1f / (2f * sqrt(2f)))

    val topGuideline = createGuidelineFromTop(marginRatio)
    val endGuideline = createGuidelineFromEnd(marginRatio)

    GlassController(
        modifier = Modifier
            .constrainAs(circle) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints
            }
            .clip(CircleShape),
        corner = 999.dp,
        backdrop = backdrop
    ) {
        content(Modifier.matchParentSize())
    }

    if (overlayIconRes != null) {
        Image(
            painter = painterResource(overlayIconRes),
            contentDescription = null,
            modifier = Modifier
                .constrainAs(badge) {
                    top.linkTo(topGuideline)
                    bottom.linkTo(topGuideline)
                    start.linkTo(endGuideline)
                    end.linkTo(endGuideline)
                }
                .size(badgeSize)
        )
    }
}

}

@composable
fun GlassController(
modifier: Modifier = Modifier,
corner: Dp = 30.dp,
blurRadius: Dp = 4.dp,
refractionHeightFrac: Float = 0.3f,
refractionAmountFrac: Float = 0.15f,
chromaticAberration: Float = 0.25f,
sizeMode: GlassSizeMode = GlassSizeMode.Aspect,
aspect: Float = 1f,
backdrop: LayerBackdrop,
content: @composable BoxScope.() -> Unit
) {
val shape = remember(corner) { RoundedCornerShape(corner) }

val sizedModifier = when (sizeMode) {
    GlassSizeMode.Wrap   -> modifier
    GlassSizeMode.Square -> modifier.aspectRatio(1f)
    GlassSizeMode.Aspect -> modifier.aspectRatio(aspect)
}

Box(
    modifier = sizedModifier
        .drawBackdrop(
            backdrop = backdrop,
            shape = { shape },
            effects = {
                vibrancy()
                lens(16f.dp.toPx(), 16f.dp.toPx())
            },
            onDrawSurface = {
                val outline = shape.createOutline(size, layoutDirection, this)
                val path = when (outline) {
                    is Outline.Rounded -> Path().apply { addRoundRect(outline.roundRect) }
                    is Outline.Rectangle -> Path().apply { addRect(Rect(Offset.Zero, size)) }
                    is Outline.Generic -> outline.path
                }

                val gray30 = Color(0xFF999999).copy(alpha = 0.30f)
                val dark45 = Color(0xFF333333).copy(alpha = 0.45f)

                drawPath(
                    path,
                    brush = Brush.verticalGradient(listOf(gray30, gray30)),
                    blendMode = BlendMode.Darken
                )

                drawPath(
                    path,
                    brush = Brush.linearGradient(
                        listOf(dark45, dark45),
                        start = Offset(0f, size.height / 2f),
                        end = Offset(size.width, size.height / 2f)
                    ),
                    blendMode = BlendMode.Luminosity
                )

                drawPath(
                    path,
                    color = Color.Black.copy(alpha = 0.10f),
                    style = Stroke(width = 1.5.dp.toPx())
                )
            }
        )



) {
    content()
}

}

i using like that. when i turn off drawBackdrop on GlassController, scroll smooth

[Kyant0]

you don't need draw path in onDrawSurface, just draw rect

[NongKao]

i comment onDrawSurface but that still lag

[Kyant0]

And it's not recommended to use glasses in scrollable containers according to iOS guidelines.
Your phone is too low-end to run the effect, it's normal.

[Kyant0]

How about the LazyColumn in the catalog demo?

Could you test this? It's "Lazy scroll container", the last item.

[NongKao]

@Kyant0 so in scroll mode liquid glass effect can't be used, can we any other ideas or ways in this case if need using in scrollable

[NongKao]

How about the LazyColumn in the catalog demo?

Could you test this? It's "Lazy scroll container", the last item.

i using only "lazy column" in this container, no scroll container other

[NongKao]

Is it possible to not render liquid glass effect while scrolling?
Does the sdk support that

[Kyant0]

I meant please try this app and scroll down and click "Lazy scroll container", tell me whether it's laggy too.

[NongKao]

i tried and this smooth. but i already using in window manager, Is there anything different here?

[NongKao]

Perfomance in "Lazy scroll container" like my app. but I still feel like it's not as smooth as without liquid glass effect.

[Kyant0]

I don't think there is any issue in your code.

[Kyant0]

How many visible glasses in the screen?

[NongKao]

I've been trying to optimize all day but the only way is to turn off the effect