# Stacked Cards Layout With Compose - And Cats

DevFeed: [Stacked Cards Layout With Compose - And Cats](<https://devfeed.tech/articles/stacked-cards-layout-with-compose-and-cats-38485.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2024-07-11/stacked-cards-layout-with-compose-and-cats/>)

Author: Eevis Panula

Published: 2024-07-11T11:02:21.542000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Compose](<https://devfeed.tech/topics/compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [API](<https://devfeed.tech/topics/api.md>), [JSON](<https://devfeed.tech/topics/json.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [api](<https://devfeed.tech/tags/api.md>), [app](<https://devfeed.tech/tags/app.md>), [code](<https://devfeed.tech/tags/code.md>), [coding](<https://devfeed.tech/tags/coding.md>), [coil](<https://devfeed.tech/tags/coil.md>), [compose](<https://devfeed.tech/tags/compose.md>), [json](<https://devfeed.tech/tags/json.md>), [layout](<https://devfeed.tech/tags/layout.md>)

## AI overview

A tutorial on building a stacked card layout in Jetpack Compose. It explains the app structure, custom Compose layouts, and an example Android app that fetches cat-picture data from the Cataas API, stores picture IDs, and displays images using Coil.

## Source excerpt

I was writing a completely different blog post about playing around with Glance and app widgets, and I needed an example app. None of the existing ones served me, so I needed to build a new one. And I completely overdid it--I would have needed just something really simple, but I ended up creating a more polished app with some new concepts. The app I built has cats -- a lot of cats-- and you can get even more. It has cat pictures as cards. I wanted to stack the cards in a pile just because I thought I could probably do it -- and I could! So this blog post is about building that stacked card layout -- and a bit about cats. If you ever need cats, there's this awesome API: Cats as a service. I think it's one of the most important ones out there. Just saying. Yes, I might end up being the cat lady in the future. But okay, back to the coding. In the next sections, I'll first explain the stacked cards layout in more detail, then discuss custom layouts in Compose, and finally talk through the code for my version of the stacked cards layout. Stacked Cards with Cats The app's idea is to fetch a cat picture, and then get more cat pictures once you've seen one. Nothing complex, just cats. The app fetches a random picture's JSON data from Cataas-API and stores the picture's ID in a data store. Why a data store instead of, for example, Room? Well, this is a simple example app, never intended for production use, and it needs really simple data--a set of strings. Further, it renders pictures with Coil's SubcomposeAsyncImage based on the URL, so it doesn't load the images to the device. Again, it's not a production app, and there is no need for offline support or similar things. For a more production-grade app, a lot of things should be improved. I've tried to make the code (a link at the end of the post!) as straightforward as possible, so I've cut some corners. So, if you're someone recruiting Android devs, please don't look at this code as my masterpiece and the proof of all I can do.