In this tutorial, Jetpack Compose Icon tutorial we’ll walk you through the process of adding icons to your app using Compose UI, from selecting the right icon to integrating it into your app’s UI. Will look at how to use the jetpack compose button with Icon and how to use the material default Icon with compose in Android.
Table of contents
Introduction to Jetpack Compose and Icons.
Jetpack Compose is a modern toolkit for building Android UIs using a declarative programming model. It allows developers to easily create beautiful and responsive UIs with less code. Icons are an essential part of any app’s UI, providing users with visual cues and helping them navigate through the app. In this tutorial, we’ll show you how to add icons and IconButton in Android.
Setting up your Android Studio project.
Before we can start adding icons to our Android app using Jetpack Compose, we need to set up our Android Studio project. Once your project is open, make sure you have the latest version of the Jetpack Compose dependencies added to your build.gradle file. You can do this by adding the following lines of code to your dependencies
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.1'
Use the vector Icon from the resource file.
If you want to use custom icons in your Android app with Compose, you can create a custom Icon resource file. To do this, create a new XML file in your res/drawable folder and give it a name, such as custom_icon.xml. In this file, you can define your custom icon using vector graphics.
val icon1 = painterResource(id = R.drawable.ic_fav)
Icon(painter = icon1, contentDescription = null, tint = Color.Magenta)
Access default Material Icons like below
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.outlined.Email
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
@Composable
fun IconsExampleCompose() {
Column(
modifier = Modifier.fillMaxSize(1f),
horizontalAlignment = Alignment.CenterHorizontally
) {
Icon(Icons.Default.Email, contentDescription = null, tint = Color.Magenta)
Icon(Icons.Outlined.Email, contentDescription = null, tint = Color.Magenta)
}
}
Implement Material IconButton
var tintColor = remember { mutableStateOf(Color.Blue) }
IconButton(onClick = {
/* handle on click event here*/
tintColor.value = Color.Red
}) {
Icon(Icons.Filled.ThumbUp, contentDescription = null, tint = tintColor.value)
}
Icons and IconButton example
import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.ThumbUp
import androidx.compose.material.icons.outlined.Email
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
@Composable
fun IconsExampleCompose() {
Column(
modifier = Modifier.fillMaxSize(1f)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly
) {
val icon1 = painterResource(id = R.drawable.ic_fav)
Icon(painter = icon1, contentDescription = null, tint = Color.Magenta)
Icon(Icons.Default.Email, contentDescription = null, tint = Color.Magenta)
Icon(Icons.Outlined.Email, contentDescription = null, tint = Color.Magenta)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly
) {
var tintColor = remember { mutableStateOf(Color.Blue) }
IconButton(onClick = {
/* handle on click event here*/
tintColor.value = Color.Red
}) {
Icon(Icons.Filled.ThumbUp, contentDescription = null, tint = tintColor.value)
}
}
}
}
Conclusion
That is all about compose Icon and IconButton, this way you can implement the material icon WITH compose function and IconButton in Android project. If you have any queries please let me put them in comment box. I will try to answer that as soon as possible