Android Jetpack Compose - Create a Movie App

In the modern digital era, the demand for movie apps is soaring. These applications provide users with an immersive experience, allowing them to discover, explore, and enjoy a wide range of movies. Jetpack Compose, a declarative UI toolkit for Android, has gained immense popularity due to its simplicity, flexibility, and powerful features.

In this article, we will explore how to create a movie app using Jetpack Compose. A sample video is given at the end to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

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: Add dependencies for navigation and image loading

Navigate to Gradle Scripts > build.gradle.kts (Module :app) and the following dependencies under dependencies{} tag.

dependencies {
 ...
 implementation ("androidx.navigation:navigation-compose:2.7.7")
 implementation("io.coil-kt:coil-compose:2.4.0")
}

Step 3: Setup Navigation

Create a Kotlin file with the name Navigation.kt to setup navigation using the NavHost composable. Create an enum class in kotlin with the name MovieScreens.kt to define screens.

Step 4: Create a data class to store Movie data

Create a kotlin data class with the name Movie.kt and create a function inside the file with the name getMovies() where we are going to add some movie data. Add the following code inside the file.

Movie.kt:

Step 5: Setup Home Screen

Navigate to app > kotlin+java > {package-name} > MainActivity.kt and create a composable to setup the home screen. In the home screen, setup a LazyColumn that navigates to the details screen on click. To design the items of the LazyColumn, create a kotlin file with the name MovieRow.kt and create a composable. This composable will contain an Image of the movie poster on the left and three texts on the right which mentions the Movie Title, Genre and Rating.

Step 6: Setup Details Screen

Create a new kotlin file to setup the Details Screen of movies. Set the name of the file and composable as DetailsScreen.kt. The composable will contain a Top Bar with a back stack navigation and the details of the movies. Use a LazyHorizontalGrid to display multiple images of a movie in Horizontal Grid with 2 maximum rows.

DetailsScreen.kt:

Output:

Refer to the following github repo to get the entire code: Movies-App-Jetpack-Compose