Simple example how you can use dynamic color image vector in your app.

Overview

Dynamic Color ImageVector

Simple example how you can use dynamic color image vector in your app.

Dynamic Color Image Vector Demo

How to use

1. Create a xml image vector

The content of the XML will be used as base to create the needed kotlin code.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1058dp"
    android:height="1058dp"
    android:viewportWidth="1058"
    android:viewportHeight="1058">
  <path
      android:pathData="M0,0h1058v1058h-1058z"
      android:fillColor="#44475A"/>
  <path
      android:pathData="M112,884.1l446.4,-773.1l108.5,62.6l-446.4,773.1z"
      android:fillColor="#F8F8F2"/>
  <path
      android:pathData="M735,523.7L918.3,841.2H551.8L735,523.7Z"
      android:fillColor="#50FA7B"/>
</vector>

2. Create your dynamic color image vector

Use the pathData from your image vector using the ImageVector.Builder. Each path will be added to the ImageVector with the color you set.

fun makeIcon(
    viewportWidth: Float = 1058f,
    viewportHeight: Float = 1058f,
    defaultWidth: Dp = 1058.dp,
    defaultHeight: Dp = 1058.dp,
    backgroundColor: Color = Color(0xFF44475A),
    primaryColor: Color = Color(0xFF50FA7B),
    secondaryColor: Color = Color(0xFFF8F8F2),
): ImageVector {

    return ImageVector.Builder(
        defaultWidth = defaultWidth,
        defaultHeight = defaultHeight,
        viewportWidth = viewportWidth,
        viewportHeight = viewportHeight,
    ).run {
        addPath(
            pathData = addPathNodes("M0,0h1058v1058h-1058z"),
            fill = SolidColor(backgroundColor)
        )
        addPath(
            pathData = addPathNodes("M112,884.1l446.4,-773.1l108.5,62.6l-446.4,773.1z"),
            fill = SolidColor(secondaryColor)
        )
        addPath(
            pathData = addPathNodes("M735,523.7L918.3,841.2H551.8L735,523.7Z"),
            fill = SolidColor(primaryColor)
        )
        build()
    }
}

3. Use your dynamic color image vector

Image(
    imageVector = makeIcon(
        backgroundColor = dynamicBackgroundColor,
        primaryColor = dynamicPrimaryColor,
        secondaryColor = dynamicSecondaryColor,
    ),
    contentDescription = "Dynamic Color ImageVector",
    modifier = Modifier
        .size(200.dp)
        .padding(16.dp)
)

Using colors from your theme

You can also use MaterialTheme colors to create your dynamic color image vector. Just turn your function into a composable function and use the MaterialTheme.colors to get the colors.

@Composable
fun makeIcon(
    // ...
    backgroundColor: Color = Color(0xFF44475A),
    primaryColor: Color = MaterialTheme.colors.primary,
    secondaryColor: Color = MaterialTheme.colors.secondary,
): ImageVector {
    // ...
}
You might also like...
Simple parallax effect for your image. Only usable with Jetpack Compose.
Simple parallax effect for your image. Only usable with Jetpack Compose.

Parallax Effect in Compose Image Example usage // In an activity or fragment... private lateinit var gravitySensorDefaulted: GravitySensorDefaulted o

🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.
🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.

Landscapist 🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, Fresco Usecase You can see the use

Notes is a simple and private notes app. Organize your thoughts, discoveries, and ideas and simplify planning important moments in your life with your digital notepad.
Notes is a simple and private notes app. Organize your thoughts, discoveries, and ideas and simplify planning important moments in your life with your digital notepad.

Notes Example Download Download the latest version of the Android app from this link. Building Using Android Studio Clone the repo, open it in Android

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

🌈 Palette - A color picker library made in Jetpack Compose
🌈 Palette - A color picker library made in Jetpack Compose

🌈 Palette A color picker library made in Jetpack Compose. Including in your project Gradle Add it in your root build.gradle at the end of repositorie

🚀📒📍 Indicators for Horizontal or Vertical Pager with different orientation, color, size options and optional touch feature.

Compose Pager Indicator Indicators for Horizontal or Vertical pager with different orientation, color, size options and optional touch feature. indica

🚀📱💖Animated LazyColumn/Row changes scale/color with animation and have a current selected item like a Pager. An elegant alternative for selecting from a list

Compose AnimatedList Animated infinite and finite LazyRow and LazyColumn with scale and color animations on scroll change based on how far they are to

ToDo-Task-App - An Android App built to demonstrate the use of Jetpack Compose, Material You, Room Database, and MVVM

ToDo Task App ToDo Task App is a sample Android app built with Jetpack Compose.

Jetpack Compose android app that you can send push notification among devices using KTOR and One Signal
Jetpack Compose android app that you can send push notification among devices using KTOR and One Signal

Jetpack Compose android app that you can send push notification among devices using KTOR and One Signal, Clean Architecture, Dependency Injection...

Owner
Lucas Martins
Android Developer at @stone-payments
Lucas Martins
ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

Orlando Novas Rodriguez 24 Nov 18, 2022
Converts SVG and Android Vector Drawable in Jetpack Compose code

SVG to Compose [Experimental] Converts SVG or Android Vector Drawable to Compose code. Android Studio/IntelliJ plugin by overpass Why this project On

Gabriel Souza 244 Dec 26, 2022
ExoPlayerComposeSample - Example for how we can use the ExoPlayer with Jetpack Compose

ExoPlayer Example with Jetpack Compose This repository demonstrates how we can u

Yusuf Cakmak 15 Dec 23, 2022
A flexible theme provider for Jetpack Compose. Supports dynamic theme changes and saving theme preference.

JetTheme JetTheme is a flexible theme provider for Jetpack Compose. Change the theme and recompose the UI dynamically. Save theme preference to local

Mao Yufeng 48 Oct 19, 2022
Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the weather at that particular time.

Flux ?? Description Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the we

null 415 Jan 4, 2023
Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Smart Tool Factory 20 Dec 13, 2022
🎨 Jetpack Compose canvas library that helps you draw paths, images on canvas with color pickers and palettes

?? Jetpack Compose canvas library that helps you draw paths and images on canvas with color pickers and palettes. Sketchbook also provides useful components and functions that can easily interact with canvas.

Stream 342 Dec 30, 2022
A library that you can use in 4 different types toast written with Jetpack Compose

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose.

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

Alex 10 Dec 29, 2022