https://kotlinlang.org
Join Slack
How can we resize vectors now that ImageVector is no longer a data class in `1.0.0-alpha11`? Previou...
# compose
j
How can we resize vectors now that ImageVector is no longer a data class in 
1.0.0-alpha11
? Previously was doing:
Copy code
vectorResource(R.drawable.ic_target).copy(defaultHeight = 18.dp, defaultWidth = 18.dp)
đź‘€ 8
a
@Nader Jawad
Nader, should we manually add copy()?
s
i was using 
copy
as welll to resize, e.g.
Copy code
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
n
Curious why are these being copied instead of changing the desired size with a modifier at the composable where it is being used?
s
because i don’t think that works
n
The strange thing about copy is that it doesnt let you modify portions of the vector tree
@Sam can you provide an example?
With source provided, what the expected output is and what the actual output is?
s
the example is ^^ with the icon, unless something changed in alpha 11
n
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
s
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
n
Vector icons scale to occupy the bounds they are told to draw within
The default size is used here as an intrinsic size for composables to "wrap content"
s
has that always been the case? because i am about 98% sure i tried that about a month ago and it didn’t work
n
We have fairly extensive support for determining alignment and scaling for vector assets ( and all painters)
s
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…
n
The issue with copying the icon and changing the size is that it's no different than changing the size of a bitmap resource
s
n
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.
s
can you give an example? for instance let’s say I currently have this:
Copy code
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?
n
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
An example would be something like the following:
Copy code
Image(
        imageVector = Icons.Rounded.ChevronLeft,
        modifier = Modifier.preferredSize(32.dp, 32.dp),
        contentDescription = "Chevon left"
    )
s
ok but one last part i was also using on 
Icon
composable, and that is the 
tint
Copy code
Icon(imageVector = Icons.Rounded.ChevronLeft.copy(defaultWidth = 32.dp, defaultHeight = 32.dp), tint = Color.White)
when switching to the 
Image
composable, do i lose this ability to easily switch the color?
n
Not at all
Image is a superset of the Icon API
s
so 
colorFilter
is the equivalent of 
tint
?
n
Just add the ColorFilter parameter
Copy code
Image(
        imageVector = Icons.Rounded.ChevronLeft,
        modifier = Modifier.preferredSize(32.dp, 32.dp),
        contentDescription = "Chevon left",
        colorFilter = ColorFilter.tint(Color.White)
    )
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
s
perfect! this will almost get my code compiling on 
alpha11
🙂
i also found this other copy, is there an alternative for it as well:
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
the underlying property seems to be 
State<Color>
in this situation
n
There's still a copy method on 
Color.kt
which is an inline class
s
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
n
If those are state parameters then you would need to access the internal parameter using 
state.value
Yup that looks right to me
3 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by