CODEWITHSUNDEEP
androidsvg
kirtan403
kirtan403

Reputation: 7411

Android SVG for multiple sizes?

I am currently using PNGs for standard 24dp size. However, I needed some icons larger than 100dp. So I found it would be better to use SVG instead of large size PNGs.

(Using gradle 2.0, Android support lib 23.3)

One icon is of a normal share icon. Previously I used, ic_share_white_24dp.png for showing a share button on the ActionBar. I needed to use a large sized Share icon so I used Vector Asset Studio to import Material SVG Share icon. It looked like this after importing:

filename: ic_share_white_48px.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z" />
</vector>

I changed width and height to 100dp. The reason behind this is when this is used below API LOLLIPOP, PNGs are generated and are scaled when showing at 100dp. So, I changed 24dp to 100dp, so that Android Studio can generate 100dp PNGs.

Now, I also want to use this SVG on an Action Bar too. Should I create a new xml with height and width set to 24dp? Or this will work just fine down scaled without any performance issues? What is the best method to work with multi-sized images?

Most importantly, Am I missing some basics of understanding?

Upvotes: 2

Views: 1179

Answers (1)

Ashwini Bhat
Ashwini Bhat

Reputation: 500

http://fontastic.me/

Here is a site where you convert SVG in .ttf file and generating Unicode. put that in asset/fonts folder & Unicode in Value folder(icons.xml) give string name for particular icon.

example: <string name="icon_info">&#xf129;</string>

use this string in textView

<TextView
 android:id="@+id/icon_info"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/icon_info"
 android:textColor="@color/black"
 android:textSize="40dp" />

And in .java file

icon_info=(TextView)findViewById(R.id.icon_info);
 Typeface font = Typeface.createFromAsset(this.getResources().getAssets(), "fonts/icons.ttf");
icon_info.setTypeface(font);

Upvotes: 4

Related Questions