Movies UI - Lists
Better Movie Icon
Jetpack Compose comes with some useful Icons, but it's a rather short list. You can see available icons at Google Fonts.
Some are in the
androidx.compose.material:material-icons-core (pulled in when you include
androidx.compose.material3:material3 as a dependency), and the rest are available in
androidx.compose.material:material-icons-extended, which you need to pull in yourself.
Warning
The extended icons dependency is rather large, and you'll likely only need a few icons from it. You can shrink your app size (see Shrink your app) or copy the source for the icons into your application. I recommend copying the source for the icons you need, as it reduces the build time.
To include the movie icon, first set up the extended icon dependency in the version catalog and define the library
show in full file gradle/libs.versions.toml
[versions]
// ...
lifecycle-compose = "2.8.7"
icons-extended = "1.7.5"
[libraries]
icons-extended = { group = "androidx.compose.material", name = "material-icons-extended-android", version.ref = "icons-extended"}
lifecycle-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle-compose" }
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
// ...
[plugins]
// ...
Include the dependency in your application build script. (Note that it's commented-out in the repository, as the end result of this step has already copied the icon)
show in full file app/build.gradle.kts
// ...
dependencies {
implementation(project(":repository"))
// implementation(libs.icons.extended)
implementation(libs.lifecycle.compose)
implementation(libs.androidx.core.ktx)
// ...
}
Sync your build scripts (press the elephant icon on the Android Studio tool bar)
Change the icon in MovieListUi.
show in full file app/src/main/java/com/androidbyexample/compose/movies/screens/MovieList.kt
// ...
@Composable
fun MovieListUi(
// ...
) {
ListScaffold(
// ...
) { movie ->
Row(
// ...
) {
Icon(
// imageVector = Icons.Default.Star,
imageVector = Icons.Default.Movie,
contentDescription = stringResource(id = R.string.movie),
modifier = Modifier.clickable {
// ...
)
// ...
}
}
}
Change the icon in the tab in ListScaffold.
show in full file app/src/main/java/com/androidbyexample/compose/movies/screens/ListScaffold.kt
// ...
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <T: HasId> ListScaffold(
// ...
) {
Scaffold(
// ...
bottomBar = {
NavigationBar {
// ...
ScreenSelectButton(
targetScreen = MovieList,
// imageVector = Icons.Default.Star,
imageVector = Icons.Default.Movie,
labelId = R.string.movies,
currentScreen = currentScreen,
// ...
)
// ...
}
},
// ...
) { paddingValues ->
// ...
}
}
At this point you can run the application you'll now see movie icons.
Now we need to either shrink the app to remove all of the extra icons (this slows down the build!) or copy the source for the icons we need. We'll copy the source.
- Open
MovieListUiin the editor - Find
Icons.Default.Movie - Control-click on
Movieto go to its source code. (If you don't see the source you'll need to try a different version ofmaterial-icons-extended) - Copy the package name from the source
- Right-click on
javaunderapp/src/main - Choose New > Package
- Paste the package name
- Copy the entire source (including the copyright header at the top) for the
Movieicon - Right-click the package you just created
- Choose New > Kotlin Class/File
- Type "Movie" as the name and choose File
- Delete the package statement and paste the source code
We now have a copy of the icon.
Next, remove the huge dependency by deleting or commenting out the
implementation line from app/build.gradle.kts. Be sure to re-sync the Gradle info by clicking
the elephant on the tool bar.
show in full file app/build.gradle.kts
// ...
dependencies {
implementation(project(":repository"))
// implementation(libs.icons.extended)
implementation(libs.lifecycle.compose)
implementation(libs.androidx.core.ktx)
// ...
}
Note
You do not need to delete the dependency information from the version catalog. This will allow you to more easily copy in other icons if you need to at a later date. I recommend leaving it and commenting out the dependency.
All code changes
CHANGED: app/build.gradle.kts
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
}
android {
namespace = "com.androidbyexample.compose.movies"
compileSdk = libs.versions.compileSdk.get().toInt()
defaultConfig {
applicationId = "com.androidbyexample.compose.movies"
minSdk = libs.versions.minSdk.get().toInt()
targetSdk = libs.versions.targetSdk.get().toInt()
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.valueOf(libs.versions.javaVersion.get())
targetCompatibility = JavaVersion.valueOf(libs.versions.javaVersion.get())
}
kotlinOptions {
jvmTarget = libs.versions.jvmTarget.get()
}
buildFeatures {
compose = true
}
}
dependencies {
implementation(project(":repository"))
// implementation(libs.icons.extended)
implementation(libs.lifecycle.compose)
implementation(libs.androidx.core.ktx)
implementation(libs.androidx.lifecycle.runtime.ktx)
implementation(libs.androidx.activity.compose)
implementation(platform(libs.androidx.compose.bom))
implementation(libs.androidx.ui)
implementation(libs.androidx.ui.graphics)
implementation(libs.androidx.ui.tooling.preview)
implementation(libs.androidx.material3)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
androidTestImplementation(platform(libs.androidx.compose.bom))
androidTestImplementation(libs.androidx.ui.test.junit4)
debugImplementation(libs.androidx.ui.tooling)
debugImplementation(libs.androidx.ui.test.manifest)
}
ADDED: app/src/main/java/androidx/compose/material/icons/filled/Movie.kt
/*
* Copyright 2024 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package androidx.compose.material.icons.filled
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.materialIcon
import androidx.compose.material.icons.materialPath
import androidx.compose.ui.graphics.vector.ImageVector
public val Icons.Filled.Movie: ImageVector
get() {
if (_movie != null) {
return _movie!!
}
_movie = materialIcon(name = "Filled.Movie") {
materialPath {
moveTo(18.0f, 4.0f)
lineToRelative(2.0f, 4.0f)
horizontalLineToRelative(-3.0f)
lineToRelative(-2.0f, -4.0f)
horizontalLineToRelative(-2.0f)
lineToRelative(2.0f, 4.0f)
horizontalLineToRelative(-3.0f)
lineToRelative(-2.0f, -4.0f)
horizontalLineTo(8.0f)
lineToRelative(2.0f, 4.0f)
horizontalLineTo(7.0f)
lineTo(5.0f, 4.0f)
horizontalLineTo(4.0f)
curveToRelative(-1.1f, 0.0f, -1.99f, 0.9f, -1.99f, 2.0f)
lineTo(2.0f, 18.0f)
curveToRelative(0.0f, 1.1f, 0.9f, 2.0f, 2.0f, 2.0f)
horizontalLineToRelative(16.0f)
curveToRelative(1.1f, 0.0f, 2.0f, -0.9f, 2.0f, -2.0f)
verticalLineTo(4.0f)
horizontalLineToRelative(-4.0f)
close()
}
}
return _movie!!
}
private var _movie: ImageVector? = null
CHANGED: app/src/main/java/com/androidbyexample/compose/movies/screens/ListScaffold.kt
package com.androidbyexample.compose.movies.screens
import androidx.annotation.StringRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Movie
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.androidbyexample.compose.movies.R
import com.androidbyexample.compose.movies.components.ScreenSelectButton
import com.androidbyexample.compose.movies.repository.HasId
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <T: HasId> ListScaffold(
@StringRes titleId: Int,
items: List<T>,
onItemClicked: (T) -> Unit,
selectedIds: Set<String>,
onSelectionToggle: (id: String) -> Unit,
onClearSelections: () -> Unit,
onDeleteSelectedItems: () -> Unit,
currentScreen: Screen,
onSelectListScreen: (Screen) -> Unit,
onResetDatabase: () -> Unit,
modifier: Modifier = Modifier,
itemContent: @Composable ColumnScope.(T) -> Unit,
) {
Scaffold(
topBar = {
if (selectedIds.isEmpty()) {
TopAppBar(
title = { Text(text = stringResource(titleId)) },
actions = {
IconButton(onClick = onResetDatabase) {
Icon(
imageVector = Icons.Default.Refresh,
contentDescription = stringResource(R.string.reset_database)
)
}
}
)
} else {
TopAppBar(
navigationIcon = {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = stringResource(R.string.clear_selections),
modifier = Modifier.clickable(onClick = onClearSelections),
)
},
title = { Text(text = selectedIds.size.toString(), modifier = Modifier.padding(8.dp)) },
actions = {
IconButton(onClick = onDeleteSelectedItems) {
Icon(
imageVector = Icons.Default.Delete,
contentDescription = stringResource(R.string.delete_selected_items)
)
}
},
)
}
},
bottomBar = {
NavigationBar {
ScreenSelectButton(
targetScreen = RatingList,
imageVector = Icons.Default.Star,
labelId = R.string.ratings,
currentScreen = currentScreen,
onSelectListScreen = onSelectListScreen
)
ScreenSelectButton(
targetScreen = MovieList,
// imageVector = Icons.Default.Star,
imageVector = Icons.Default.Movie,
labelId = R.string.movies,
currentScreen = currentScreen,
onSelectListScreen = onSelectListScreen
)
ScreenSelectButton(
targetScreen = ActorList,
imageVector = Icons.Default.Person,
labelId = R.string.actors,
currentScreen = currentScreen,
onSelectListScreen = onSelectListScreen
)
}
},
modifier = modifier
) { paddingValues ->
List(
items = items,
onItemClicked = onItemClicked,
selectedIds = selectedIds,
onSelectionToggle = onSelectionToggle,
onClearSelections = onClearSelections,
modifier = Modifier
.padding(paddingValues)
.fillMaxSize(),
itemContent = itemContent,
)
}
}
CHANGED: app/src/main/java/com/androidbyexample/compose/movies/screens/MovieList.kt
package com.androidbyexample.compose.movies.screens
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Movie
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.androidbyexample.compose.movies.R
import com.androidbyexample.compose.movies.components.Display
import com.androidbyexample.compose.movies.repository.MovieDto
@Composable
fun MovieListUi(
movies: List<MovieDto>,
modifier: Modifier = Modifier,
onMovieClicked: (MovieDto) -> Unit,
selectedIds: Set<String>,
onSelectionToggle: (id: String) -> Unit,
onClearSelections: () -> Unit,
currentScreen: Screen,
onSelectListScreen: (Screen) -> Unit,
onDeleteSelectedMovies: () -> Unit,
onResetDatabase: () -> Unit,
) {
ListScaffold(
titleId = R.string.movies,
items = movies,
onItemClicked = onMovieClicked,
selectedIds = selectedIds,
onSelectionToggle = onSelectionToggle,
onClearSelections = onClearSelections,
onDeleteSelectedItems = onDeleteSelectedMovies,
currentScreen = currentScreen,
onSelectListScreen = onSelectListScreen,
onResetDatabase = onResetDatabase,
modifier = modifier,
) { movie ->
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(8.dp)
) {
Icon(
// imageVector = Icons.Default.Star,
imageVector = Icons.Default.Movie,
contentDescription = stringResource(id = R.string.movie),
modifier = Modifier.clickable {
onSelectionToggle(movie.id)
}
)
Display(text = movie.title)
}
}
}
CHANGED: gradle/libs.versions.toml
[versions]
agp = "8.7.3"
kotlin = "2.0.21"
coreKtx = "1.15.0"
junit = "4.13.2"
junitVersion = "1.2.1"
espressoCore = "3.6.1"
lifecycleRuntimeKtx = "2.8.7"
activityCompose = "1.9.3"
composeBom = "2024.12.01"
appcompat = "1.7.0"
material = "1.12.0"
room = "2.6.1"
ksp = "2.0.21-1.0.28"
compileSdk = "35"
targetSdk = "35"
minSdk = "24"
jvmTarget = "11"
javaVersion = "VERSION_11"
lifecycle-compose = "2.8.7"
icons-extended = "1.7.5"
[libraries]
icons-extended = { group = "androidx.compose.material", name = "material-icons-extended-android", version.ref = "icons-extended"}
lifecycle-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle-compose" }
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
material = { group = "com.google.android.material", name = "material", version.ref = "material" }
room-runtime = { group = "androidx.room", name = "room-runtime", version.ref = "room" }
room-ktx = { group = "androidx.room", name = "room-ktx", version.ref = "room" }
room-compiler = { group = "androidx.room", name = "room-compiler", version.ref = "room" }
[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
android-library = { id = "com.android.library", version.ref = "agp" }
ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }