I am looking to use these icons in my app
http://developer.android.com/design/downloads/index.html
But the problem is that these are only available in small sizes(~64x64) and if i try to expand it using some online tools, then they become very blurry. Is there any way to get these icons in 256x256 size or enlarging these icons but without blurring?
Thanks
It IS possible. But it requires some work.
The icons are distributed with an .ai file (like All_Icons.ai), which the extension for Adobe Illustrator image file.
Each icon is in its own layer in that file.
Adobe Illustrator is a vector image software, I mean it's not a bitmap image, so it can be enlarged without losing quality to any size.
However, it also means you need a software that can handle .ai file.
If you have Adobe Illustrator, open the .ai file, and find the layer that you want, go to layer menu and select "hide other layers", and save the image for web. In the saving for web dialog, you can select the image size for png, jpg, or gif file. (you can change the color or opacity if you need)
There is an accompanying .ai (Adobe Illustrator) file which has Vector images for all the .png's that are included in the various downloads. And since they are Vectors, you can resize them to your liking without worrying about distortion or pixelation.
Alternatively, you can generate your image resources using the Android Asset Studio, specifically, the Generic Icons option in the Android Asset Studio. They use the same Icons that you find on the Android Downloads page. I haven't compared if they are the exact number of images though.
A note about the Android Asset Studio (Generic Icons) though. You can only generate image resources in dp sizes and not px as you want them to be. That can be mitigated by using this converter here: http://labs.rampinteractive.co.uk/android_dp_px_calculator/
In my opinion you can't enlarge smaller images, this will always result in the loss of quality. Try finding similar images with 256x256 resolution.
Related
I got Lottie files from the designer and it contains png files.
The size are small. However, it seems low quality. And I added it into the view and built and launched my app and It looks blurry.
What I guess is, The parts Lottie can't vectorize remains as PNG files. And the others are in json.
Is that right?
If yes, The second question is, Lottie has some functionality to use PNG files like vectorized image source with its connected json file?
I need to correspond the device screens(resolutions). Does json+PNG can correspond all the resolutions or not? If it is not, Should I separate them and for the PNG part, I need mdpi, hdpi, xdpi, ... ones like in Zeplin?
Lottie Library supports PNG files but I think your designer made a mistake, it's better to use Vectors ONLY Lottie cannot convert PNG images into the vectors, so you have to include them into your project
Lottie has some functionality to use PNG files like vectorized image source with its connected JSON file?
NO
Lottie doesn't make the PNG vectorized. However, your animation will run normally just like it's demo, there is no problem with functionality. Since it is not vectorized, the image can look blurry or broken.
I need to correspond the device screens(resolutions). Does json+PNG can correspond all the resolutions or not? If it is not, Should I separate them and for the PNG part, I need mdpi, hdpi, xdpi, ... ones like in Zeplin?
NO
I think you will be in trouble with multiple screen resolutions, after all, the PNG is just a PNG
For using images in my android application, I will use this technique :
I put all of my images into "drawable-xhdpi" folder to let the application scale the images down for various resolutions.
I wondering does it make sense ? What is your experiences ?
Thanks for sharing...
UPDATE:
Maybe this method is a nice one, But an another question raises here which is :
Does this technique causes a memory leak for ldpi devices? I don't want to solve the problem by using svg images, Suppose there are bit-mapped images which are not vector based and there is no choice or alternative to replace. using a bitmap is the only choice.however using this method has a cons which will affect the overall layout and in some devices the position of relevant controls will be changed.
While this will work, it's not ideal and not recommended. Please look at the official documentation for Supporting Multiple Screens:
Although the system performs scaling and resizing to make your application work on different screens, you should make the effort to optimize your application for different screen sizes and densities. In doing so, you maximize the user experience for all devices and your users believe that your application was actually designed for their devices—rather than simply stretched to fit the screen on their devices.
And:
Provide different bitmap drawables for different screen densities
By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and Nine-Patch drawables (.9.png files) so that they render at the appropriate physical size on each device. For example, if your application provides bitmap drawables only for the baseline, medium screen density (mdpi), then the system scales them up when on a high-density screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should include alternative versions at different resolutions for different screen densities.
You can use the File / New / Image Asset to automatically generate the scaled assets.
Best way is use SVG files instead of PNG and import them to project in Androis studio: File -> New -> Vector Asset or use icon fonts like https://github.com/mikepenz/Android-Iconics
SVG file is inserted to drawable and converted to PNG files while compile time for back compatibility, but you don't need to maintain a pack of files, but just one vector file.
I use inkscape to create svg drawings and also to convert to png I think the conversion has better quality and supports all svg functions.
With inkscape and a script it is possible to do batch conversion, I have not tried it yet, until now I convert them one by one
i seen some tools on github and now vector drawables in Lolipop allow you use svg files. One major advantage i find is that svg files should stretch and keep proper scaling thus looking sharp after stretching. Now with svg files i can keep all my images in the drawable folder instead of filtering them out by density. This makes the apk file smaller which is desirable.
Question: Would there be any reason i would not want to take my current PNG images in native android project and convert them to svg files with for example an online converter tool like vector magic ?
There are several reasons that you would not want to do this.
First, vector drawables are only supported on Android 5.0+. If you are only targeting Lollipop and above, this won't be an issue, but you will still need PNGs for older versions of Android.
Second, converting raster to vector will in most cases yield poor results. Instead, you should start by creating the original assets as vector images in a program like Illustrator. Then export to SVG for conversion to VectorDrawable format and export to PNG for the DPI buckets you'd like to support on pre-5.0 devices.
I have some background images that have been designed using Photoshop. I did the same image using Illustrator that uses vector graphics, but when deployed the image did not scale very well. Sometimes too big or small. From experimenting, the photoshop images looked much better, even though it used raster images.
I have set the layout background property to this:
android:background="#drawable/camera"
I have just a few questions:
What is better for creating background images, photoshop (raster) or Illustrator (vector)?
As all smart devices are different dpi's and sizes. Is what recommended size should I create the original image when designing it in photoshop or Illustrator?
I noticed that asset studio can create scalable images but can the icon launcher be used for background images, or is it only for launcher icons?
Android Studio 0.5.4
This depends on what your final image should look like or which
tool is better suited for your needs. PS is more suitable to create
pixel graphics and IL is better used for shapes, buttons and so on. In the
end it doesn't matter for android, because internally graphics are
interpreted as bitmaps and therefore are pixel-based. Android
unfortunately doesn't support SVG by default, although there are libs
available.
You should have a look at the supported screens range
http://developer.android.com/guide/practices/screens_support.html#range
You can't really create background images that fit every screen but at least you can approximate them, so only some parts of the image are cut off eventually. Alternatively you can use 9drawables to stretch an image to fit every screen. In that case you will need an image with stretching marks as described here: http://www.vogella.com/tutorials/AndroidDrawables/article.html#drawables_9patch
Asses Studio is best used for Icons. However you could use it for generating the above mentioned 9drawables in the correct sizes: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
I am developing an app which has a lot of images to work on due to which the size of my app has become very large. I want to compress or something like that to reduce the size of app. Any idea?
.png-files which are placed in the res/drawable are automatically optimized when compiling your app:
Bitmap files may be automatically optimized with lossless image
compression by the aapt tool during the build process. 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.
That being said, you have some more options to try. There is a good talk on this topic from Google I/O 2016 called "Image Compression for Android Developers", which outlines the possibilities, explains their up and downsides and gives some general best practices.
If the size of your application is to high to be published on the market, you'll can either
ship your app without the images and load them from the internet to the phones SD-card when the app is first started
Use Androids own APK Extension Files, which is basically the same but you don't have to do everything yourself.
Use pngquant or posterizer to reduce size of PNG images (these tools are lossy, but give significant savings).
You can also optimize them with PNGOUT, which is one of the best lossless optimizers.
I've written Mac GUI for those.
Always use PNG (.png) images.
And compress it online by uploading your images to
https://tinypng.com/
Simple and sober, always work. You are welcome. :)
There is also a better way to use AndEngine, it saves you from making layout for each phone. And there is no need to use different images for different dpi phones.
Do you use 9-patches for backgrounds? Also you can use imagemagick or anything similar to compress a batch or images.
Try and use ".png".
Use 9-patch images for backgrounds.
If you have title bars, headers with vertical gradients, always use 1-pixel width gradient images. This is a super saver.
If you manage to get hold of Photoshop, they have the option to save images for web/mobile devices. Helps in making really small sized images with good quality.
If u r supporting multiple devices, maintain different versions of the images only for those that are really necessary.