1

In android I have few icons for bottom navigation view in xml form but the problem is the size of practice icon is small and discuss and add look great and Q & A is OK but not that good . Let me show you the image how it looks.

enter image description here

The xml data for practice icon is:

  <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="2000" android:viewportHeight="2000" android:width="2000dp" android:height="2000dp">
    <path android:pathData="M688.6 464.4c31.1 9.6 59.5 23.2 80.1 50.1 31.6 41.4 34.9 98.5 7.5 143.6 -27.4 45.2 -79.8 68.6 -132.7 59.2 -49.9 -8.9 -92.6 -52 -101.4 -102.3 -11.8 -67.8 30.5 -131.8 97.4 -147.5 2.9 -0.7 5.6 -2.1 8.4 -3.2 13.6 0.1 27.1 0.1 40.7 0.1z" android:fillColor="#abacac"/>
    <path android:pathData="M1721.4 1050.4c-63.6 0.9 -127.2 0.3 -190.8 0.3 -5.7 0 -11.4 0 -16.7 0 -0.7 -1.8 -1.6 -3.2 -1.3 -3.5 9.8 -12.3 14.2 -25.3 5.6 -40.2 -8.2 -14.2 -21.6 -16.6 -36.3 -16.4 -10.8 0.1 -21.6 0 -34.6 0 3.3 -7.6 5.5 -13.2 8.2 -18.6 39.5 -80.2 79.1 -160.3 118.6 -240.5 13.9 -28.1 8.4 -43.2 -20.6 -55.2 -128.5 -53.5 -257.2 -106.5 -385.6 -160.4 -29.8 -12.5 -58.8 -11.8 -87.9 -0.1 -46.8 18.9 -83.5 50.4 -111.7 91.9 -9.8 14.5 -6.7 25.2 8.8 32.8 16.7 8.1 33.7 15.8 50.2 23.4 -6.4 40.8 2.7 63.7 29.6 76.6 27.5 13.2 50.6 5.4 78.7 -27 14.8 6.6 29.9 13.4 45.1 20.2 23.5 10.6 31.7 7.1 37.3 -18.6 3.9 -17.7 6.6 -35.9 7.3 -54 0.7 -17.5 -1.7 -35.1 -2.9 -55.2 94.5 39.8 188 79.1 282.7 118.9 -1.6 4.3 -2.6 8.1 -4.3 11.6 -39.7 80.7 -79.7 161.2 -119.1 242 -4.6 9.4 -9.8 12.8 -20.1 12.4 -20.3 -0.8 -40.6 -0.2 -61 -0.3 -15.2 -0.1 -29.3 1.9 -37.4 17.1 -8 14.8 -3.8 28 8.1 41.7 -38.2 0 -74.1 0 -110.9 0 3.3 -6.1 7.5 -11.5 9.3 -17.6 6.5 -22 -9.7 -40.8 -35.7 -41.1 -42.2 -0.3 -84.4 -0.5 -126.6 0.1 -11.2 0.2 -17.4 -1.9 -21.8 -13.7 -6.4 -16.9 -20 -27.9 -38.2 -31.3 -10.2 -1.9 -15.8 -7.1 -20.2 -16.4 -13.9 -29.6 -28.6 -58.9 -43.2 -88.2 -10.6 -21.3 -27.7 -28.6 -45.4 -19.7 -17.1 8.6 -21.6 27.3 -11.4 48.4 9.5 19.6 19.2 39 30.4 61.7 -23.1 -3 -43.4 -5.5 -63.7 -8.3 -9.3 -1.3 -18.5 -4.3 -27.7 -4.2 -27.4 0.2 -47.8 -12.7 -67.2 -30.5 -30.5 -28 -62.6 -54.2 -92.5 -83.6 24 11.5 48 22.9 72.5 34.6 1.8 -45 -39.4 -88.6 -85.3 -90.4 -33.8 -1.3 -67.8 -1.7 -101.6 -0.7 -49.4 1.4 -89.3 37.9 -91.4 87.2 -2.4 58.8 -0.7 117.7 -0.6 176.6 0.1 47.4 1.7 94.9 0 142.3 -1.8 51.1 15.6 89.2 63.9 112.6 -34.9 0 -69.8 0.3 -104.7 -0.5 -2.8 -0.1 -7 -7 -7.8 -11.2 -17.1 -86.1 -33.9 -172.3 -50.7 -258.5 -9.5 -49 -18.9 -98 -28.7 -146.9 -5.4 -26.7 -22.9 -40.2 -52.5 -41.7 -21.2 -4.1 -52.2 17.5 -52.2 17.5l13.5 66.8c0 0.3 0 0.6 0 1 7.3 34.4 53.5 261.8 60.5 296.3 8.8 43.8 16.8 87.7 25.6 131.5 5.3 26.5 23.4 40.7 51 40.8 41.6 0.1 83.1 0 126.8 0 0 12.5 0 23.7 0 35 0 39.6 -0.5 79.2 0.3 118.7 0.2 10.5 -3.6 15.6 -12.3 20.3 -42.1 22.6 -83.9 45.8 -125.8 68.8 -32.2 17.7 -35 37.5 -9.1 63.4 9.4 0 18.8 0 28.1 0 48.4 -27 96.7 -54.1 145.2 -80.8 2.6 -1.5 7.5 -1.6 10.1 -0.2 48.4 26.8 96.7 53.9 145 81 9.4 0 18.8 0 28.1 0 26.6 -23.4 23.9 -45.6 -7.9 -63 -41.9 -23 -83.6 -46.2 -125.7 -68.8 -9.2 -5 -13.4 -10.5 -13.2 -21.6 0.7 -45.8 0.3 -91.6 0.3 -137.4 0 -4.5 0.6 -9.1 1 -15.4 25.1 0 49.5 0 73.8 0 21.3 0 42.7 -0.3 64 0.1 20.3 0.4 35.7 -8.1 44.4 -26 8.9 -18.2 7 -36.3 -6.3 -52.5 -1.2 -1.5 -2.2 -3.2 -4.6 -6.9 10.5 2.5 18.9 5.5 27.5 6.2 11.2 0.9 13.2 6.6 13.1 16.5 -0.4 43.7 -0.2 87.4 -0.2 131.2 0 51 1 102.1 -0.3 153 -1 39.5 12.2 68.7 49.8 84.6 13.6 0 27.1 0 40.7 0 37.4 -16.2 49.8 -45.6 49.4 -85.1 -1.1 -113 -0.4 -226.1 -0.4 -339.1 0 -49.9 -17.3 -71.5 -66.3 -83.1 -34.4 -8.1 -68.7 -16.2 -103.1 -24.4 -4.5 -1.1 -8.8 -2.5 -13.7 -4 0 -15.7 -0.7 -30.8 0.2 -45.8 0.8 -12.3 -3.2 -21.6 -11.1 -30.9 -37.3 -44.1 -74.1 -88.7 -110.9 -133.2 -1.5 -1.8 -2.5 -3.9 -1.8 -7.7 29 24.8 57.8 49.9 87.1 74.3 18.2 15.2 34.1 33.9 59.9 37.3 53.6 7.1 107.1 14.9 160.6 22.5 1.8 0.3 3.7 0.6 9.4 1.5 -26.1 12.6 -37.3 31.1 -30.4 55.8 8.4 30.2 34.2 32.6 62 30.9 0 7.6 0 13.7 0 19.8 0 150 0.3 300.1 -0.3 450.1 -0.1 26.8 7.1 47.7 31.2 61.1 11.5 0 22.9 0 34.4 0 23.7 -12.8 31.5 -32.9 31.4 -59.4 -0.7 -150.6 -0.3 -301.2 -0.3 -451.9 0 -6.1 0 -12.2 0 -19.1 6.9 -0.3 12 -0.7 17.1 -0.7 195.4 0 390.9 0.1 586.3 -0.4 15.2 0 19 4.2 18.9 19.1 -0.6 150.1 0.2 300.2 -0.8 450.3 -0.2 26.7 6.3 47.6 29.3 62 11.5 0 22.9 0 34.4 0 23 -11.4 32.1 -29.5 31.9 -55.4 -0.7 -151.4 -0.3 -302.9 -0.3 -454.3 0 -6.2 0 -12.4 0 -20.9 27.8 2.1 51.1 -4.4 62.2 -32.4 0 -7.3 0 -14.6 0 -21.9 -10.2 -24.8 -29.4 -33.3 -55.7 -33z" android:fillColor="#abacac"/>
