Support Different Pixel Densities. Hello everyone. We will learn how to support different pixel densities while developing Android applications in this video. So, Android devices are amazing. They come in different screen sizes and different pixel sizes. If we look at two different Android devices that have the same screen size, we can see that both of these two devices have different pixel densities. For example, one device has 160 pixels per square inch. Another device has 480 pixels per square inch, but it's in the same screen size. So, that means that if you want to use a picture or an icon in your Android application, you're going to need to consider these different screen densities. Otherwise, your picture icon is not going to look, well, smooth. It certainly won't look the way that you want it to look like in your application, in your Stellar Award winning application.

So, of course, you should avoid this kind of problem, but how are you going to do that? Now, if you want to develop user-friendly and well-designed applications and win those awards, let's figure it out. So, I want to show you in a real time example. So here, there are two devices and these devices have the same screen size, but these devices have different resolutions. So, if you don't consider these differences in the resolution from the very beginning, your pictures may and will look blurry.

Now, sure you can use a low resolution picture or icon in a high resolution device, but your picture is going to look all blocky, blurry, and well, just bad. So, if you want to avoid this problem, let's not use pixels in your measurements. What? Mind blown. So, Android proposes another measurement unit. We will use DPI as a measurement unit. Actually, of course, there are a lot of things but we can speak about pixels and DPI, but you know what, I don't want to confuse the issue here. It does get a little confusing for everybody. But, you just going to know these five sizes, okay. It's going to be enough for you for right now.

So, this is how the system works. When you use a picture or icon in your application, you will use the same picture with five different resolutions. These resolutions are MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI. If you use these five different resolutions in your application, the Android operating system will use the picture in whichever resolution that particular device needs. The Android operating system considers MDPI as a base measurement unit. The other dimensions are determined according to the size. So, I'm going to show you how to resize your images according to these dimensions. There is a table about these measurements and you can study the table. For example, let's look at first MDPI means resources for medium-density screens. ~160 dpi is MDPI. Another one is XXHDPI. It means resources for extra-high-density screens. ~480 is XXHDPI.

Now, you don't have to learn everything on this table. Also, you don't need to know which device has which density either. I mean, unless you really want to. If you put every photo though, if you put every photo that you're going to use in your application with these five different densities, then Android will use necessary photo in the necessary device. So, it takes a lot of the guesswork out. So, I'm going to show you how to do this really easily actually in Android Studio. So, let's go to Android Studio and do some practice.

Alright. So, what do we got here? I've created a new project in Android Studio. The name of the project is Different Pixel Densities. Alright. So now, please allow me to draw your attention to the Project directory. So, in this Project directory, under the res folder, there's a mipmap folder. So, it's in this folder where there's a photo, but with five different versions. The most important thing is all of them have the same name. I mean, like exactly, right? So, one photo, one name; five different version. All of them in the same photo, but they all have different densities. So, I'm going to 'right-click' on this mipmap folder and select the 'Open In', the 'Explorer' option.

Now, let's have a look here. You can see there's a folder for every density. And in every folder, there is a photo. So, how can we test out these photos? I'm going to show you that too. So, first of all, you know that we use virtual devices to test our applications. So, I'm going to click 'Tools', 'AVD Manager'. So, it's in this window that I will click the 'Create Virtual Device'. Now here, you can see just about every device imaginable. So, every device has a density value. For example, this device has HDPI density. You can test your HDPI picture on this device. You can also check it using this table. So, in this table, you can see which resolution corresponds to which value. For example, XXHDPI resolution is ~480 DPI. So, if you see this DPI in the device density, you can understand this device has XXHDPI resolution. You'd find the right device to test your photos in the application this way.

Now, I want to bring your attention to another situation in here. For example, if you have one photo and you want to use this photo in your project, how can you produce five different densities of this photo? Guess what, Android Studio can do that really easy. In fact, there are a couple of different ways to do it. One way is to produce an icon using a photo. And an icon is just a small size photo over here. Another way is to produce a normal photo with different densities. So, I'm going to show you both ways. First of all, I just want to show you how to make an icon with five densities from one picture, And for that, I just need to 'right-click' on the res folder and select 'New', 'Image Asset'. See how a new window opens?

Now, let's change the Icon Type to 'Launcher Icons(Legacy only)'. Okay. So now, you can see five different densities: MHDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI. So, when I select a picture, it's going to produce icons that have five different resolutions for me. And from the Asset Type section, I'll just choose the 'Image'. Now, I will select the new picture that I want to use in my project. And I can change the name of this picture, let's call it a 'logo_image'. So, you can see here the same picture with five different resolutions. So now, I'm just going to click 'Next'. So here, Android Studio shows me where to put these icons and I'll click 'Finish'. Alright. So now, it's ready. All the icons are under the logo_image folder.

So, I'm going to open these pictures and you can see all of them here. And I can use these pictures in my project, right? So, I can 'Close' these. Add this icon in the Action Bar before the application name. And also, you're going to learn how to add an icon to the Action Bar. Don't worry about that. Let's just go to the 'MainActivity.kt' file. So, above the setContentView function, I'm just going to write 'supportActionBar.setDisplayShowHomeEnabled'. And it's going to take a Boolean parameter, so I write '(true)'. And okay. So, we're getting a warning because this supportActionBar can return null. So, if you have removed the ActionBar, this value will be null. But, since we didn't remove the ActionBar, we know that it is not null and that's why I'm putting in a '!!' here, okay? Now, in the second line, 'supportActionBar!!.setLogo'. And I will write the path of the logo inside the parenthesis here R.mipmap.logo_image. Then for the last line, supportActionBar!!.setDisplayUseLogoEnabled.

