From the course: Android Development Essential Training: Your First App with Kotlin

Convert PNG and SVG image files - Android Tutorial

From the course: Android Development Essential Training: Your First App with Kotlin

Start my 1-month free trial

Convert PNG and SVG image files

“

- [Instructor] Android supports traditional web-based image formats such as JPG or PNG. But there are some more contemporary formats that it also supports that you might want to use. The WebP format is also a bitmap format, but it's compressed smaller than PNG files. And if your application has a minimum SDK of API level 18 or later, that's Android 4.3, then you can also support transparency. It's very easy to convert your existing PNG and JPG files. I'll right click on my PNG file in my resources directory and then down at the bottom of the menu, I'll choose Convert to WebP. Make sure that you've deselected the option to skip images with transparency, because this image does have transparency. And then click OK. And you'll see a preview of how your image will be converted. Notice that the resulting image will be much smaller than the original and you can adjust the quality to get the results you want. I'll click Finish and there's my new WebP file. And it looks exactly the same as the original. Back in my layout file, I don't have to make any changes. Because remember that the resource ID only references the beginning of the file name and not the file extension. I'll run the application to make sure that the application looks and behaves the same. And there's the result. My image appears and it's exactly the same format as the original PNG file. Now if you like, you can also use an XML format, known as a VectorDrawable. This is similar to traditional SVG files that work on the web. But Android doesn't support SVG. You have to convert those files using a tool in Android Studio called the Android Asset Studio. Now in my project scope, I'll show that I've included these SVG files. Now double click to open the SVG file. And Android Studio successfully previews it. But again I wouldn't be able to use this file directly. So I'll go back to the Android scope. And I'll go the app module and right click and then choose New, Vector Asset. I'll browse and locate my SVG files. And I'll choose that file. And then I have a couple of options. I can set the size to a square aspect ratio. In an image like this, that originally wasn't square, that would distort the image. Alternatively, I can click the Override checkbox and then the image will look the same as it did before. I'll click Next and Finish. And that creates the new file that's now called ic_monster01.xml. To make sure that that file's been registered, I'll select Build, Make Project. Then I'll go back to my layout file and I'll change the file that I'm looking at from monster01 to ic_monster01 I look at that in Design view and see that Android Studio recognizes the format and then I'll run the application on my device to make sure that everything still works as it did before. VectorDrawables aren't any smaller than the WebP format. In fact, in many cases they're larger. But they're more flexible in that as vector graphics, they automatically adjust to the size and pixel density of your screen, without distorting the images as bitmaps might. These two formats, WebP and VectorDrawables give you a lot of flexibility, allowing you to choose between the smallest possible file or the one that resizes most elegantly.

Contents