Photo by Codioful (Formerly Gradienta) on Unsplash & App Design by https://dribbble.com/nick_buturishvili

Implementing a Crypto Trade App in Jetpack Compose: Setup & Nav Bar

Where do we start when implementing a fresh Design Specification using Jetpack Compose? This post is an implementation exercise and the first in a series in which we’ll be implementing Nick Buturishvili’s Crypto Trade App design exploration here.

Looks awesome!

We’ll dissect the UI into multiple different components and tackle each (and various at the same time in some cases) using Jetpack Compose so we can go through the exercise of fully implementing a Design Requirement.

So, let’s get started and find our first candidate for implementation.

The Home Screen

When deciding what to do first, we can start anywhere. In this case, the spec has a Bottom Navigation component, and I believe it’s a great starting point as it will serve as the base for all the other elements of our first screen in the spec. So, let’s go ahead and begin with it.

CTAHomeScreen

To get started with the bottom bar, we’ll try to go as native as possible, in this case, making use of the NavigationBar and add a Scaffold as the root element of our view, which will allow us to pass it in its bottomBar parameter.

Let’s create a new .kt file in our project and name it CTAMainScreen (CTA = Crypto Trade App). In it, we’ll place our root Home Screen composable with the structure we defined above:

We are ready now to go ahead and create our Bottom Nav Composable, which we’ll put in its own file and name CTABottomNavigationBar:

Using Mac’s Digital Colour Meter, I found the exact RGB values of the background and created the FullWhite colors.kt variable.

Now we need to bring in each of the buttons of our Bottom Navigation. We need to define NavigationBarItems in the content parameter of our NavigationBar. As I don’t have access to the exact icons used in the original design, I’ll improvise a bit with the ones I can grab from Pictogrammers. Let’s add the first:

Too minimal

Let’s quickly iterate our implementation so that we can bring in the 4 other elements from the spec and have a more readable code:

Now it’s starting to look more like what we were handed by the designer. Our next challenge to complete it is going to be to make it look like it has a cutout on its top start and end positions, and that the content is rendered behind it.

To achieve this, we’ll go back to our `HomeScreen` composable and update the content so that it is placed inside a `Card` with the appropriate background and border combo.

Now, that is looking just like we need it, and once we place a list inside the Card, we’ll be able to display it like the spec defined it.

We’ll extract it so the code is easier to follow and reusable if needed:

Finally, and this is getting very, very fine now; I noticed that the white from the top of the screen is not the same as the one at the bottom of the list, which means there’s some kind of gradient going on. I would have a direct call with the designer at this stage just to make sure the approach is as expected, but I’ll assume a vertical gradient for this scenario:

And we are done for now with the Bottom Nav! Other than the fact that the icons are not the same, we have successfully matched the spec thanks to Compose.

In an upcoming post, we’ll explore how to continue to grow our UI implementation so that we can fully develop the Home Screen. Until then!🧉

UPDATE: Here you can find the continuation of this article:

Implementing a Crypto Trade App in Jetpack Compose: The Home Header