SVG & VectorDrawable in Android: ImageVector, AnimatedVector, Dynamic Colors

Vector drawables provide scalable, efficient graphics. Jetpack Compose makes working with vectors intuitive.

Creating ImageVector

Icon(
    imageVector = Icons.Default.Home,
    contentDescription = "Home",
    modifier = Modifier.size(24.dp),
    tint = Color.Blue
)

Custom SVG Icons

Convert SVG files to VectorDrawable XML, then use in Compose:

val customIcon = painterResource(id = R.drawable.ic_custom)
Icon(
    painter = customIcon,
    contentDescription = "Custom",
    modifier = Modifier.size(32.dp)
)

Animated Vectors

@Composable
fun AnimatedPlayPause() {
    var isPlaying by remember { mutableStateOf(false) }
    val animatedProgress by animateFloatAsState(
        targetValue = if (isPlaying) 1f else 0f
    )

    Icon(
        imageVector = Icons.Default.PlayArrow,
        contentDescription = "Play/Pause",
        modifier = Modifier.graphicsLayer {
            rotationZ = animatedProgress * 360f
        }
    )
}

Dynamic Colors

val dynamicColor = if (isDarkTheme) Color.White else Color.Black
Icon(
    imageVector = Icons.Default.Favorite,
    contentDescription = "Like",
    tint = dynamicColor
)

Vector graphics are essential for creating adaptive, responsive UIs that look crisp on any screen size.

---

8 Android app templates available on Gumroad