Develop Reference

Why is it laggy when I scroll this list

I am trying to show a list of installed apps and a checkbox next to each app. The scrolling is terrible, it's noticably laggy. It looks like i am doing something wrong but i can't figure it out. how can I improve it?
#Composable
fun AppList(infoList: MutableList<android.content.pm.ResolveInfo>) {
val ctx = LocalContext.current
LazyColumn {
items(infoList) { info ->
var isChecked by remember { mutableStateOf(false) }
var icon by remember { mutableStateOf(info.loadIcon(ctx.packageManager)) }
var label by remember { mutableStateOf( info.loadLabel(ctx.packageManager).toString()) }
Row(
verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()
) {
Image(
painter = rememberImagePainterMine(icon),
contentDescription = label,
contentScale = ContentScale.Fit,
modifier = Modifier.padding(16.dp)
)
// Display the app name
Text(
text =label,
style = MaterialTheme.typography.bodyMedium,
modifier = Modifier.weight(1f)
)
// Display the checkbox on the right
Box(modifier = Modifier.clickable { isChecked = !isChecked }) {
Checkbox(
checked = isChecked,
onCheckedChange = { isChecked = it },
modifier = Modifier.padding(16.dp)
)
}
}
}
}
}
#Composable
fun rememberImagePainterMine(drawable: Drawable): Painter = remember(drawable) {
object : Painter() {
override val intrinsicSize: Size
get() = Size(drawable.intrinsicWidth.toFloat(), drawable.intrinsicHeight.toFloat())
override fun DrawScope.onDraw() {
drawable.setBounds(0, 0, size.width.toInt(), size.height.toInt())
drawable.draw(this.drawContext.canvas.nativeCanvas)
}
}
}

Are you running your app in release mode? It makes a big difference as to how smooth Jetpack Compose will be (due to the amount of debug code under the hood).
Google themselves explain it as follows:
If you're finding performance issues, make sure to try running your app in release mode. Debug mode is useful for spotting lots of problems, but it imposes a significant performance cost, and can make it hard to spot other code issues that might be hurting performance. You should also use the R8 compiler to remove unnecessary code from your app. By default, building in release mode automatically uses the R8 compiler.
Additionally, you should consider using keys with your LazyColumn to help Compose figure out if your data moves around or changes completely.
Without your help, Compose doesn't realize that unchanged items are just being moved in the list. Instead, Compose thinks the old "item 2" was deleted and a new one was created, and so on for item 3, item 4, and all the way down. The result is that Compose recomposes every item on the list, even though only one of them actually changed.
The solution here is to provide item keys. Providing a stable key for each item lets Compose avoid unnecessary recompositions. In this case, Compose can see that the item now at spot 3 is the same item that used to be at spot 2. Since none of the data for that item has changed, Compose doesn't have to recompose it.

CenterAlignedTopAppBar scrollBehavior: No value passed for parameter 'state'

I saw that a new parameter has recently been added to the Material3 Top App Bar Composables on Jetpack Compose:
fun CenterAlignedTopAppBar(
...
scrollBehavior: TopAppBarScrollBehavior? = null
) {}
What I understood from the documentation is that this should enable us to implement the behaviour that the app bar hides at scrolling the content. However, I did not manage to implement this, as the only example I found on StackOverflow seems to no longer work on the latest version of Jetpack Compose and is giving the error No value passed for parameter 'state'.
Can anybody provide an example? What I want to achieve is a Scaffold, where as topBar a CenterAlignedTopAppBar is provided, that scrolls out on top of the screen if the scrollable content of the Scaffold is scrolled.
Thanks a lot for your help.

I finally managed to get it to work:
val topAppBarScrollState: TopAppBarScrollState = rememberTopAppBarScrollState()
val scrollBehavior = remember { TopAppBarDefaults.enterAlwaysScrollBehavior(topAppBarScrollState) }
CenterAlignedTopAppBar(
modifier = modifier,
title = { Text(text = stringResource(id = titleResource)) },
actions = {
IconButton(
onClick = { }
) {
Icon(
imageVector = Icons.Filled.Settings,
contentDescription = null,
)
}
},
scrollBehavior = scrollBehavior
)
This only seems to be necessary since Compose version 1.2.0-rc02 though, as on older versions the solution in the post linked in my answer still works.

Compose LazyColumn laggy while scrolling

Jetpack Compose version: '1.1.0' and
Jetpack Compose component used: androidx.compose.* (base components_
Android Studio Build: 2021.2.1
Kotlin version:1.6.10
I have simple code inside activity. When i start App and start scroll with speed, i see scrolling lags :( What is wrong with this code?
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TestComposeTheme {
val list = (1..300).toList()
LazyColumn(
Modifier.fillMaxSize(),
) {
items(list) { item ->
SomeItem(
text = item.toString(),
clickListener = {}
)
Spacer(modifier = Modifier.height(16.dp))
}
}
}
}
}
#Composable
fun SomeItem(
text: String,
clickListener: (String) -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(64.dp)
.background(Color.LightGray)
.clickable { clickListener.invoke(text) }
) {
Icon(painter = painterResource(id = R.drawable.ic_back), contentDescription = "")
Spacer(modifier = Modifier.height(8.dp))
Text(
modifier = Modifier,
text = text
)
}
}

I also got laggy scroll when using lazycolumn (I'm migrating my Native Android project to Jetpack Compose, so i used "ComposeView in XML". Its not a pure Compose project.)
I don't know why the issue coming(Tried with release build also ), but i solved with below code.
Instead of using "LazyColumn", i used "rememberScrollState() with Column"
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(5.dp)
) {
list.forEachIndexed { i, _ ->
ShowItems(i)
}
}
Hope this will help some one.
Please attach if better Answer there, I will also update my project.
**
EDIT :: UPDATE
**
In release Build, somewhat better then DEBUG app.
The above case is only use for less amount of data. If we have large data there is no option we have to use "LazyColumn".

How to implement animated vector drawable with Jetpack Compose

compose.animation:animation-graphics API will certainly be removed and so I want to know what is the best way to use animated vector drawable with JetPack Compose?
Here is the ancient code of using the API:
val image = animatedVectorResource(drawableId)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = image.painterFor(atEnd),
contentDescription = "Your content description",
modifier = Modifier.size(64.dp).clickable {
atEnd = !atEnd
}
)
From android docs:
Note: This API is transient and will be likely removed for encouraging async resource loading.

How to use Animated vector drawable in Compose

I created my vector drawable animation and I want to use in in Compose. I found in official documentation that I need to call animatedVectorResource. But whole AnimatedImageVector has been removed from compose till next versions. How to launch animated drawable in current compose version?

You need to update compose to 1.1.0-alpha01 and add the module androidx.compose.animation:animation-graphics as indicated in the last changelog
implementation("androidx.compose.animation:animation-graphics:1.1.0-alpha01")
val image = animatedVectorResource(id = R.drawable.animated_vector)
val atEnd by remember { mutableStateOf(false) }
Icon(
painter = image.painterFor(atEnd = atEnd),
contentDescription = null
)

AnimatedImageVector was temporarily removed in 1.0.0-rc01 and it is not present in the final stable 1.0.0.
Starting from 1.1.0-alpha01 AnimatedImageVector and the related APIs are now in the new
androidx.compose.animation:animation-graphics module.
You can use something like:
val image = animatedVectorResource(drawableId)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = image.painterFor(atEnd),
contentDescription = "Your content description",
modifier = Modifier.size(64.dp).clickable {
atEnd = !atEnd
}
)