Android, .NET & ColdFusion Tutorials

Introduction

In modern Android development, Jetpack Compose has become a popular toolkit for building user interfaces. It simplifies the UI development process by using a declarative approach, where developers describe how UI elements should look based on the app's state. One useful feature in Jetpack Compose is the ability to use vector resources for displaying icons. In this article, we will break down an Android Kotlin example that demonstrates how to create IconButton elements from vector resources using Jetpack Compose.

This example showcases how to build a basic user interface with buttons containing icons from vector resources. When these buttons are clicked, they update a message on the screen. This project not only highlights the simplicity and flexibility of Jetpack Compose but also emphasizes how easily developers can integrate vector-based icons in their UI.

Main Components of the Code

The code begins with a typical setup for an Android activity using AppCompatActivity. In the onCreate method, Jetpack Compose is initialized with setContent, which allows developers to set the UI for the activity using composable functions. The Scaffold layout, a Jetpack Compose component, is used to provide a basic structure for the app. It includes a top app bar with a title and a section for content that contains the main composable.

The MainContent function is where the core of the UI is defined. This function contains a Column layout that vertically arranges its child elements, centering them horizontally and vertically on the screen. At the top of this column is a Text element that displays a message, which changes when the user interacts with the buttons. The message’s state is handled by the remember function and mutableStateOf, ensuring the UI reacts to state changes.

IconButton Usage

Below the message, the app uses a Row layout to arrange two IconButton elements horizontally, with spacing between them. These buttons are interactive, and when clicked, they trigger changes to the message. Each IconButton contains an Icon, which is loaded using the ImageVector.vectorResource function. This function allows the app to access vector resources—scalable images that can be resized without losing quality.

In this example, two vector resources are used: a mail icon (ic_baseline_mail_24) and a share icon (ic_baseline_share_24). These icons are referenced by their resource IDs, which are automatically generated when the vector assets are added to the project’s res/drawable directory. Each button is associated with a different click event, which updates the message displayed on the screen to either "Mail clicked" or "Share clicked," depending on the button pressed.

The Role of State Management

Jetpack Compose manages UI state automatically. In this example, the message state is defined as a mutable variable using var message by remember { mutableStateOf("") }. This ensures that whenever the state of message changes, Jetpack Compose will automatically recompose the UI to reflect the new state. This reactive nature eliminates the need for manual UI updates, making the code more efficient and easier to maintain.

State management in Compose is crucial because it allows developers to build dynamic and interactive interfaces. By coupling the state (in this case, the message) with user interactions (the button clicks), the UI remains synchronized with the underlying data.

Customizing UI with Modifiers

Modifiers in Jetpack Compose are essential tools for customizing the appearance and behavior of UI elements. In this example, several Modifier instances are used to control layout properties. For instance, Modifier.fillMaxSize() is applied to the Column to make it occupy the entire screen, while Modifier.height(24.dp) is used to add spacing between the message and the buttons. These modifiers provide a declarative way to handle layout logic, further enhancing the flexibility of Jetpack Compose.

Summary

This example demonstrates how to create a simple, interactive UI using Jetpack Compose, focusing on IconButton elements that use vector resources. The code leverages the power of Jetpack Compose’s state management system to handle user interaction dynamically, updating the UI as the app’s state changes. By utilizing vector resources, the app is able to display scalable, high-quality icons within buttons.

Jetpack Compose’s declarative approach, combined with features like modifiers and state handling, streamlines the process of building modern Android UIs. Whether you are creating a simple app or a more complex UI, Jetpack Compose offers the tools and flexibility needed to make development easier and more efficient.

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.*
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
import androidx.compose.ui.unit.sp

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

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


    @Composable
    fun MainContent(){
        var message by remember { mutableStateOf("")}

        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = message,
                fontSize = 30.sp
            )

            Spacer(modifier = Modifier.height(24.dp))

            Row(
                horizontalArrangement = Arrangement.spacedBy(16.dp)
            ){
                IconButton(onClick = { message = "Mail clicked" }) {
                    Icon(
                        imageVector = ImageVector.vectorResource(
                            id = R.drawable.ic_baseline_mail_24),
                        contentDescription = ""
                    )
                }

                IconButton(onClick = { message = "Share clicked" }) {
                    Icon(
                        imageVector = ImageVector.vectorResource(
                            id = R.drawable.ic_baseline_share_24),
                        contentDescription = ""
                    )
                }
            }
        }
    }
}