Jetpack Compose — Expandable Card
I previously published an intro to Jetpack Compose that covered the fundamentals and showed you how to get started. So really, what’s the best way to get started with Jetpack compose for Android development?
One approach I used, is to take one of your older projects and try to transform the entire UI from XML layouts to Jetpack Compose. It’s a lot of fun since you already know how you expect everything to appear, so finding out which composable functions you’ll need isn’t as difficult.
In this article, I’ll show you how I changed an Expandable ListView into an Expandable Card in Jetpack Compose in one of my projects.
To give you some bit of background information, here's a look at the previous XML layout file and how the Expandable ListView worked in the project.
In the next steps, I show you how I added Jetpack Compose to this exact activity.
- Setting the background colour — To save time, compose provides a template that follows the basic material design layout structure implemented using Scaffold layout. In my project, I used this to set the background colour in my project like this…
2. Converting the recycler view (List view) — To display a collection of items, we use lists and compose recommends that we use either a LazyColumn or LazyRow depending on the scrolling orientation.
To give you some context, Compose is a set of components that only compose and layout items that can be seen in the component’s window. So, where will the expandable card be placed in my project?…
You did well if you guessed something along these lines.
3. Adding transitions/animations — Why does this matter? Animations are required to achieve a seamless and clear user experience. There's a guide here to assist you in determining which API to employ as you implement your animation. Here's a snippet of what I used in my project.
Go ahead, download the entire file to see all of the composable functions as well as some dummy data that I used to test the functionality.
Let me know what you think :-)
Other similar resources on this:
