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?
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)