1
00:00:00,960 --> 00:00:06,660
Welcome back in this video, we're going to create a new project which is going to be built using jetpack

2
00:00:06,660 --> 00:00:07,290
compose.

3
00:00:07,500 --> 00:00:14,520
So here on the new project, you can just select empty compose activity and it will generate the jetpack

4
00:00:14,520 --> 00:00:15,930
compose code for you.

5
00:00:16,410 --> 00:00:19,980
So I'm going to call this application doc profile.

6
00:00:20,940 --> 00:00:27,000
Page, and you can see that the package name is going to be used or tutorials to talk profile page.

7
00:00:27,300 --> 00:00:33,600
I have the safe location as well as something very interesting is that the language is said to Scotland

8
00:00:33,600 --> 00:00:34,860
and I cannot change it.

9
00:00:35,160 --> 00:00:41,220
And that is because we're using jetpack compose entities limited to Scotland and is not built for Java.

10
00:00:41,850 --> 00:00:45,400
Then we have the minimum SDK of being API 21.

11
00:00:45,750 --> 00:00:47,790
So let's go ahead and create the project.

12
00:00:48,390 --> 00:00:52,740
This will take a little while, and once it's done, the files will be ready.

13
00:00:53,010 --> 00:00:57,030
But let's already look at our main activity, thought Katie.

14
00:00:57,540 --> 00:01:04,560
So we have our main activity class, which is inheriting from component activity, and it has an on

15
00:01:04,560 --> 00:01:10,530
create method, as we would have even without jetpack compose, just using the old fashioned approach

16
00:01:10,830 --> 00:01:12,450
while we call the super method.

17
00:01:12,630 --> 00:01:17,430
And then we set the content to use our torque profile page theme.

18
00:01:18,120 --> 00:01:19,800
So let's not focus on this part.

19
00:01:19,800 --> 00:01:23,010
For now, however, let's look a little further down.

20
00:01:23,370 --> 00:01:25,740
We can see that we have composable here.

21
00:01:27,560 --> 00:01:34,100
So this main activity, Kate File, not only has the main activity class in it, but it also has a couple

22
00:01:34,100 --> 00:01:38,960
of composable seen here in this case, the greeting composable and the default preview.

23
00:01:41,060 --> 00:01:48,890
So let's look at this greeting composable, as you can see, it contains a text composable text is a

24
00:01:48,890 --> 00:01:55,430
composable and can also be referred to as a UI element for any composable.

25
00:01:55,430 --> 00:01:58,310
It must be referenced from another composable.

26
00:01:58,580 --> 00:02:02,600
That is why the greeting function has the composable annotation.

27
00:02:02,610 --> 00:02:05,600
So here it is at composable is an annotation.

28
00:02:05,960 --> 00:02:12,740
And if we get rid of it, for example, we will see that we get an error because this text here is also

29
00:02:12,740 --> 00:02:17,600
a composable so you cannot use compose the balls inside of normal functions.

30
00:02:17,810 --> 00:02:20,720
The functions themselves need to be composable as well.

31
00:02:22,930 --> 00:02:29,170
The main activity also contains other built in composable the set content, for example.

32
00:02:29,470 --> 00:02:33,040
So if we go up here this year is also a composable.

33
00:02:35,480 --> 00:02:38,690
Which declares the UI contents to the activity.

34
00:02:39,200 --> 00:02:45,750
The doc profile page theme, which is created using the name given during the project creation with

35
00:02:45,770 --> 00:02:47,300
a theme attached at the end.

36
00:02:47,780 --> 00:02:53,060
This is used to provide the look and feel of our application so you can go over to your projects now

37
00:02:53,060 --> 00:02:54,830
and open up UI theme.

38
00:02:55,100 --> 00:03:00,230
And there you will find that you have the theme Caity file in UI theme.

39
00:03:00,230 --> 00:03:05,720
You can only see your theme key file, but you can also see the type, the shapes and the colors.

40
00:03:06,140 --> 00:03:09,200
These were also files automatically created for us.

41
00:03:09,560 --> 00:03:12,800
We will be talking about theme in detail in later lectures.

42
00:03:13,220 --> 00:03:19,640
Every project needs an activity to serve as the entry point into the application, which is why we have

43
00:03:19,880 --> 00:03:25,790
a manifest file where this activity is defined, which is the entry point to our application.

44
00:03:26,270 --> 00:03:28,130
So let's look at this file real quick.

45
00:03:28,550 --> 00:03:33,800
We can see it is an XML file, so it's using the XML language, so to speak.

46
00:03:34,250 --> 00:03:38,390
We have the manifest keyword and then inside of it, we have the application.

47
00:03:38,400 --> 00:03:42,650
So here are some parameters that are defined for our application.

48
00:03:42,860 --> 00:03:47,530
And then we have the activity that is defined here, and you can see it is the main activity.

49
00:03:47,540 --> 00:03:48,410
That's the name of it.

50
00:03:48,800 --> 00:03:56,540
And it is using a certain theme, which is the dog profile page, no action bar theme and you could

51
00:03:56,540 --> 00:03:57,610
jump over to it.

52
00:03:57,620 --> 00:04:02,720
It's under your themes exim l file if you wanted to know more about it.

53
00:04:02,870 --> 00:04:08,510
So there are just two items in there which says the window action bar is false and window null.

54
00:04:08,510 --> 00:04:14,960
Title is set to true, so it activates the action bar, but it makes sure that that no title is set

55
00:04:14,960 --> 00:04:15,380
to true.

56
00:04:15,980 --> 00:04:23,990
OK, so this themes XML file, by the way, is found under your resources, values, themes, SML.

57
00:04:24,470 --> 00:04:28,010
So there are even some more files that were automatically generated.

