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.

Prerequisites:

1. Familiar with Kotlin and OOP Concepts as well
2. Basic understanding about Jetpack Compose
3. Android Studio

Step by Step Implementation

Step 1: Create a New Android Studio Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Adding resources

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 Class for Bottom Section

BottomMenuContent.kt:

Step 4: 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.

Course.kt:

Step 5: Create a util file for design

PathUtil.kt

Step 6: Create a Kotlin class HomeScreen.kt

Instead of cluttering MainActivity.kt, we break the UI into reusable functions for better maintainability.

1. Header Section – Displays two text elements and a search icon.
2. Chips Section – Interactive filters for easy selection.
3. Suggestion Section – A simple list of recommended content.
4. Course Cards – The most complex part, featuring text, icons, and colors. We'll create a data class and design smooth curves using Bezier paths.
5. Bottom Section – Requires a data class to manage two views effectively.
6. Course Section – Organizes course items in a grid layout.

Once structured, simply pass the course data:

CourseItem(course = courses[it])

HomeScreen.kt:

Step 7: Working with MainActivity.kt

Now add fun HomeScreen() that contains all the functions, in MainActivity as 

Output: