use coloured vector image in android studio

Question

I want to use Colored svg images on my apps footer, but I am getting two problems:-

I am able to use the images but only after I make a xml through "Image asset" option. When I apply that image the color is changed to black,the text written in the image is not supported and sometimes it is also auto-filled in some areas.
I tried implementing an api "caverock:androidsvg:1.2.1" it gave an error in its own caverock custom Imageview and then become useless.
I got some jar file as well "svg-android-1.1.jar" through this thread How to use SVG image in ImageView but my footer in a xml which has no java file so i am not sure how to implement the code.
If they are not svg. Please tell me what they are and how can I start.

The current images that I am using in application are png which get pixelated, all I need is some sharp icons which can enhance the look and feel of my home screen.

An ideal reference is the PayTm app's home screen (attached with this question). Please suggest something.

Thank you for your time I need the icons like in this image which I can use in my android application

you can use color svg simply. I'm using in my application.. just download svg icon and right click on `drawable>new>vector asset`. and import that svg. and put it to your image view as `android:src`. you don't need to use any library for that — Abhishek Singh, Apr 27 '17 at 05:48
@AbhishekSingh thank you for your reply i tried the same thing I have a normal smiley image in svg (made by a designer) when i import it it fills the whole circle and removes the text in the importing window only then shows the same thing while executing. — tech office, Apr 27 '17 at 06:16
post your svg file so that I can try and check what the real problem — Abhishek Singh, Apr 27 '17 at 07:20
[link](https://drive.google.com/drive/folders/0B98IbtbtNtLdaFJRdVNMNjVoZVk?usp=sharing) Image 1 is the screen shot for when i import image, smiling is the svg file i am trying to implement. — tech office, Apr 27 '17 at 07:28
@AbhishekSingh I have posted the svg file please have a look. — tech office, Apr 27 '17 at 10:48
check my answer. will be helpfull for you. your designer need to create svg more correctly — Abhishek Singh, Apr 27 '17 at 11:15
@AbhishekSingh It worked..Thank you so much Abhishek..for your help...you are a life saver..can you please tell me what did you do correctly while creating the image so that i can tell the designer as well. He designed this image through Adobe Illustrator. — tech office, Apr 27 '17 at 12:01
Your designer took white board to draw image. it should be transparent board or some shape (if background needed) as board with fill color. I don't know much about Adobe Illustrator. So I give your image to my designer he done this. he used Adobe Illustrator. so main concept is no background if an background needed the use some shape with fill color as path — Abhishek Singh, Apr 27 '17 at 12:15
@AbhishekSingh ok i have shared this post with the designer he is working on it . Thank you so much abhishek once again for your help. Thanks a ton. — tech office, Apr 27 '17 at 12:29
@AbhishekSingh Hi Abhishek ,me and my designer both tried to create that image but we are nowhere (we also tried the white/transparent board but still it din't worked) , can you please give us a lead so that we can move atleat a step ahead.. — tech office, May 01 '17 at 06:14
bro I just opened your svg in illustrator and pressed ctrl+shift+D to make is transparent and saved again after that file is working — Abhishek Singh, May 01 '17 at 06:36
Thank you @AbhishekSingh and the Designer guy the problem still remains as my designer has tried many solutions but we are not able to generate a proper image as it still gets modify after i import it through my ide.. — tech office, May 01 '17 at 11:36
@AbhishekSingh thanks for your help but we have many icons we might consider some other plan (may be creating multiple SVGs)..But still thank you very much for your help....it was nice talking to you.. — tech office, May 01 '17 at 12:35
you can create png image of same image with size of `48 × 48 (mdpi) 72 × 72 (hdpi) 96 × 96 (xhdpi) 144 × 144 (xxhdpi) 192 × 192 (xxxhdpi)` it will auto adjust like svg. you can refer this link to understand [drawables](http://stackoverflow.com/questions/10517389/android-understanding-drawable-folder) — Abhishek Singh, May 02 '17 at 05:04
@AbhishekSingh i applied multiple pngs with the same dimensions its working great thanks a lot for your help it almost like svg only...Thanks a ton for your time :)... And designer friend as well thank you :) — tech office, May 03 '17 at 04:36

score 0 · Accepted Answer · answered Apr 27 '17 at 11:12

I have checked your Svg and there is somthing wrong in your svg. So I recreated svg and imported in my drawable. use this xml directly as drawable. its generated by SVG

ic_smile_new.xml

<vector android:height="24dp" android:viewportHeight="256.0"
    android:viewportWidth="256.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#2A2853" android:pathData="M125.3,159.6C82.68,159.6 48,124.92 48,82.3C48,39.68 82.68,5 125.3,5s77.3,34.68 77.3,77.3C202.6,124.92 167.92,159.6 125.3,159.6zM125.3,6C83.23,6 49,40.23 49,82.3c0,42.07 34.23,76.3 76.3,76.3c42.07,0 76.3,-34.23 76.3,-76.3C201.6,40.23 167.37,6 125.3,6z"/>
    <path android:fillColor="#2A2853" android:pathData="M102.11,55.73m-12.07,0a12.07,12.07 0,1 1,24.15 0a12.07,12.07 0,1 1,-24.15 0"/>
    <path android:fillColor="#2A2853" android:pathData="M158.63,58.63m-12.07,0a12.07,12.07 0,1 1,24.15 0a12.07,12.07 0,1 1,-24.15 0"/>
    <path android:fillColor="#2A2853" android:pathData="M161.32,109.66c-19.32,19.8 -50.23,19.32 -69.07,-0.48c-2.9,-2.9 -7.24,1.45 -4.35,4.35c21.25,22.22 56.51,22.22 77.77,0.48C168.57,111.11 164.22,106.76 161.32,109.66L161.32,109.66z"/>
    <path android:fillColor="#F6BE19" android:pathData="M183.26,48.97h-1.93c-2.41,-6.76 -10.63,-7.24 -20.29,-7.24c-1.45,0 -2.9,0 -3.86,0c-1.45,0 -2.9,0 -3.87,0c-9.66,0 -17.87,0.48 -20.29,7.24h-8.69c-2.41,-6.76 -10.63,-7.24 -20.29,-7.24c-1.45,0 -2.9,0 -3.86,0c-1.45,0 -2.9,0 -3.86,0c-9.66,0 -17.87,0.48 -20.29,7.24H74.1c-2.9,0 -5.31,2.41 -5.31,5.31c0,2.9 2.41,5.31 5.31,5.31h1.45c2.42,11.59 12.56,20.29 24.63,20.29c12.07,0 22.7,-8.69 24.63,-20.29h7.73c2.42,11.59 12.56,20.29 24.64,20.29c12.07,0 22.7,-8.69 24.63,-20.29h1.45c2.9,0 5.31,-2.41 5.31,-5.31C188.58,51.39 186.16,48.97 183.26,48.97zM111.29,67.33H88.11c-0.48,0 -1.45,0 -1.93,-2.9h26.57C112.26,67.33 111.78,67.33 111.29,67.33zM91.49,70.22h15.46c-2.41,0 -4.83,1.93 -7.73,1.93C96.32,72.16 93.9,70.22 91.49,70.22zM115.16,62.01H83.28c-0.48,-2.9 -0.48,-1.93 -0.48,-2.9h33.33C115.64,60.08 115.64,59.6 115.16,62.01zM168.29,67.33h-23.19c-0.48,0 -1.45,0 -1.93,-2.9h26.57C169.74,67.33 169.26,67.33 168.29,67.33zM148.97,70.22h15.46c-2.41,0 -4.83,1.93 -7.73,1.93C154.28,72.16 151.38,70.22 148.97,70.22zM172.64,62.01h-31.88c-0.48,-2.9 -0.48,-1.93 -0.48,-2.9h33.33C173.12,60.08 173.12,59.6 172.64,62.01z"/>
    <path android:fillColor="#F6BE19" android:pathData="M143.65,63.94h-7.73V56.7h7.73V63.94zM136.89,62.98h6.28v-5.8h-6.28V62.98z"/>
    <path android:fillColor="#F6BE19" android:pathData="M147.04,70.22h-7.73v-7.24h7.73V70.22zM139.79,69.26h6.28v-5.8h-6.28V69.26z"/>
    <path android:fillColor="#F6BE19" android:pathData="M155.73,75.54h-7.73v-7.24h7.73V75.54zM148.48,75.06h6.28v-5.8h-6.28C148.48,68.78 148.48,75.06 148.48,75.06z"/>
    <path android:fillColor="#F6BE19" android:pathData="M166.36,75.54h-7.73v-7.24h7.73V75.54zM159.11,75.06h6.28v-5.8h-6.28V75.06z"/>
    <path android:fillColor="#F6BE19" android:pathData="M173.12,69.74h-7.73v-7.25h7.73V69.74zM165.87,68.78h6.28v-5.8h-6.28V68.78z"/>
    <path android:fillColor="#F6BE19" android:pathData="M176.98,63.46h-7.73v-7.24h7.73V63.46zM169.74,62.98h6.28V56.7h-6.28V62.98z"/>
    <path android:fillColor="#F6BE19" android:pathData="M86.18,63.94h-7.73V56.7h7.73V63.94zM78.93,62.98h6.28v-5.8H78.93V62.98z"/>
    <path android:fillColor="#F6BE19" android:pathData="M89.56,70.22h-7.73v-7.24h7.73V70.22zM82.31,69.26h6.28v-5.8h-6.28V69.26z"/>
    <path android:fillColor="#F6BE19" android:pathData="M97.77,75.54H90.04v-7.24h7.73V75.54zM91.01,75.06h6.28v-5.8h-6.28V75.06z"/>
    <path android:fillColor="#F6BE19" android:pathData="M108.88,75.54h-7.73v-7.24h7.73V75.54zM101.63,75.06h6.28v-5.8h-6.28V75.06z"/>
    <path android:fillColor="#F6BE19" android:pathData="M115.64,69.74h-7.73v-7.25h7.73V69.74zM108.39,68.78h6.28v-5.8h-6.28V68.78z"/>
    <path android:fillColor="#F6BE19" android:pathData="M119.5,63.46h-7.73v-7.24h7.73V63.46zM112.26,62.98h6.28V56.7h-6.28V62.98z"/>
    <path android:fillColor="#2A2853" android:pathData="M59.64,173.34h5.88v40.64H85v4.94h-25.36V173.34z"/>
    <path android:fillColor="#2A2853" android:pathData="M120.03,202.28c0,12.1 -8.39,17.38 -16.3,17.38c-8.86,0 -15.69,-6.49 -15.69,-16.84c0,-10.95 7.17,-17.38 16.23,-17.38C113.67,185.44 120.03,192.27 120.03,202.28zM94.06,202.62c0,7.17 4.13,12.58 9.94,12.58c5.68,0 9.94,-5.34 9.94,-12.71c0,-5.55 -2.77,-12.58 -9.81,-12.58S94.06,196.4 94.06,202.62z"/>
    <path android:fillColor="#2A2853" android:pathData="M155.73,186.19c-0.14,2.37 -0.27,5.01 -0.27,8.99v19c0,7.51 -1.49,12.1 -4.67,14.94c-3.18,2.98 -7.78,3.92 -11.9,3.92c-3.92,0 -8.25,-0.94 -10.89,-2.7l1.49,-4.53c2.16,1.35 5.55,2.57 9.6,2.57c6.09,0 10.55,-3.18 10.55,-11.43v-3.65h-0.14c-1.83,3.04 -5.34,5.48 -10.41,5.48c-8.11,0 -13.93,-6.9 -13.93,-15.96c0,-11.09 7.24,-17.38 14.74,-17.38c5.68,0 8.79,2.98 10.21,5.68h0.14l0.27,-4.94H155.73zM149.58,199.1c0,-1.02 -0.07,-1.89 -0.34,-2.7c-1.08,-3.45 -3.99,-6.29 -8.32,-6.29c-5.68,0 -9.74,4.8 -9.74,12.38c0,6.42 3.25,11.77 9.67,11.77c3.65,0 6.97,-2.3 8.25,-6.09c0.34,-1.01 0.47,-2.16 0.47,-3.18V199.1z"/>
    <path android:fillColor="#2A2853" android:pathData="M171.55,176.99c0.07,2.03 -1.42,3.65 -3.79,3.65c-2.1,0 -3.59,-1.62 -3.59,-3.65c0,-2.1 1.56,-3.72 3.72,-3.72C170.13,173.27 171.55,174.89 171.55,176.99zM164.93,218.92v-32.73h5.95v32.73H164.93z"/>
    <path android:fillColor="#2A2853" android:pathData="M180.75,195.04c0,-3.38 -0.07,-6.15 -0.27,-8.86h5.28l0.34,5.41h0.14c1.62,-3.11 5.41,-6.15 10.82,-6.15c4.53,0 11.56,2.7 11.56,13.93v19.55h-5.95v-18.87c0,-5.27 -1.96,-9.67 -7.57,-9.67c-3.92,0 -6.97,2.77 -7.98,6.09c-0.27,0.74 -0.41,1.76 -0.41,2.77v19.68h-5.95V195.04z"/>
</vector>

use coloured vector image in android studio

1 Answers1