https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
t

Thierry

02/21/2020, 12:10 AM
I still think I'm doing something wrong with the drawables, or there is a bug
I have a reaction display composable as such
Copy code
@Composable
fun ReactionDisplay(counts: Map<String, Int>) {

    val reactionIcons = mapOf(
        "like" to "\uD83D\uDC4D", "love" to "\u2764\uFE0F", "haha" to "\uD83D\uDE02",
        "wow" to "\uD83D\uDE32", "sad" to  "\uD83D\uDE41", "angry" to "\uD83D\uDE21"
    )


    Column {
        Surface(color=Color.Black) {

            Row(modifier = LayoutPadding(10.dp)) {
                for ((icon, count) in counts) {
                    Text(
                        text = reactionIcons[icon]!!,
                        style = TextStyle(color = Color.Red),
                        modifier = LayoutPadding(4.dp)
                    )
                    if (count > 1) {
                        Text(
                            text = "${count}",
                            style = TextStyle(color = Color.White),
                            modifier = LayoutPadding(4.dp)
                        )
                    }

                }
            }

        }
        VectorImage(id=R.drawable.stream_tail_incoming, tint=Color.Red)

    }

}
vector image does this
Copy code
@Composable
fun VectorImage(
    modifier: Modifier = Modifier.None, @DrawableRes id: Int,
    tint: Color = Color.Transparent
) {
    val vector = vectorResource(id)
    Container(
        modifier = modifier + LayoutSize(vector.defaultWidth, vector.defaultHeight)
    ) {
        DrawVector(vector, tint)
    }
}
and loads this vector
Copy code
<vector xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:viewportWidth="25"
    android:viewportHeight="26"
    android:width="25dp"
    android:height="26dp">
    <group
        android:translateX="-274"
        android:translateY="-152">
        <group
            android:translateX="251"
            android:translateY="145">
            <path
                android:pathData="M46.891359 6.98775263C48.9803761 11.4859833 47.7147563 15.565241 46.3806948 17.9902209C45.0465335 20.4152008 42.4982945 22.7020908 40.5 26.2043725C39.167837 28.5391937 38.9979804 31 38.9979804 33C37.3571807 30.011653 35.2609596 27.7464773 32.5727539 26.2043725C29.8844483 24.6622678 26.3289084 23.9254878 23.0601981 23.9941325"
                android:fillColor="#000000"
                android:fillAlpha="1" />
        </group>
    </group>
</vector>
i would expect the vector to draw with a width of 25dp, but instead its tiny
note the red dot...
l

Louis Pullen-Freilich [G]

02/21/2020, 12:18 AM
Are you sure the vector resource you are using works properly normally? Did you try with another vector? From a brief look it looks suspicious that the viewportWidth is 25, but commands are way outside of that coordinate space
t

Thierry

02/21/2020, 12:23 AM
yes that vector works normally in a regular android app. other vectors do work for me, so its probably some edge case
l

Louis Pullen-Freilich [G]

02/21/2020, 12:24 AM
There might be some different behaviour in scaling then in the framework vs Compose, since this vector looks weird, I would recommend filing a bug in any case because there is some difference of behavior, but the vector you are using just doesn't look right
Powered by