58
00:04:28,010 --> 00:04:33,790
You can see there is this color is expel the strings of XML, which were created for us some drabble

59
00:04:33,830 --> 00:04:36,020
files, as well as some MIP maps.

60
00:04:36,410 --> 00:04:41,600
We're going to go over those and use those different files over the period of this course.

61
00:04:42,140 --> 00:04:45,020
But now let's go back to our Android Manifest ex email.

62
00:04:45,890 --> 00:04:53,900
So we have the intent filter, which basically just handles which activities to open up and how to jump

63
00:04:53,900 --> 00:04:56,030
from one activity to another, for example.

64
00:04:56,300 --> 00:05:03,860
So what we're saying here is when we open up the application, we want to use this activity because

65
00:05:03,860 --> 00:05:05,720
the action is the main action.

66
00:05:06,470 --> 00:05:10,700
And then the category is that this is the launcher activity.

67
00:05:11,150 --> 00:05:16,490
Basically, when we are launching our application, it will launch this activity, which will be our

68
00:05:16,490 --> 00:05:17,300
main activity.

69
00:05:17,840 --> 00:05:22,070
And currently, that obviously makes sense because we only have one activity.

70
00:05:22,370 --> 00:05:24,920
But what if we have multiple screens in the future?

71
00:05:25,190 --> 00:05:30,920
Well, then it would make sense to obviously know in which activity will want to get started with.

72
00:05:31,280 --> 00:05:36,980
So if you have a log in activity, for example, so a login screen and then you have a screen where

73
00:05:36,980 --> 00:05:40,700
you see the details for your particular user account that you logged in.

74
00:05:40,970 --> 00:05:46,520
It would make sense to see the login screen first before you can actually get to your data, right?

75
00:05:46,880 --> 00:05:50,330
Because otherwise you could see the data of a user that is not you.

76
00:05:50,600 --> 00:05:56,240
So that is definitely something you need to take into consideration when building applications, and

77
00:05:56,240 --> 00:05:58,910
we are going to consider that, obviously.

78
00:05:59,840 --> 00:06:03,090
OK, so that's the general structure of our application.

79
00:06:03,110 --> 00:06:07,280
So we have our main activity, which sets the content with composable.

80
00:06:07,430 --> 00:06:13,580
We have a composable here at the bottom, which says greeting at the text and then we have a preview

81
00:06:13,580 --> 00:06:18,860
of our application so we can see how this would look in the preview, but therefore would need to at

82
00:06:18,860 --> 00:06:20,600
least build the application once.

83
00:06:20,870 --> 00:06:25,860
So let's run it real quick and build it, because otherwise the designer will not show us anything.

84
00:06:25,880 --> 00:06:29,040
So here at the top, you can see you can go to your code.

85
00:06:29,060 --> 00:06:32,840
You can split the screen so you see the code and the designer.

86
00:06:33,080 --> 00:06:34,160
Or you can jump to this.

87
00:06:34,400 --> 00:06:35,540
The designer only.

88
00:06:36,230 --> 00:06:36,690
OK.

89
00:06:37,130 --> 00:06:40,490
So we have this text which just says hello and name.

90
00:06:41,060 --> 00:06:46,660
And then here we call this method greeting, which says greeting with the name of Android.

91
00:06:46,670 --> 00:06:50,330
So it's going to show the text of Hello, Android.

92
00:06:50,930 --> 00:06:51,590
OK, so.

93
00:06:52,570 --> 00:06:58,870
Once the application is installed, we can see it here and it says hello, Android at the top left corner,

94
00:06:59,260 --> 00:07:01,270
which is basically this text here.

95
00:07:02,110 --> 00:07:06,310
So now please go ahead and replace this android with your own name.

96
00:07:06,310 --> 00:07:07,330
So this place?

97
00:07:07,330 --> 00:07:08,680
Hello, and then your name?

98
00:07:09,790 --> 00:07:10,180
OK.

99
00:07:10,210 --> 00:07:11,110
I hope you tried it.

100
00:07:11,260 --> 00:07:13,490
It should basically be, in my case.

101
00:07:13,510 --> 00:07:14,530
Hello, Dennis.

102
00:07:14,530 --> 00:07:19,390
So I'm calling this greeting composable function, which is this greeting function right here, and

103
00:07:19,390 --> 00:07:23,470
I'm passing the name, which is a string called Dennis to it.

104
00:07:23,470 --> 00:07:29,830
And it's going to set this text composable to have the property of text say hello.

105
00:07:29,860 --> 00:07:30,580
And Dennis.

106
00:07:31,420 --> 00:07:33,560
So let me rerun it real quick.

107
00:07:34,150 --> 00:07:36,220
And you can see it says, Hello Dennis here.

108
00:07:36,970 --> 00:07:42,670
And by the way, you can also go to your designer and you can see how your application will look like

109
00:07:42,670 --> 00:07:42,940
here.

110
00:07:43,210 --> 00:07:48,280
But as there is really not much happening in our application, it just says Hello, Android.

111
00:07:48,520 --> 00:07:56,800
So this is the default preview that we get through this function right here, which is using the preview

112
00:07:56,800 --> 00:07:57,520
annotation.

113
00:07:59,410 --> 00:08:04,540
So this is our starting point, and you're going to learn a lot more about what's up in this Android

114
00:08:04,540 --> 00:08:06,160
manifest along the way.

115
00:08:06,490 --> 00:08:13,660
You're going to learn how to use themes and how to create your own composable to change the user interface

116
00:08:14,020 --> 00:08:14,860
to your liking.

117
00:08:15,580 --> 00:08:17,050
So that's it for this video.

118
00:08:17,200 --> 00:08:18,190
See you in the next one.