How can we resize vectors now that ImageVector is ...

# compose

[Jason Ankers]

How can we resize vectors now that ImageVector is no longer a data class in 1.0.0-alpha11? Previously was doing:

vectorResource(R.drawable.ic_target).copy(defaultHeight = 18.dp, defaultWidth = 18.dp)

[Andrey Kulikov]

@Nader Jawad

[Andrey Kulikov]

Nader, should we manually add copy()?

[Sam]

i was using copy as welll to resize, e.g.

Icons.Rounded.Check.copy(defaultHeight = 42.dp, defaultWidth = 42.dp)

but it’s not working anymore and i really can’t figure out how to get my code compiling @Nader Jawad @Andrey Kulikov @Jason Ankers

[Nader Jawad]

Curious why are these being copied instead of changing the desired size with a modifier at the composable where it is being used?

[Sam]

because i don’t think that works

[Nader Jawad]

The strange thing about copy is that it doesnt let you modify portions of the vector tree

[Nader Jawad]

@Sam can you provide an example?

[Nader Jawad]

With source provided, what the expected output is and what the actual output is?

[Sam]

the example is ^^ with the icon, unless something changed in alpha 11

[Nader Jawad]

What I am suggesting is that the icon is left alone however the size is defined with a modifier when it is used with a composable

[Sam]

the first thing i tried previously is using the modifier, it didn’t work so that’s when i searched to find the copy solution

[Nader Jawad]

Vector icons scale to occupy the bounds they are told to draw within

[Nader Jawad]

The default size is used here as an intrinsic size for composables to "wrap content"

[Sam]

has that always been the case? because i am about 98% sure i tried that about a month ago and it didn’t work

[Nader Jawad]

We have fairly extensive support for determining alignment and scaling for vector assets ( and all painters)

[Sam]

believe me it was not intuitive to start using copy but it was the only thing that worked about a month ago. i have 33 compile errors with this, so i’d have to change all of them just to test if it now works…

[Nader Jawad]

The issue with copying the icon and changing the size is that it's no different than changing the size of a bitmap resource

[Sam]

ok here’s the thread that led me to use copy https://stackoverflow.com/questions/64377952/material-icon-size-adjustment-in-jetpack-compose

[Nader Jawad]

Icon is usually used for items in a toolbar that are usually all the same size for usage in material styled apps. For more control over spacing/sizing you can use the Image composable instead with the same icon to get more control over sizing, alignment and scaling algorithms using Alignment and ContentScale APIs.

[Sam]

can you give an example? for instance let’s say I currently have this:

Icons.Rounded.ChevronLeft.copy(defaultWidth = 32.dp, defaultHeight = 32.dp)

to use the icon as 32.dp instead of smaller. how can i write jetpack compose to make it the desired size?

[Nader Jawad]

I think there was discussion regarding allowing more flexibility of the Icon composable and I'm syncing up with some folks to see where we landed on that decision

[Nader Jawad]

An example would be something like the following:

Image(
        imageVector = Icons.Rounded.ChevronLeft,
        modifier = Modifier.preferredSize(32.dp, 32.dp),
        contentDescription = "Chevon left"
    )

[Sam]

ok but one last part i was also using on Icon composable, and that is the tint

Icon(imageVector = Icons.Rounded.ChevronLeft.copy(defaultWidth = 32.dp, defaultHeight = 32.dp), tint = Color.White)

[Sam]

when switching to the Image composable, do i lose this ability to easily switch the color?

[Nader Jawad]

Not at all

[Nader Jawad]

Image is a superset of the Icon API

[Sam]

so colorFilter is the equivalent of tint?

[Nader Jawad]

Just add the ColorFilter parameter

[Nader Jawad]

Image(
        imageVector = Icons.Rounded.ChevronLeft,
        modifier = Modifier.preferredSize(32.dp, 32.dp),
        contentDescription = "Chevon left",
        colorFilter = ColorFilter.tint(Color.White)
    )

[Nader Jawad]

Icon only provides a tint color but behind the scenes does something similar to what we do for Image. Image supports all kinds of different ColorFilter properties with a more recent release

[Sam]

perfect! this will almost get my code compiling on alpha11 🙂

[Sam]

i also found this other copy, is there an alternative for it as well:

[Sam]

color.contentColor there’s actually a few places i do this to slightly modify a color, but is there a recommended way to adjust this now

[Sam]

the underlying property seems to be State<Color> in this situation

[Nader Jawad]

There's still a copy method on Color.kt which is an inline class

[Sam]

roger that, so i did colors.contentColor(true).value.copy(alpha = 1f) in this case and it worked! i lifted this from somewhere in androidx source, so ill revisit to refactor according to latest practices

[Nader Jawad]

If those are state parameters then you would need to access the internal parameter using state.value

[Nader Jawad]

Yup that looks right to me