WEBVTT

1
00:00:00.160 --> 00:00:01.500
Hi and welcome back.

2
00:00:01.530 --> 00:00:05.690
In this video, we're going to learn more
about importance of customizing your app

3
00:00:05.720 --> 00:00:10.170
icons and how to create custom app
icons for your react native app.

4
00:00:10.200 --> 00:00:12.500
App icons are the launch icons that are

5
00:00:12.520 --> 00:00:15.010
displayed on the home screen
of your mobile device.

6
00:00:15.040 --> 00:00:19.140
When you install an app,
they serve as a representation of your app

7
00:00:19.170 --> 00:00:24.220
and help users easily identify
and locate your app, amongst others.

8
00:00:24.240 --> 00:00:26.660
App icons essential element of branding

9
00:00:26.690 --> 00:00:29.580
and marketing your
application. Using default

10
00:00:29.600 --> 00:00:32.140
Android and Apple icons for your app may

11
00:00:32.170 --> 00:00:35.740
make it look unprofessional
and unappealing to users.

12
00:00:35.770 --> 00:00:40.860
On the other hand, creating a custom app
icon that represents your brand or company

13
00:00:40.890 --> 00:00:44.780
can make your app more memorable
and visually appealing.

14
00:00:44.810 --> 00:00:47.460
In this lesson,
we're going to learn an easy way

15
00:00:47.490 --> 00:00:51.060
to generate custom app icons
for your react native application.

16
00:00:51.090 --> 00:00:55.860
And I'll show you how to use a tool
to create app icons from an image and then

17
00:00:55.890 --> 00:01:00.100
replace the default icons in your
application with the new custom icons.

18
00:01:00.130 --> 00:01:03.300
This process is quick and easy and ensures

19
00:01:03.330 --> 00:01:06.410
that your app icon will
look great on all devices.

20
00:01:06.440 --> 00:01:12.930
I have chosen an image already that I
have generated on Canva.com myself.

21
00:01:12.960 --> 00:01:18.820
I decided to name this application Altru
because it's a smaller version of a word

22
00:01:18.850 --> 00:01:25.490
altruistic, and I think donation and
helping other people is very altruistic.

23
00:01:25.520 --> 00:01:30.850
So this is going to be an image that we're
going to generate our logos from.

24
00:01:30.880 --> 00:01:35.660
I find that makeappicon.com is a great

25
00:01:35.690 --> 00:01:40.140
website that generates all kinds of icons
that you might need for your application.

26
00:01:40.170 --> 00:01:44.100
So we're going to use this to simply
generate all of the files that we might

27
00:01:44.130 --> 00:01:48.340
need for our react native
application icons.

28
00:01:48.370 --> 00:01:51.850
So let's choose our ultru PNG file.

29
00:01:51.880 --> 00:01:53.660
I'm going to skip these steps.

30
00:01:53.690 --> 00:01:55.660
You can inter your email here,

31
00:01:55.690 --> 00:02:00.060
click on Download, and the icons
are going to be emailed to you.

32
00:02:00.090 --> 00:02:06.160
I already did this, so I'm just going
to go here and download the zip file.

33
00:02:06.480 --> 00:02:07.460
Great.

34
00:02:07.490 --> 00:02:12.540
I just want to quickly show you
how our app icons look currently.

35
00:02:12.570 --> 00:02:18.580
So, for donation app, this is the Apple's
default icon, which means no icon.

36
00:02:18.610 --> 00:02:25.450
And for the Android, it looks like this.

37
00:02:25.480 --> 00:02:28.020
So we're going to be replacing these,

38
00:02:28.050 --> 00:02:33.730
rerunning our application to see how
our application icons look like.

39
00:02:33.760 --> 00:02:35.380
Let's start with android.

40
00:02:35.410 --> 00:02:38.170
So to locate your current icons,

41
00:02:38.200 --> 00:02:42.860
you just need to go to Android folder,
and then Application, then Source,

42
00:02:42.890 --> 00:02:51.100
then Main, and then res directory
here and here are all our icons.

43
00:02:51.130 --> 00:02:54.460
This is what determines what kind of icons

44
00:02:54.490 --> 00:02:58.820
will be shown to your user
according to their device.

45
00:02:58.850 --> 00:03:08.140
So all we want to do is just go to our
finder and see what we have inside.

46
00:03:08.170 --> 00:03:15.220
So we have generated icons
for Android and here are our icons.

47
00:03:15.250 --> 00:03:17.460
And all we want to do is replace

48
00:03:17.490 --> 00:03:23.460
the contents of these items
with the content of these images.

49
00:03:23.490 --> 00:03:26.610
So I'm just going to make this smaller

50
00:03:26.640 --> 00:03:29.740
and I'm going to start
transferring these items here.

51
00:03:29.770 --> 00:03:35.460
The first thing that we need is
to replace the hdpi images.

52
00:03:35.490 --> 00:03:37.900
And here we go.
We have these images right here.

