Implementing a Crypto Trade App in Jetpack Compose: Adding the Custom Crypto Cap Card
This is part of a series in which we build a Crypto Trade App using Compose:
In the last article, we completed what we called the Home Header. Today, we’ll continue iterating on our implementation and focus on the Crypto Cap View, which displays a preview of our full Crypto Cap on the home screen.
My Crypto Cap View
Let’s begin by creating a new Composable under our composables/home package to keep things organized in our project.
Now, let’s write the root function of our new Composable.
This new view looks quite similar to a native Card, so for now, let’s start with that and see if we can make it have the exact shape specified in the design.
The background seems to have a vertical gradient, so I grabbed the top and bottom color and created 2 new color entries. With them, I can create a new Brush that creates the gradient, and I add a Box filling all the available size in the Card with this Brush as a background (since this is not doable for the background of the card, it seems!).
To continue developing the contents of our view, we need to bring in the data. We’ll define a new Data Class for it with the contents that will be required for now.
We’ll use this data class to add a new parameter to our Composable and declare a “mockData” private value that will serve us as the default value to preview the Composable.
And finally, we’ll bring in 2 new Text composables inside a Column so that they are displayed on top of each other.
And with some final styling tweaks, it’s already looking way closer to spec.
Now let’s focus for a second on that curvy shape in the background of the card. In a real-world scenario, this might be an asset that we request from the designer so that we can match the background for both iOS and Android (if we are writing native apps, of course). But given I don’t have a direct line with the designer in this case and that this is, after all, a Jetpack Compose tutorial, let’s add that line “The Compose Way,” which, by the way, is the lightest option anyway.
To achieve this curvy shape, we’ll use a combination of 2 tools Compose gives us:
- Using drawBehind(), we’ll update the Canvas behind our Card to draw the curve.
- With the help of quadraticBezierTo(), we’ll draw 2 Bézier curves.
Shoutout to Vikas for his awesome post on how to use them:
We’ll now move the initial pointer of the path to the top right of our drawing space to the point (x = 90% of the available width, y = 0% of the available height).
We draw our 2 Bezier lines, update the Stroke color and size.
I’m not gonna lie; placing those Beziers correctly takes some trial and error plus some drawing on paper helps, but the result speaks for itself!
Let’s extract our curvy line to keep our Composable readable.
We need to turn our attention to the Bar Chart at the bottom of our widget now. This time let’s define the data that will fulfill it first, and then we can use that to build it.
From a glance, we can tell that it displays the cap for 5 different months at the same time and displays highlighted the one with the biggest cap (could work differently, but we’ll take this assumption due to the lack of context surrounding its behaviour). Worth mentioning that this logic to highlight the highest cap is a perfect scenario to do TDD and add coverage for this functionality with a Compose Test 😉
Let’s extend our existing data class to have this information too.
And let’s place a new Composable under our 2 Text elements inside the Column.
We’ll bring in a Row Composable so that we can iterate over the list of elements and draw Cards for each of them. To make it fully dynamic (or value-agnostic), we’ll determine the height of the Card based on the max value of the list and with it set a percentage-based size using the fillMaxHeight modifier.
And to be able to display each month too, we’ll put a second Row for month names and bring it all together inside a Column.
We are almost there, let’s add the final touches so we can match the Design. Add the functionality to highlight the highest month and update the text color of the text to white.
For the final touches, let’s update the background gradient to be radial instead of vertical, and let’s bring in a small loading animation so it’s a bit more alive.
That was a lot of code, but it was worth the push. Our custom UI element is looking just as the designer wanted it to, and it will be easy to update. In an upcoming post, we’ll add the finishing touches to our Home Screen so we can call it complete and move on to the next part of our crypto App.
Have a nice day! 🧉
P.S.: In this tag you can find the working example we reviewed today:
