All language subtitles for 5. How to Add App Icons to the iOS and Android Apps

All right.
1

So now that we've pretty much created all of the interface of our 'I Am Rich' app, we have a scaffold with
2

a app bar, a body, an image that comes from our assets in our images folder.
3

But there's just one thing that we still haven't got. We haven't got a custom app icon. For every single
4

app that you create using Flutter,
5

you get a default Flutter logo as your app icon.
6

Now if you start creating lots of apps, they can get very confusing very quickly. And besides, when you're uploading
7

it to the App Store, you don't want it to look like a default Flutter app.
8

Right?
9

So how do we give our apps an app icon.
10

Now first things first.
11

I want you to go ahead and download the 'I Am Rich' app icon from this current lesson.
12

There's a file that you can download and once you've downloaded it and open it, you should see an image
13

that looks something like this.
14

And then what you're going to do is you're gonna go to a website called appicon.co
15

And you're going to drag and drop your image
16

that's pretty large, into the place holder there.
17

And then we're going to select for all the platforms that we want to create an app icon for.
18

So we're going to uncheck iPad, watch and Mac. We're only going to generate icons for the iPhone and
19

Android.
20

Go ahead and click generate.
21

And you should be able download a zipped file that contains all of the icons that they've generated
22

for you.
23

If you have a peek inside here, you can see inside Android,
24

we've got some folders that contain different sized icons.
25

So for example this one is the smallest.
26

And this one is the largest Android icon. And it's done the same for iOS as well.
27

And it's inside the assets.xcassets folder.
28

The next thing we have to do is to actually move these assets into our current project. And to do that,
29

we're going to need the project navigator over here.
30

So remember I said that we have our iOS folder which contains all the files of our iOS app, and our Android
31

folder that contains all the files of our Android app. And these files include the actual launcher icon
32

or the app icon if you will.
33

So let's first start with the Android app.
34

If you go into the app folder, then you go into src, then you go into main, and finally you go into
35

res.
36

You can see that we've got a whole bunch of folders here. And all of these that start with a mipmap
37

are your app icon folders.
38

So if you select the res folder, right click and open 'Reveal in Finder',
39

it will locate that folder for you.
40

And if you're working on Windows, then when you right click on the folder, you should find something that
41

says, 'Show in Explorer' which is the equivalent of Finder on Windows.
42

But once we've got that folder found and we can open it up, we can have it side by side with the downloads
43

that we had from the app
44

icon.co website. And we open up the Android folder,
45

you can see that there's a couple of files that look pretty much the same as over here.
46

Right.
47

We've got a lot of mipmap folders.
48

So what I want you to do is to select everything inside the res folder that says mipmap, and you're
49

going to move it into your trash.
50

Now instead you're going to select all the ones that came from your android folder, your download off
51

of the appicon website, and you're going to drag it in.
52

And now that adds all of the app icons that were generated from our website, into our project.
53

So we're done with our Android project and we can collapse it. So onto the iOS project.
54

Now inside the iOS folder, we're going to open up the folder that's called Runner, not runner.xco
55

project, not runner
56

.xcoworkspace
57

but the actual runner folder. And here, we have something called assets.xcassets which is where our
58

app icons actually live.
59

And you can see that at the moment, there are different resolutions of the Flutter default icon.
60

So let's change that.
61

We're going to right click on the assets.xcassets folder, and we're going to, again 'Reveal in Finder'
62

or 'Show in Explorer' and we're going to have our windows side by side again.
63

And on the left the Runner is of course, our iOS app.
64

And on the right we've got the images from our app icons download.
65

And then we're going to delete the assets.xcassets folder from our Runner over here.
66

So we're just going to drag that again to trash or COMMAND + backspace, to delete. And then I'm going to
67

drag the same one from the downloaded file into here.
68

And if you've done everything that I've just said we should now have app icons for both our iOS and Android
69

app.
70

I'm going to go ahead and launch my Android emulator.
71

So now I'm going to make sure I've got my Android emulator selected, and I'm going to go ahead and click
72

run.
73

And we now have our app showing up on our Android phone.
74

And if I click on the home button,
75

and drag up to show all of my apps, you can see that we've got our 'I Am Rich' app right here with the
76

custom icon.
77

Now if you're an Android user, you might have noticed that within the past few years, Google has pretty
78

dramatically changed the styling of the app icons.
79

What used to be square icons with transparencies and different shapes, has now been pretty much unified
80

into these circular icons. And you can see with our 'I Am Rich' icon even though we're providing the right
81

sized assets for the app icon,
82

it gets this white circle around it which some of you may or may not like.
83

And in the wild, I've seen some app designers deciding to go along with this style, but others have decided
84

to embrace the circular icon.
85

So I want to quickly show you how you can do this
86

also. Inside our project folder, if we expand the Android folder and we go to app, source, main, then we're
87

going to right click on the res folder, gonna click on new and were gonna select 'Image Asset'. And then
88

we get into our image asset configuration wizard. And we get to pick a path, or namely the starting image.
89

I'm gonna go ahead and pick our 'I Am Rich' app icon, and I'm going to click on open and then it's going
90

to show you your icon in all sorts of different configurations.
91

Square, rounded square, square called circle etc.
92

And what you can do is you can resize the image so that it fits into the space that you want it to be
93

seen in.
94

If you're going for your round icon, or your legacy icon, you can see in all of these scenarios, it still
95

looks good.
96

The diamond is still within the circle.
97

So once you're done adjusting, go ahead and click next. And then it's going to replace all of the places
98

we had our previous images with the new ones.
99

It's going to be overwritten by this.
100

And that's exactly what we want.
101

So go ahead and click finish.
102

And now it added the files that we've edited, and we can go ahead and run our up again. Now that our app
103

has started again,
104

I'm going to click on the home button, and when we drag up our menu, you can see our new icon fills the
105

entire space of the circle.
106

And to my eyes at least, I think that looks a lot better.
107

It's up to you which style you want to choose.
108

You can go for sort of like the calculator app, the calendar app style, where you've got your square icon
109

within a circle, or you can fill up the entire circle with your design.
110

But these are the two ways that you can incorporate your Android app icon.
111

And if I run the app on the iPhone, you can see that my app icon has also updated to the one that I want.
112

So this is a really easy way of updating your Android and iOS app icons.
113

And if you want different app icons, then you can simply use a different image and only generate the
114

iPhone sets, or only generate the Android sets and replace them as you need to.
115

So this has been pretty fun.
116

We've built an app complete with an app icon, with image assets, and all the good parts of any mobile
117

app.
118

So now we have to do is to run it on a physical device. For all of that and more, I'll see on the next lesson.