1

I've been learning android app development the past week and I'm trying to set custom icons for the navigation bar at the bottom of the screen. The NavItems data class is given below:

package com.example.navdock import android.graphics.drawable.Icon import android.icu.text.CaseMap.Title import android.media.Image import androidx.compose.ui.graphics.vector.ImageVector data class NavItem( val title: String, val filledIcon: ImageVector, val unfilledIcon: ImageVector )

The Navigation Bar is displaying and I'm able to switch between pages using it. I added a Vector Asset like said in the official documentation and a drawable file was automatically created. I don't seem to be able to add it to the NavItem object's filledIcon parameter.

I found a plugin called Valkyrie that converts SVG/XML files to ImageVectors and installed it and got large amounts of code:

package io.github.composegears.valkyrie import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.PathFillType import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.path import androidx.compose.ui.unit.dp val Calorie_Fill: ImageVector get() { if (_Calorie_Fill != null) { return _Calorie_Fill!! } _Calorie_Fill = ImageVector.Builder( name = "Calorie_Fill", defaultWidth = 42.dp, defaultHeight = 68.dp, viewportWidth = 42f, viewportHeight = 68f ).apply { path( fill = SolidColor(Color(0xFF000000)), pathFillType = PathFillType.EvenOdd ) { moveTo(19.708f, 0.529f) curveTo(19.622f, 0.831f, 19.331f, 1.869f, 19.059f, 2.837f) curveTo(18.461f, 4.967f, 17.655f, 5.963f, 15.076f, 7.759f) curveTo(10.759f, 10.766f, 8.25f, 14.413f, 7.784f, 18.356f) lineTo(7.522f, 20.584f) lineTo(6.233f, 19.626f) lineTo(4.944f, 18.669f) lineTo(3.666f, 20.205f) curveTo(2.963f, 21.051f, 1.846f, 22.83f, 1.183f, 24.16f) curveTo(0.092f, 26.351f, -0.019f, 27.01f, 0.002f, 31.194f) curveTo(0.02f, 34.696f, 0.239f, 36.394f, 0.912f, 38.229f) curveTo(1.562f, 40.002f, 1.699f, 40.998f, 1.426f, 41.965f) curveTo(0.302f, 45.952f, 2.731f, 51.493f, 7.779f, 56.459f) curveTo(15.628f, 64.179f, 19.735f, 67.685f, 20.929f, 67.685f) curveTo(22.194f, 67.685f, 27.161f, 63.479f, 33.898f, 56.703f) curveTo(39.002f, 51.569f, 40.197f, 49.113f, 40.319f, 43.504f) curveTo(40.369f, 41.207f, 40.737f, 38.042f, 41.135f, 36.47f) curveTo(42.024f, 32.966f, 41.783f, 28.915f, 40.476f, 25.408f) curveTo(39.213f, 22.015f, 38.68f, 21.636f, 36.809f, 22.797f) curveTo(35.991f, 23.305f, 35.247f, 23.719f, 35.155f, 23.718f) curveTo(35.063f, 23.716f, 34.975f, 22.381f, 34.959f, 20.75f) curveTo(34.926f, 17.295f, 33.669f, 13.958f, 31.679f, 12.043f) curveTo(30.977f, 11.367f, 30.351f, 10.899f, 30.288f, 11.002f) curveTo(30.226f, 11.106f, 29.781f, 11.973f, 29.299f, 12.929f) curveTo(28.181f, 15.151f, 25.883f, 16.607f, 24.852f, 15.747f) curveTo(24.244f, 15.241f, 24.182f, 14.442f, 24.413f, 10.11f) curveTo(24.717f, 4.409f, 24.276f, 2.155f, 22.597f, 0.828f) curveTo(21.375f, -0.138f, 19.938f, -0.287f, 19.708f, 0.529f) close() moveTo(14.21f, 22.841f) curveTo(14.227f, 18.895f, 14.827f, 16.643f, 16.172f, 15.477f) curveTo(17.559f, 14.275f, 18.129f, 14.215f, 17.846f, 15.302f) curveTo(17.489f, 16.672f, 18.58f, 19.834f, 19.851f, 21.11f) curveTo(21.843f, 23.111f, 25.139f, 23.517f, 28.384f, 22.162f) curveTo(29.147f, 21.844f, 29.187f, 21.943f, 28.844f, 23.316f) curveTo(28.638f, 24.143f, 28.461f, 25.755f, 28.45f, 26.898f) curveTo(28.418f, 30.235f, 30.087f, 31.345f, 33.956f, 30.559f) lineTo(35.55f, 30.235f) lineTo(35.71f, 32.253f) curveTo(35.798f, 33.363f, 35.867f, 34.27f, 35.867f, 34.27f) curveTo(32.821f, 32.493f, 31.316f, 32.073f, 27.986f, 32.073f) curveTo(25.1f, 32.073f, 24.023f, 32.273f, 22.371f, 33.113f) lineTo(20.328f, 34.152f) lineTo(18.249f, 33.081f) curveTo(15.574f, 31.703f, 11.084f, 31.786f, 8.111f, 33.269f) curveTo(7.049f, 33.799f, 5.99f, 34.116f, 5.759f, 33.972f) curveTo(5.346f, 33.716f, 5.587f, 28.71f, 6.034f, 28.261f) curveTo(6.158f, 28.137f, 6.931f, 28.28f, 7.752f, 28.578f) curveTo(8.646f, 28.903f, 9.896f, 28.998f, 10.869f, 28.815f) curveTo(13.176f, 28.38f, 14.194f, 26.559f, 14.21f, 22.841f) close() moveTo(23.119f, 41.554f) curveTo(23.877f, 40.723f, 25.084f, 39.735f, 25.803f, 39.358f) curveTo(27.478f, 38.481f, 28.791f, 38.489f, 30.674f, 39.387f) curveTo(33.464f, 40.716f, 34.362f, 44.786f, 32.526f, 47.771f) curveTo(31.639f, 49.212f, 21.419f, 58.892f, 20.785f, 58.892f) curveTo(20.618f, 58.892f, 17.8f, 56.27f, 14.523f, 53.067f) curveTo(9.566f, 48.222f, 8.514f, 46.969f, 8.275f, 45.621f) curveTo(7.644f, 42.064f, 9.944f, 39.113f, 13.35f, 39.11f) curveTo(14.915f, 39.108f, 18.188f, 40.851f, 19.397f, 42.33f) curveTo(20.331f, 43.472f, 21.615f, 43.204f, 23.119f, 41.554f) close() } path(fill = SolidColor(Color(0xFFFFA100))) { moveTo(16.172f, 15.477f) curveTo(14.827f, 16.643f, 14.227f, 18.895f, 14.21f, 22.841f) curveTo(14.194f, 26.559f, 13.176f, 28.38f, 10.869f, 28.815f) curveTo(9.896f, 28.998f, 8.646f, 28.903f, 7.752f, 28.578f) curveTo(6.931f, 28.28f, 6.158f, 28.137f, 6.034f, 28.261f) curveTo(5.587f, 28.71f, 5.346f, 33.716f, 5.759f, 33.972f) curveTo(5.99f, 34.116f, 7.049f, 33.799f, 8.111f, 33.269f) curveTo(11.084f, 31.786f, 15.574f, 31.703f, 18.249f, 33.081f) lineTo(20.328f, 34.152f) lineTo(22.371f, 33.113f) curveTo(24.023f, 32.273f, 25.1f, 32.073f, 27.986f, 32.073f) curveTo(31.316f, 32.073f, 32.821f, 32.493f, 35.867f, 34.27f) curveTo(35.867f, 34.27f, 35.798f, 33.363f, 35.71f, 32.253f) lineTo(35.55f, 30.235f) lineTo(33.956f, 30.559f) curveTo(30.087f, 31.345f, 28.418f, 30.235f, 28.45f, 26.898f) curveTo(28.461f, 25.755f, 28.638f, 24.143f, 28.844f, 23.316f) curveTo(29.187f, 21.943f, 29.147f, 21.844f, 28.384f, 22.162f) curveTo(25.139f, 23.517f, 21.843f, 23.111f, 19.851f, 21.11f) curveTo(18.58f, 19.834f, 17.489f, 16.672f, 17.846f, 15.302f) curveTo(18.129f, 14.215f, 17.559f, 14.275f, 16.172f, 15.477f) close() } path(fill = SolidColor(Color(0xFFCD0404))) { moveTo(25.803f, 39.358f) curveTo(25.084f, 39.735f, 23.877f, 40.723f, 23.119f, 41.554f) curveTo(21.615f, 43.204f, 20.331f, 43.472f, 19.397f, 42.33f) curveTo(18.188f, 40.851f, 14.915f, 39.108f, 13.35f, 39.11f) curveTo(9.944f, 39.113f, 7.644f, 42.064f, 8.275f, 45.621f) curveTo(8.514f, 46.969f, 9.566f, 48.222f, 14.523f, 53.067f) curveTo(17.8f, 56.27f, 20.618f, 58.892f, 20.785f, 58.892f) curveTo(21.419f, 58.892f, 31.639f, 49.212f, 32.526f, 47.771f) curveTo(34.362f, 44.786f, 33.464f, 40.716f, 30.674f, 39.387f) curveTo(28.791f, 38.489f, 27.478f, 38.481f, 25.803f, 39.358f) close() } }.build() return _Calorie_Fill!! } @Suppress("ObjectPropertyName") private var _Calorie_Fill: ImageVector? = null