53
00:03:37.930 --> 00:03:43.020
So I'm going to put them here
and I'm going to overwrite them.

54
00:03:43.050 --> 00:03:47.900
I'm going to do the same for MDPI images.

55
00:03:47.930 --> 00:03:52.860
I'm going to put them here,
refactor and overwrite.

56
00:03:52.890 --> 00:03:54.300
Same for here.

57
00:03:54.330 --> 00:04:00.280
And then I'll do the same
for these two folders as well.

58
00:04:00.520 --> 00:04:00.980
Great.

59
00:04:01.010 --> 00:04:04.260
Now we have new icons and this
is how they look like.

60
00:04:04.290 --> 00:04:07.220
And as we go to the end of these

61
00:04:07.250 --> 00:04:13.220
directories, our resolution
for the App icons will grow.

62
00:04:13.250 --> 00:04:15.060
And this is intentional.

63
00:04:15.090 --> 00:04:23.660
Now let's see how this will change our
App icon displayed on the Android device.

64
00:04:23.690 --> 00:04:25.700
Great, this has been completed.

65
00:04:25.720 --> 00:04:28.060
And now I'm just going to go
out of this application.

66
00:04:28.090 --> 00:04:33.060
And here is how our App icon
looks like on Android right now.

67
00:04:33.090 --> 00:04:36.540
So let's do the same for iOS.

68
00:04:36.570 --> 00:04:44.080
To do the same for iOS,
please go to your Donation Application

69
00:04:44.400 --> 00:04:50.220
iOS folder and locate
Donation App x Workspace File.

70
00:04:50.250 --> 00:04:56.620
So you'd go here and then iOS
and then Workspace File.

71
00:04:56.650 --> 00:05:01.940
Just open this up and go
to the folder section here.

72
00:05:01.970 --> 00:05:07.420
Then go to donation application
see its contents and open the donation

73
00:05:07.450 --> 00:05:11.100
application main directory
and click on Images.

74
00:05:11.130 --> 00:05:14.820
And if you click on App Icons,
this is going to appear here.

75
00:05:14.840 --> 00:05:19.260
Now let's start transferring
altrue files inside here.

76
00:05:19.280 --> 00:05:22.980
So let's go to iOS folder
here and then App Icon set

77
00:05:23.010 --> 00:05:28.300
I'm just going to go inside
here and view this as a list.

78
00:05:28.330 --> 00:05:33.300
And here we see that we
need 40 by 40 image.

79
00:05:33.330 --> 00:05:39.460
We could just grab this one here
and then we need 60 x 60 image.

80
00:05:39.480 --> 00:05:44.100
And there is no 60 x 60 image here because

81
00:05:44.130 --> 00:05:49.020
this will be 120 pixels because
it's going to be 60 times two.

82
00:05:49.040 --> 00:05:56.100
So if we want 60 x 60, then we're
going to have to grab this one.

83
00:05:56.130 --> 00:05:57.380
Great.

84
00:05:57.410 --> 00:06:03.080
And then we need 58 by 58
so we can grab this one.

85
00:06:03.520 --> 00:06:06.860
And then we can grab this one here.

86
00:06:06.890 --> 00:06:09.220
And we need 80 by 80.

87
00:06:09.250 --> 00:06:12.020
So we could use this one for that.

88
00:06:12.040 --> 00:06:16.300
We can grab itunes artwork
for this file here.

89
00:06:16.330 --> 00:06:18.060
So that's it.

90
00:06:18.090 --> 00:06:22.700
I'm going to quickly delete this app here

91
00:06:22.730 --> 00:06:29.700
and I'm going to rebuild this.
And here we go.

92
00:06:29.730 --> 00:06:34.580
We see our donation application
displayed here with our logo.

93
00:06:34.600 --> 00:06:41.900
So this is how you change your App
icons on iOS and Android devices.

94
00:06:41.920 --> 00:06:47.220
In the resources of this video,
I am going to put links that you could use

95
00:06:47.250 --> 00:06:50.100
whenever you decide to build
your own applications.

96
00:06:50.130 --> 00:06:52.140
And just remember that customizing your

97
00:06:52.170 --> 00:06:56.260
App icon is an important part
of branding and marketing your app.

98
00:06:56.290 --> 00:06:58.500
By choosing a well designed app icon

99
00:06:58.520 --> 00:07:01.620
that represents your brand,
you can create a memorable and visually

100
00:07:01.650 --> 00:07:04.420
appealing app that stands
out from the rest.

101
00:07:04.440 --> 00:07:06.540
In this lesson, we learned how to generate

102
00:07:06.570 --> 00:07:11.180
custom App icons from an image and place
default icons in your react native app. Use

103
00:07:11.210 --> 00:07:15.180
this knowledge to create a unique
and attractive app icon that represents

104
00:07:15.210 --> 00:07:18.380
your brand and captures
the essence of your application.

105
00:07:18.400 --> 00:07:21.000
Thanks so much for watching
and I'll see you in the next video.