Adding an App Icon4:50 with Ben Deitch
There's one final thing we need to complete this app: an icon! We'll use an icon from our designer and talk briefly about how Android manages images for different types of screens.
And that little thing is an app icon, check out the mockups. 0:00 We've got this cool, semi-transparent icon and 0:04 it's really simple to add to our project. 0:07 Download the zip file linked below this video in the teachers notes. 0:09 And once it downloads, go ahead and unzip it wherever you'd like. 0:13 Now don't be alarmed by the fact that there's more than one folder in here. 0:17 We'll talk more about these different folders in a later project. 0:20 But the basic idea is that we provide images at different resolutions 0:24 to make sure our app looks good on a wide range of devices. 0:27 Now if we jump back into Android Studio and 0:31 open the project pane, here in the res directory, if we 0:34 expand the mipmap folder we can see the same folders that we saw in our download. 0:38 Well, kind of, if we open our project in Windows Explorer or 0:43 Mac Finder and navigate to the res directory, 0:48 We can indeed see each of the mipmap folders that we have in our download. 0:56 But since they each contain the same files, Android Studio simplifies things. 1:01 Rather than showing us all the different mipmap folders, 1:07 we only see one folder per image, containing all the versions of that image. 1:10 And the part in parentheses tells us which mipmap folder that image is actually in. 1:16 The mipmap directories in a project mostly contain icons. 1:20 And the different suffixes have to do with the different resolutions that Android 1:24 can run on. 1:29 hdpi is for high definition, mdpi is for medium definition, 1:29 xh is for extra high definition, and xxh is, well you get the idea. 1:34 If we wanted to, 1:39 we could just provide one set of images at whatever resolution we choose. 1:40 And the Android operating system is smart enough to scale it for different devices. 1:45 But the best practice is to provide multiple resolutions that 1:49 we scale ourselves, to give the best user experience, 1:52 no matter what device the user is using. 1:56 Let's take a look at what we currently have in these folders. 1:58 If we double-click on one of these images we can open it up right here. 2:01 This is the icon we're currently using, the default icon. 2:06 It's created when you first create a project, 2:09 all we need to do is overwrite this file with our new one. 2:12 Let's close this and then find our icon in the hdpi folder you downloaded. 2:16 Then let's copy it and paste it into the mipmap folder. 2:25 Then pick the mipmap-hdpi folder and hit OK. 2:32 Hit OK again to select the new name. 2:37 And the hit Overwrite to overwrite the default icon. 2:41 All right, that was the hdpi icon, and 2:44 if we open it, sure enough, there's our new icon. 2:49 Now let's do the same thing for each of the other icons. 2:55 So we've got mdpi, we'll copy that, paste it in here. 3:00 Pick mdpi, OK, and Overwrite. 3:05 Then xhdpi, copy that, and I wonder if we can just pitch that over this one. 3:12 Looks like we can that's cool. 3:22 Then xx, Paste it over the other xx. 3:27 Overwrite, and, 3:32 finally, xxxhdpi. 3:36 Copy that one, paste it over its counterpart, and hit OK. 3:41 For the last step, 3:50 it looks like Android Studios given us an ic_launcher_round folder. 3:51 In Android, you can specify both square and round icons. 3:56 However, for this project, we only have square icons. 4:01 So let's delete this folder, Then let's open up our AndroidManifest, 4:04 And let's delete the line where we set the round icon property. 4:13 Finally, we need to test that we can see our icon. 4:19 Let's run the app. 4:22 To see our icon, we can just go back to the home screen, and 4:28 then open the app launcher. 4:32 And there it is, Fun Facts with our new icon. 4:36 And if we drag it out onto the home screen, Thanks to its transparency, 4:39 we can see some of the background showing through. 4:45 Great job! 4:49
You need to sign up for Treehouse in order to download course files.Sign up