</vector>

The xml data for Q & A icon is:

   <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="128dp"
    android:height="128dp"
    android:viewportWidth="128"
    android:viewportHeight="128">

    <group
        android:translateY="128"
        android:scaleX="0.100000"
        android:scaleY="-0.100000">
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M888 1263 c-9 -10 -34 -54 -56 -98 -22 -44 -51 -100 -65 -124 l-25 -43 0 35 c0 48
-18 76 -59 93 -44 19 -83 11 -117 -23 -30 -30 -35 -90 -11 -127 32 -49 113 -58 158
-18 19 17 19 17 4 -15 l-17 -31 -114 -4 c-144 -4 -154 -10 -221 -140 -43 -84 -48
-100 -39 -125 l9 -28 128 -3 127 -3 12 26 c8 19 8 31 0 50 -11 23 -17 25 -77 25
-36 0 -65 2 -65 5 0 2 8 20 17 40 18 38 33 46 33 16 0 -15 10 -20 45 -25 59 -9 89
-45 82 -98 l-5 -38 69 0 69 0 0 101 0 101 105 203 c58 111 105 211 105 222 0 42
-62 60 -92 26z" />
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M136 555 c-9 -23 4 -45 30 -51 l24 -6 0 -237 c0 -253 1 -261 50 -261 49 0 50 8 50
262 l0 238 350 0 350 0 0 -231 c0 -140 4 -238 10 -250 12 -22 59 -26 78 -7 9 9 12
78 12 249 l0 237 24 6 c26 6 39 28 30 51 -5 13 -71 15 -504 15 -433 0 -499 -2 -504
-15z" />
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M400 301 c0 -142 3 -171 16 -182 11 -9 20 -10 32 -2 15 9 17 34 20 182 l2 171 -35
0 -35 0 0 -169z" />
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M510 272 c0 -180 2 -200 18 -215 24 -22 65 -21 85 1 15 16 17 46 17 215 l0 197 -60
0 -60 0 0 -198z" />
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M650 272 c0 -180 2 -200 18 -215 24 -22 65 -21 85 1 15 16 17 46 17 215 l0 197 -60
0 -60 0 0 -198z" />
        <path
            android:fillColor="@color/greyish"
            android:strokeWidth="1"
            android:pathData="M810 301 c0 -142 3 -171 16 -182 11 -9 20 -10 32 -2 15 9 17 34 20 182 l2 171 -35
