Search code examples
androidandroid-studiosvgvector-graphicsandroid-vectordrawable

use coloured vector image in android studio

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

  1. 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.

  2. I tried implementing an api "caverock:androidsvg:1.2.1" it gave an error in its own caverock custom Imageview and then become useless.

  3. 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.

  4. 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

Solution

  • 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>