jetpack compose - IconButton from vector resource

Compose IconButton From Vector Resource
The IconButton is a widget of the android jetpack compose library. The IconButton is a clickable icon that is used to represent action. The IconButton is typically used inside an app bar for navigation action. But jetpack developers can use it in any place on their app screen to meet client requirements.

The IconButton name describes us that its main visible object is an icon. And it is a Button widget, so its main usage is to perform a click action. We have to put an Icon widget inside an IconButton widget. So, what is the icon source for the Icon widget?

We can show an icon object on the Icon widget from various sources such as a vector resource, bitmap resource, or painter resource. The following jetpack compose tutorial will demonstrate to us how we can show an icon to IconButton from a vector resource.

To do that at first, we have to put a vector resource into our application’s specified directory. We collect a vector resource by right-clicking the android studio IDE ‘drawable’ folder then navigating to ‘new’, and then selecting ‘Vector Asset’. From here we select a vector icon to put it into our ‘drawable’ folder. So now, we get our vector resource to show it on the Icon widget which is placed inside the IconButton widget.

To show an icon from the vector resource we will use the Icon widget special constructor which supports the ‘imageVector’ argument. To specify the ‘imageVector’ argument value we will use the ‘ImageVector.vectorResource()’ function where we will pass the drawable id as the ‘id’ argument value. Finally, the IconButton widget will display the specified vector image to its surface.

This jetpack compose tutorial code is written in an android studio IDE. Copy the code and run it on an emulator device or a real device to test how we display an icon to IconButton from the vector resource. We also displayed screenshots of this tutorial’s emulator screen at the bottom of this tutorial.
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 = ""
                    )
                }
            }
        }
    }
}
More android jetpack compose tutorials