0 -35 0 0 -169z" />
    </group>
</vector>

Is there anything you know that I can alter to xml files of two icons such that they look great like the middle ones. Thank you

  • 1
    Your issue is with the complexity and size of the icons. There's too much "information" for a container that small. – Alin Nov 22 '17 at 12:52
  • @Alin So anything can't be done on it ? – Kartik Watwani Nov 22 '17 at 12:57
  • Not much, you would be better off choosing other icons. That's the only way. – Alin Nov 22 '17 at 13:07
  • Not sure if you are aware of this but there's some scaling going on in your second example, that isn't present in the first. Also the Q&A icon is inverted, and reflected vertically, and different sized viewports – Billy Kerr Nov 22 '17 at 14:06
  • @BillyKerr I knew about it. I have just copied one from internet and other someone has provided me. I know they have different viewports and I might have tweaked it just to increase size. Although I think 24 dp of viewport is required for icons because between two icons have 24dp view port and width and height. But when using 24dp viewport for practice image is not showing up. I can't infer what does inverted and reflection Q&A do and how to alter that. Can I use scaling in Practice icon to make it look bigger ? – Kartik Watwani Nov 22 '17 at 14:26
0

Basically, there's some scaling in the XML (Q & A icon) that isn't present on the first icon. Also both have different size view ports, plus the Q & A icon has also been rotated and reflected.

So my guess is that the transforms and different viewport sizes are just messing everything up.

What you can do is copy and paste those vector paths into an SVG, then open them in Inskcape - make sure they are the same size, resize the page to fit the icon, then export each icon as a Plain SVG, then use them in Android Studio.

This means there will be no scaling or transforms to mess up.

The OP also had some problems with some unsupported SVG features in Android Studio, namely stroke-width attributes, and Defs tags in the SVG. So the answer was simply to delete these.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.