Building UI Using Jetpack Compose in Android
Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will transform your data into a UI hierarchy. When the data changes or is updated then the framework automatically recalls these functions and updates the view for you.
- Familiar with Kotlin and OOP Concepts as well
- Basic understanding about Jetpack Compose
- Android Studio
So, we are just going to create an application UI using jetpack compose (Kotlin). our final UI will look like it.
It’s’ an easy UI to build using jetpack compose but a little bit hard using XML. So, let’s start step by step.
Step by Step Implementation
Step 1: Create a new android studio project
To create a new project in Android Studio using Jetpack Compose please refer to:- How to Create a New Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Let’s Add resources to the project
There are some resources like colors, image assets, fonts, and some little things. You can easily find them otherwise just get them from the GitHub repo.
Step 3: Create a Kotlin class HomeScreen.kt
We can do the same task in MainActivity.kt as well, but it’s good practice to create another file. Initially, we start from the top, so creating the first header of the UI. having two texts with an image of a search icon. Things are very easy in this case we just create functions and call them, and that is how we can reuse the code very easily.
Step 4: Create another function for chips
As we have shown above in-app preview that we can change chips. So let’s build it.
Step 5: Create a function for SuggestionSecation
It’s really a very basic part of this app.
The next step should be the card of courses but that is not easy or we can say the toughest part of the whole UI, so we will do it after the last one.
- Let’s Create a BottomSection, but before that, we should create the class for simplicity
- because our BottomSection element has two fields or views so let’s do
Step 6: Create Class for ButtomSection (BottomMenuContent.kt)
Step 7: Create function for ButtomSection
Now, the final part of the app is a little bit tricky, which is nothing but the course item, this one:
Here we have three colors, string and icon as well, then same as above we will create a class, and set data during the function call
Step 8: Creating Class Course.kt
This section has five fields, so create five variables of their types. The fields you can see in the code as well.
Now just think about it, that how to make those curves on the card. So basically, we set some points and create a smooth curve by joining points created
Step 9: Creating CourseSection
It’s basically just how our grid will Arrange.
Step 10: Creating Course Card Item Design
That’s all about, how our item will look like. So just pass the item in the course section
CourseItem(course = courses[it])
It’s that file that we have discussed above to reduce our code
Now we have all the things ready so just call all the functions and see your result as
Now add fun HomeScreen() that contains all the functions, in MainActivity as
Finally, Our UI is looking like this:
Project Link: Click Here