Animated grid in Jetpack Compose

Motivation and Context

Recently, in one of the apps I’m working on I came across a case where I needed to animate position changes in a grid of elements. My first idea was to try animateItemPlacement from LazyItemScope but unfortunately it’s not available for LazyVerticalGrid in Compose 1.1.0. The only way to achieve it was to write something custom.

Thinking process

First, let’s determine what data we need to display in the grid. For sure the number of columns, rows, and a list of items. We also need to be able to identify items so we can use a dedicated function — very similar to how LazyRow/Column works. With that we can create the following signature:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Maciej Sady

Maciej Sady

Programming enthusiast with a technical background, constantly looking for new learning opportunities.