Memory leak while using LazyRow in jetpack compose

Question

I am new to jetpack compose, might have done some dumb thing, but using lazy row is causing memory leak. Please help out.

Profiler

(Ignore this because stackoverflow is asking to add more text I have never used that before, so don't know what to do and writing random things)

My code->

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val playLists = mutableListOf<Playlist>()
        val songs = mutableListOf<Songs>()
        val artists = mutableListOf<String>()
        artists.add("Artist 1")
        artists.add("Artist 2")
        songs.add(Songs("Song 1", "image", artists))
        songs.add(Songs("Song 1", "image", artists))
        songs.add(Songs("Song 1", "image", artists))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "Album mix", songs = songs))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "Album day mix", songs = songs))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "Weekend mix", songs = songs))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "New release", songs = songs))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "Top hits", songs = songs))
        playLists.add(Playlist(1, R.drawable.cover, "Your Title", "Repeat", songs = songs))
        setContent {
            MusicPlayerTheme {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Black)
                ) {
                    MainScreen(playList = playLists)
                }
            }
        }
    }
}

@Composable
fun MainScreen(playList: List<Playlist>) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = playList[0].title,
            color = Color.White,
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 15.dp, top = 15.dp)
        )
        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        ) {
            items(playList) { playList ->
                AlbumRows(playList = playList)
            }
        }
    }
}

@Composable
fun AlbumRows(
    playList: Playlist
) {
    Column(modifier = Modifier.padding(5.dp)) {
        Card(modifier = Modifier.size(180.dp), shape = RectangleShape) {
            Box(contentAlignment = Alignment.BottomStart) {
                Image(
                    painter = painterResource(id = playList.img),
                    contentDescription = "",
                    contentScale = ContentScale.Crop
                )
                Row(
                    modifier = Modifier
                        .padding(bottom = 12.dp)
                        .height(intrinsicSize = IntrinsicSize.Max)
                        .fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Box(
                        modifier = Modifier
                            .width(5.dp)
                            .fillMaxHeight(.8f)
                            .background(color = MaterialTheme.colorScheme.primary)
                    )
                    Text(
                        text = playList.albumTitle,
                        color = Color.White,
                        modifier=Modifier.padding(start = 10.dp),
                        style = MaterialTheme.typography.titleLarge,
                        fontWeight = FontWeight.SemiBold
                    )
                }

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(6.dp)
                        .background(color = MaterialTheme.colorScheme.primary)
                )
            }
        }
        val artists = playList.songs[0].artistName.toString()
        Text(
            text = artists.substring(1, artists.length - 1),
            style = MaterialTheme.typography.labelMedium,
            color = Color.LightGray,
            modifier = Modifier
                .padding(top = 10.dp)
                .alpha(.8f)
        )
    }
}

I thought it was due to reuse of canvas, I removed that but still not worked.

Answer 1

It seemes related to the use of ImagePainter. After switching to coil for image loading, memory usage went down from 800 MB to 120MB.