I create new project with activity and nav bar.
But, icons at this navigation bar are in XML!
How can i create a new icon and add it instead old icons?
Android has defined its own vector format called VectorDrawable; It works much like SVG, but uses a smaller portion of drawing commands. Although VDs are also using XML as their format, they end up getting compiled into a binary serialization format for distribution in the APK, reducing their overall size. So the savings here is pretty simple, using a VectorDrawable to generate ever resolution of PNGs you need, rather than storing the PNGs directly, can save you a lot of space.
Below URL shows you how to import new images as a vector into your app. https://developer.android.com/studio/write/vector-asset-studio.html
Adding the steps would be a lot here, Hence I have posted the link
Related
After upgrading to 3.0 Android Studio has started to complain about long paths in vector drawables.
The warning says:
Very long vector path (7958 characters), which is bad for performance.
Considering reducing precision, removing minor details or rasterizing
vector. less... (⌘F1) Using long vector paths is bad for performance.
There are several ways to make the pathData shorter: * Using less
precision * Removing some minor details * Using the Android Studio
vector conversion tool * Rasterizing the image (converting to PNG)
The documentation https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html shows us how to use vector drawables in our apps, and recommends it over png's etc.
I have both been using the Android Studio Vector Conversion Tool and this excellent service for converting SVG's to vector drawables:
http://inloop.github.io/svg2android/
Are there other services that does more to reduce vector drawable complexity?
Where can I find guidelines on how 'advanced' my vector drawables can be?
Try optimizing the vector drawable using avocado! It should help reduce the complexity of your paths.
My path was around 1800 and i used svg-path-editor to lower to around 1000. Still showed the warning but quite close to the max 800
I am sure there is a better way to use this tool but i just copied the pathData from android studio xml to the Path box, pressed Round and got the result back to the xml
If your path is more than 2000, consider converting to png (with mdpi, hdpi, xhdpi...)
There's an extra step you can add before using svg2android, which is running it through svgo
An example pipeline that I use looks like (note that instead of the web tool, I'm using svg2vectordrawable)
~$ svgo image.svg --config=config -o image.svg.optimized
~$ s2v "image.svg.optimized image.xml
My config file looks like (you can play around with it to match your needs):
"plugins": [
{
"convertPathData": {
"leadingZero": false,
"floatPrecision": 2
}
}
]
Try to use this tool by decreasing Precision.
This may not be an ideal solution, but Initially I had drawn the vector asset in a single shot as a single object, this resulted in longer <path> problem. I started from scratch again and this time I split my object into many parts i.e. I drew each part of my single object individually and later I grouped them together (I used Inkscape). As a result, when .svg converts to .xml the single <path> tag gets split into multiple shorter <path> tags.
Have a look at this Gist.
Above gist creates a drawable which looks like this:
Clearly in the gist, pathData property has been provided coordinates. How is this achieved, I mean, ofcourse someone doesn't found each point according to his needs.
My question : How is this achieved? Is there any tool present to do so?
Drawable like this reduces app size by avoiding to have an image instead. Also, there are questions for drawables in XML like this, this and many more but I think my Question is very different (and useful, probably).
You can design your SVG files using some tools such as Android Vector Asset Studio
Usually people don't write the SVG paths themselves, they use a tool or an editor where they sketch the drawing and generate the file.
What you have to do is to create a SVG image using an SVG editor such as Inkscape (the one I use)
or if you want a more professional (and expensive) editor you can use Adobe Illustrator. You can even use a tool called svg-edit which is accessible in the browser.
After creating your required art, save your SVG file.
Next goto and open Android Studio.
Right click on the res folder (any folder where drawables are usually placed)
Select New > Vector Asset. This opens the following window.
Select local file
Edit the path to direct it to the location of your svg file
Depending on the complexity of your image, errors may be thrown (not all svg elements get converted to xml. Hence, avoid using complex art in svg, use raster images in that case).
Android studio does some fixes on its own. So even if errors are thrown, if your image renders fine, then you are good to go.
Click Next > adjust a few more settings > Click Finish
Your xml vector asset has been created successfully.
Note:
To ensure backward compatibility, add the following to your build.gradle
android{
defaultConfig{
vectorDrawables.useSupportLibrary = true
}
}
dependencies{
compile 'com.android.support:appcompat-v7:23.2.0'
}
Hope this has helped you.
For more info see the official documentation.
VectorDrawable is a new feature for Android after API Level 21, Which add support for vectorgraph. But I have a question for VectorDrawable, is it suitable for me to replace most of images in my project to VectorDrawable. In the android offical dev site I saw a few words :
A vector drawable is appropriate for simple icons. The material icons provide good examples of the types of images that work well as vector drawables in an app. In contrast, many app launch icons do have many details, so they work better as raster images.
Is that means VectorDrawable is only appropriate for simple icons like offical material icons, images have many details aren't appropriate to use VectorDrawable.
Sorry for my poor english skills, hope you guys can understand me! 😬
I plan to use VectorDrawable for all my project image resource if it is ok.
You're basically right.
Vector images describe shapes and geometry, and need to be rendered into bitmaps (a grid of pixels). This requires some math, calculating the pixels that represent the lines and curves defined by the icon.
The more complicated an icon gets, means the more shapes that are required, and the more calculations that need to be done.
On the other side, if you already have the icon rendered to a specific scale, like with png images, all of the pixel values have already been calculated. Now it just needs to be converted to a bitmap and scaled to the size it gets displayed at.
So depending on the situation, an icon may be able to decode and scale from a png file faster than rendering from a vector drawable, or vice versa, it all depends on the icon.
It's hard to say exactly how simple an icon needs to be, so try it out and make sure it runs well on a range of devices.
I am using the standard code stated in the example of the library of https://code.google.com/p/svg-android/wiki/Tutorial, here is my OnCreate method :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
ImageView imageView = (ImageView)findViewById(R.id.imageViewTest);
// Set the background color to white
imageView.setBackgroundColor(Color.GRAY);
// Parse the SVG file from the resource
SVG svg = SVGParser.getSVGFromResource(getResources(), R.drawable.android);
//Get a drawable from the parsed SVG and set it as the drawable for the ImageView
imageView.setImageDrawable(svg.createPictureDrawable());
}
I am not able to add the layout code here, so sharing it in this doc: https://docs.google.com/document/d/1fbi3B_hAYUh_C2IwPfInvZ-BG2bgsa4pZoJKj8NBT9o/edit?usp=sharing
It does not give any error but it also does not display the image.
I was earlier getting doubts that the image is incorrect, then I used the one in the same example.
Yet it is not displaying the image nor giving any error.
Please suggest how to debug further.
On newer devices have hardware rendering turned on by default so you need to explicitly turn on software rendering.
use this after your code:
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
Your problem is almost certainly hardware acceleration. You may need to set the View LayerType to software mode.
See Having issue on Real Device using vector image in android. SVG-android
If that doesn't fix it, then it may be an issue with svg-android, which can have trouble rendering correctly anything other than simple SVGs. You might have better luck with my library AndroidSVG.
The best practice for SVG on Android is going to be to use a tool to convert your SVG to PNG at the size(s) you're interested in. Existing SVG support for Android is not comprehensive of what you're likely to find in an SVG file, and even if it were, the support is not built into the OS so using them directly is out of source .
If the library you're working with can process the SVGs you have well, you can make it work for every icon but not through the standard Android API; you'll need to create a custom view. Around months ago I used the library you linked and at that time it had trouble with many SVGs I had created in Inkscape or downloaded from various places. Perhaps its support has improved since then, but I recommend testing it with the exact SVGs you plan to use before you write a lot of custom code for it.
I've got a bunch of small two colour png images and I'd like to effectively change one of the two colours to another one. Say RED => BLUE.
I know I can either loop over each pixel or use Bitmap.setXfermode to do this but it feels like a big waste on such a simple problem. What I want to do is to access the header of the file and change it in the colour table directly. This hints that png:s are indexed http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap :
Note: Bitmap files may be automatically optimized with lossless image compression by the aapt tool. For example, a true-color PNG that does not require more than 256 colors may be converted to an 8-bit PNG with a color palette. This will result in an image of equal quality but which requires less memory. So be aware that the image binaries placed in this directory can change during the build. If you plan on reading an image as a bit stream in order to convert it to a bitmap, put your images in the res/raw/ folder instead, where they will not be optimized.
The files I put in the "project" are indexed png images so I know for sure they are in fact indexed and does have a colour table. Will I have to read the files as binary data and manipulate before I make a Bitmap object? I would really prefer if that wasn't the case but there instead is some hidden Bitmap.switchColor (Col1, Col2); which would do just that since I want to be able to switch back or to a third colour.
Please only android related answers and not general ones since I'm only looking for how to do it in android, using android classes.
Thanks in advance