How to load Vector Image from drawable in Jetpack compose ?

Compose Image From Vector Resource: The Image is a widget of the android jetpack compose library that allows us to display an image instance to our android mobile device user interface. Image widgets can display images from various sources such as bitmap, painter, and even vector resources.

This android application development tutorial will instruct us on how we can show an image object on an Image widget surface from a vector resource. 

To put a vector resource into our application’s specified directory:

In this tutorial, we get a vector resource by right-clicking the ‘drawable’ folder, navigating to ‘new’, and selecting ‘Vector Asset’. We select a vector image from here to put it into our ‘drawable’ folder. So we now get our vector resource to use inside the Image widget.

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

package jetpackcompose.boltuix.com

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import jetpackcompose.boltuix.com.ui.theme.JetpackComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CodeSnippets()
                }
            }
        }
    }
}

@Composable
fun CodeSnippets() {

    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 = "Share clicked" }) {
                Icon(
                    imageVector = ImageVector.vectorResource(
                        id = R.drawable.baseline_share_24),
                    contentDescription = "Share button",
                    tint = MaterialTheme.colorScheme.primary
                    //tint = Color.Blue
                )
            }


        }
    }
}

@Preview(show background = true)
@Composable
fun DefaultPreview() {
    JetpackComposeTheme {
        CodeSnippets()
    }
}

..

Comments