Jetpack Compose: Icon from vector resource

Introduction

Jetpack Compose, the modern toolkit for building native Android UIs, is rapidly transforming how developers approach Android app development. One of its powerful features is the ability to easily manage UI elements using composable functions. In this tutorial, we will explore a simple example that demonstrates how to create icons using vector resources within a Jetpack Compose layout. The code highlights how to effectively utilize vector assets to build clean, responsive interfaces, showcasing the flexibility of Compose in managing images and icons.

In Android development, vector graphics are widely preferred over raster images for their scalability and small file sizes. This example illustrates how to include vector-based icons directly in a Jetpack Compose project, enhancing the visual appearance and overall performance of the app. We will break down the code in detail, so both new and experienced developers can understand the key concepts at play.

Breakdown of Code: MainActivity Class Overview

The MainActivity class in this example extends AppCompatActivity, which serves as the entry point of the app. The primary responsibility of this class is to set up the user interface using the Jetpack Compose setContent method. The UI is structured within a Scaffold, which is a powerful layout component that provides basic structure such as the top bar, bottom bar, or floating action buttons in a typical Android screen.

The top bar (TopAppBar) in this example displays a title text—"Compose - Icon From Vector Resources"—using the Text composable function. The background color for the Scaffold is set to a light off-white color (Color(0xFFFEFEFA)), creating a visually clean appearance for the app's content area.

The MainContent Composable

The main user interface of the app is built within the MainContent composable function. This function is responsible for arranging the icons and managing the layout. It uses a Row composable, which organizes its child elements horizontally. The fillMaxSize() modifier ensures that the row takes up the full screen, while the horizontalArrangement and verticalAlignment parameters center the content both horizontally and vertically.

Within the Row, two Icon composable functions are used to display vector images. These icons are loaded using ImageVector.vectorResource(), which fetches the vector drawable from the resources. In this case, the icons are sourced from the ic_baseline_mail_24 and ic_baseline_share_24 vector resources, representing a mail and share icon, respectively.

Customizing Icons

The first icon, ic_baseline_mail_24, is displayed without any customizations. It is placed within the layout using default settings, and the contentDescription parameter is left empty. While it’s good practice to provide a content description for accessibility, it has been omitted in this example for simplicity.

The second icon, ic_baseline_share_24, includes a customization: a tint is applied using the tint parameter. The tint color is set to red (Color.Red), changing the appearance of the icon without modifying the underlying vector resource. A Spacer with a width of 16.dp is added between the two icons, ensuring proper spacing between the elements.

Handling Vector Resources

Vector resources are often stored in the res/drawable folder as XML files. In this example, the ImageVector.vectorResource() function is used to load these resources by their R.drawable IDs. This method allows developers to use vector assets in a scalable and efficient manner, avoiding the performance pitfalls of large bitmap images. The use of vectors ensures that icons look sharp on any screen size or resolution.

Summary

In this example, we explored how Jetpack Compose simplifies the process of incorporating vector icons into Android apps. By leveraging the ImageVector.vectorResource() function, developers can efficiently manage scalable vector graphics within a modern Compose UI framework. The use of composables like Icon, Row, and Spacer provides a declarative and flexible approach to building responsive layouts.

This approach not only results in a clean and maintainable codebase but also enhances the performance and scalability of the app. By using vector resources, developers can ensure that icons remain crisp across various devices, leading to a better user experience. As Jetpack Compose continues to evolve, mastering these fundamental components will be essential for creating polished and responsive Android applications.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Scaffold(
                topBar = { TopAppBar(
                    title = {
                        Text(text = "Compose - Icon From Vector Resources")
                    }
                )},
                content = { MainContent() },
                backgroundColor = Color(0xFFFEFEFA)
            )
        }
    }


    @Composable
    fun MainContent(){
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = ImageVector.vectorResource(
                    id = R.drawable.ic_baseline_mail_24),
                contentDescription = ""
            )

            Spacer(modifier = Modifier.width(16.dp))

            Icon(
                imageVector = ImageVector.vectorResource(
                    id = R.drawable.ic_baseline_share_24),
                contentDescription = "",
                tint = Color.Red
            )
        }
    }
}