So, this is also going to be true and that's it. That's the icon ready. Now, I did not select icon resolution. Android is going to select that automatically, right? So, I have three different virtual devices here, right? So, every single one of them has a different resolution. These are custom tablet, Samsung A10, and Samsung Galaxy S6, right? So, the resolutions are XHDPI, MDPI and XXXHDPI. Now, I want to show you these three devices. So, this is a tablet, this is the A10, this is the Samsung S6. All right. So, I will run my application on these three devices. So, first, I'm going to run it on the custom tablet. And the second one, I'm going to run it on the Samsung A10. And lastly, on the S6. Okay. So, now you can see three different devices. All of them have different resolutions. One icon with a different resolution, right? So, I don't have to decide which image to use; Android automatically decides that. So, I just produced images with different resolutions and put every image where it should be. Did you see that?

Now, you can do it too. Okay. So, that's producing icons. Now, how do we do this? I want to show you how to do the pictures to use in your project. So, for example, in ImageView, if you want to use a picture in your project, you should add this picture with different resolutions. I mean you get the point. Otherwise, it just looks terrible. I mean you've seen it, don't even need to go there. Just bugs me.

Okay, for example, your photo has low resolution and the device has a high resolution. Well, your image is going to look really grotesque. So, before we start, we'll need to install a plugin to Android Studio and I want to select the File, Settings, Plugins, Marketplace. So, here I want to write in android drawable importer. And by the way, if you can't find the Android drawable importer plugin in the Marketplace, just go ahead and download the zip file if you haven't already. But I've shared it with you under the section; just download it to your computer. But here's the key. Don't extract the zip file; leave it as a zip, then click on the gear icon here. Select 'Install Plugin from Disk'. All right, then select the zip file you downloaded to your computer and press the 'OK' button.

Anyway, after all of that, just click the 'Apply' button here and restart Android Studio. And of course, if you don't restart Android Studio, you wouldn't be able to use the plugin. So, I've installed this plugin already. If you didn't install it, you need to install it right now, I'll wait. So, after Android Studio restarts, you will right click to the res folder and select new Batch Drawable Import. If you see this, your plugin is installed. If you don't see it, obviously you'll need to install that plugin. But some of my friends, well, they can't see the batch drawable import option here despite having installed the plugin.

So, in that case, just remove the plugin that you've added from the plugin section. So, in fact, let me just show you this too. Let me just reopen up the plugin section. So, on the Installed tab here, you can see the plugins that you have and you have them installed or not. So, if you uncheck the checkbox here and click the 'Apply' button, that's how you remove this plugin, right? And after that, just restart Android Studio. Then, like we did before, add this plugin once again. Then after adding it, of course, restart Android Studio. And if after all these steps, you still don't see Batch Drawable Import option, well, guess what? I'll show you another couple of ways to get different resolution images.

See the first one is download the DrawableXhdpi plugin from the Marketplace section. And when you choose this plugin, right here you can see how to use this plugin, right? So, after downloading this plugin as well, you got to restart Android Studio. And then the third way you can get a different resolution copy of a picture you have online. First, let's just open up our browser and type in Android Asset Studio in the search bar, press 'Enter.' And look at all the results. So, we'll open Android Asset Studio. Now here, you see different option, but the simple nine-patch generator option is the one that's suitable for us.

So, after selecting the option, you've got to click on the 'Select Image' button in the upper left hand corner. Select an image. Then just click the 'Download ZIP' icon in the upper right corner. And this will create different resolution copies of the image you selected, right? Okay. So, now the download is complete. I will just move this zip file into a different folder and extract the zip file. And look at this. As you can see, there are drawable folders with different resolutions in the res folder.

So, all we have to do is move the folders here to the drawable folder in our project. And I can open Android Studio. And if I right click on the drawable folder, I'll choose the 'Open in Explorer' option. And I'm pasting it in here and going back to our project. Now, we can see different resolution copies of the same image under the drawable folder. All right. My friends, that's three different methods to get a different resolution copy of an image. So, of course, you can choose any one of these three. Plugin makes it kind of easy, but for now, I want to just use the Drawable Batch Import. So, when I click on the Batch Drawable Import, it will open a new window. And from here, I can click '+' and select a picture. And then of course, Android Studio is going to ask me where to add this picture. And I'm going to add it under the res folder, and I'm going to click 'OK.' So, the source resolution shows me the density of my picture. My picture has XHDPI density and my picture has 500x500 pixels.

Now, you can also see here which pixels correspond to which resolution. So, that's pretty cool. Now, it's going to produce the other resolutions for me using my picture. I can check or uncheck some of these options. I can change the name of the picture from here too. And in fact, I'm going to use a logo_image. All right. So, I am going to define saving location as well, and I'll click 'OK,' and 'OK' again. So now, it starts to create the images with a different resolutions. So, you can see here same photo, five different resolutions.

Now, if you have pictures with different resolutions, well, you can of course skip this process and you'll just add your pictures to their folders. But, if you have just one picture and you want to use this picture with different resolutions, you can use any one of these three ways. So, I'm just going to right click to the logo_image folder and select 'Open in Explorer.' As you can see, every photo has the same name but it's under different folder, each one. All right. So, that's how you support different pixel densities. Of course, you don't want to confuse this topic with the supporting different screen sizes, right? Of course, they are two different topics, you know that. But guess what? What's coming up in the next video? Supporting different screen sizes. Cool. So, let's put this to bed, and I'll see you in the next one.

Supporting Different Pixel Densities

About

Intended Audience

Prerequisites