32

I am replacing all my icons with VectorDrawables wherever possible. But I noticed a couple of them don't render correctly on API 23 and the color seems to be bleeding out. One of these 3 renders fine. Here's a screenshot from a isolated project I created:

enter image description here

Looks perfectly fine on API 21:

enter image description here

The source code of sample app is here

I am using AppCompat 24.0.0, app:srcCompat on ImageView and have set vectorDrawables.useSupportLibrary=true. I also tried AppCompat 23.4.0 with target 23. However, if I remove appCompat and set minSdkVersion to 21 and use native vector support, the results don't change. The IDE doesn't complain of anything being unsupported. How do I figure out what's the problem? Is it a platform bug? Are there any workarounds?

gitter
  • 1,706
  • 1
  • 20
  • 32
  • bro.. try to downgrade your version little bit to 23.0.3, i also using vectorDrawable.. nd its working fine in 23. – Sagar Chavada Jul 04 '16 at 12:40
  • Doesn't look like a appcompat version problem to me since it stays the same even after i remove appcompat. – gitter Jul 04 '16 at 15:26
  • What device(api 23) are you using? have you tested on emulator? with api level 23 vector drawable using system default implementation of vector drawable, i would say most probably is ROM problem – Stepango Jul 05 '16 at 07:18
  • I tried a nexus 5, a Moto X and emulator too. Seeing same problem in all 3. – gitter Jul 05 '16 at 09:04
  • 1
    Tried an API 24 emulator and a nexus 6 running Android N preview 4. No issue there, works fine. – gitter Jul 05 '16 at 09:15
  • did you resolve this? – Jonas Aug 18 '16 at 11:03
  • 4
    @JonasOtto No. But i filed a bug for the same on the Android bug tracker. You may want to star it. https://code.google.com/p/android/issues/detail?id=215262 – gitter Aug 20 '16 at 09:46
  • Apparently, the fix has been released in support lib 25. I haven't tested though. – gitter Jul 10 '17 at 08:00
  • I've found the same issue when using api 23 but not on 24. In the meanwhile adding the vector drawable programmatically, instead of adding it by default on the xml, seems make the render to work properly. At least it worked for me. – Jota Jul 17 '17 at 13:54
  • @gitter Did you find the solution for this problem, I have followed you the google link and couldn't find the solution. So, please share if you found any solution. – Ali Jul 24 '17 at 04:42
  • @barakataliforoz I updated my sample app to use support lib 25.4.0 and it is working fine for me. If you are sure this is related, provide more details. Else you might want to open a new question. – gitter Jul 24 '17 at 09:01
  • @gitter I am using the latest version of Android support libraries but it doesn't work on image view inside recycler view item. Here my friend has asked this question with screen shots, please check it [here] (https://stackoverflow.com/questions/45272690/vectordrawable-rendering-issue-on-api-23 ) – Ali Jul 25 '17 at 06:45

3 Answers3

38

I had exactly the same problem on API 23 only. I was setting my ImageView source dynamically, rather than in xml. I realised the problem was that I was doing:

Drawable show = getContext().getResources().getDrawable(resourceId);

When I should have been doing:

Drawable show = AppCompatResources.getDrawable(getContext(), resourceId);

I hope this helps someone!

Luke Needham
  • 3,373
  • 1
  • 24
  • 41
  • 3
    This was exactly what I did wrong. Thanks for your input – Stefan Arn Nov 28 '17 at 17:15
  • 5
    This was definitively the problem, I had similar rendering issues with about 100 icons and they all got fixed by changing this. Thanks! Also calling `ContextCompat.getDrawable` doesn't work either. – Nicolas Mar 31 '18 at 13:05
  • 1
    thanks a lot! after trying a lot of things this solution did the trick! – mapo Apr 01 '19 at 16:36
  • This indeed fixes the problem but it is a shame nothing can be done when setting the vector drawable in xml – galaxigirl May 27 '19 at 14:23
26

Read this medium for a more detailed explanation https://medium.com/androiddevelopers/using-vector-assets-in-android-apps-4318fd662eb9

TL;DR

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Use 

app:srcCompat
app:buttonCompat
app:drawableStartCompat...

Instead of 

android:src
android:button
android:drawableStart

Programatically

AppCompatResources.getDrawable(context, R.drawable.my_drawable)
Pedro Romão
  • 2,285
  • 28
  • 22
22

First off, I'm not an Android developer, I'm a designer assisting with some production assets in Android Studio.

We started experiencing the same issues with some of our vector drawables from 22 moving up to 24.

(I updated my project to use Nexus 6 API 23 and compile Version 24, build version 24, target SDK 24. Then my drawables appeared to be closing paths and adding fills similar to what is happening above.)

Tried

I have access to Adobe Illustrator CC (19.2.1) and have been exploring various path options on an object with a stroke. Everything from expanding paths to fills, combining paths, making compound paths, closing paths, etc. with no luck.

Converter Options

The online SVG to Drawable Converter (http://inloop.github.io/svg2android/) has an option, "Bake transforms into path (experimental)," and I selected that and although it improved the rendering, it was NOT perfect still.

Potential Solution

Then I went into Illustrator again and tried "Save As" SVG vs. "Export" as SVG. I'm not sure what Adobe Illustrator's differences are between the two settings, but they do spit out slightly different SVG XML data.

I then took the new "Save As SVG" and dropped it into this online Drawable Converter: http://inloop.github.io/svg2android/

And had these options checked:

  • Remove empty groups without attributes
  • Bake transforms into path (experimental)

The new Drawable XML it returned appears to be working and rendering correctly.

I'm not sure if this will work with other vector graphics that have strokes, shapes and fills, but thought I would share my experience. This is not a real solution, since it appears to be a bug in the new Android SDK, and it had supported it before, but it may be a possible temporary work around for some people.

Patrick Hansen
  • 221
  • 1
  • 2
  • I can confirm this worked for me with Illustrator CC 20.1.0. It made my day! – Pedro Loureiro Oct 17 '16 at 03:48
  • 2
    I confirm that even without using http://inloop.github.io/svg2android/, the "sa ve as" of Illutrator genrates fine svg but "export" don't. – Nicolas Massart Jan 16 '17 at 11:50
  • I can confirm that this worked for me with http://inloop.github.io/svg2android/. Thank you so much! Devices affected were Android Studio emulators and Samsung devices (even on Marshmallow). – Tiffany Jul 27 '17 at 18:39
  • The tool is now deprecated and Android Studio does not render vectors with rounded edges well in API 23 – galaxigirl May 27 '19 at 14:03