How can I convert the drawables to ImageVector? What should I do with the code generated?

Improve this question
0

1 Answer 1

Reset to default
0

I added a Vector Asset like said in the official documentation and a drawable file was automatically created. I don't seem to be able to add it to the NavItem object's filledIcon parameter.

As is noted here, you can use ImageVector.vectorResource() to create an ImageVector from a vector drawable resource.

Personally, I would not use a vector drawable, unless I needed the image someplace that could only use Drawable resources. I would do what you did in your second step: use a tool (such as Valkyrie) to generate Kotlin source for the ImageVector from your original SVG.

What should I do with the code generated?

First, add it to your project as a Kotlin source file, if you have not done so already. For example, Valkyrie's generated code can be copied and pasted into an Android Studio Kotlin file editor tab.

Then, you can reference Calorie_Fill when creating a NavItem:

val calorieItem = NavItem("Calorie", filledIcon = Calorie_Fill, unfilledIcon = Calorie_Unfill)

(the above code snippet assumes that you used Valkyrie to create another ImageVector named Calorie_Unfill to use for the unfilledIcon)

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank You! That worked. If I had multiple custom icons, do I have to create a file for each?
@jkr666: If the ImageVector objects have different names (e.g., Calorie_Fill and Calorie_Unfill), there is nothing stopping you from defining them in a single Kotlin file. Personally, I tend towards a single icon per file, just due to length. As you note, the ImageVector code can be a bit lengthy, depending on the nature of the image you are converting.
Thank You! That was really helpful. I got it working.
Why not just load your SVG into Android Studio using right click on /drawable/ then New > Vector Asset? You can use these drawables for everything including menus.
@Mattfromvision.app: The question is about Jetpack Compose. Resources in general are not native to Compose, including for Material Design menus (which I am guessing is what you are referring to). Personally, I would rather skip the intermediate resource step and go straight to the ImageVector. But, I offered the option of using a vector resource in the first paragraph of my answer, for those who are so inclined.
@CommonsWare understood! Thank you. For the OP... you always have an option to design your app using the more modern "Jetpack Compose" modality or more traditional XML-file based approach. I've only ever used the latter. It's perfect for small and medium size projects.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.