1

00:00:00,150 --> 00:00:07,200

Hello this is Martez awkwardly and in this eternally old your way to learn about custom views in Android.



2

00:00:07,440 --> 00:00:16,360

So let's create a new Android studio project and the for the application name to step in here custom



3

00:00:16,360 --> 00:00:21,510

view app and you can specify the company domain project location.



4

00:00:21,940 --> 00:00:26,400

And here we can specify the Peggys package name if you want to change this package name we just need



5

00:00:26,400 --> 00:00:28,010

to click on it here.



6

00:00:28,090 --> 00:00:35,910

We don't want to add C++ or cosmoline to our project so don't check these checkboxes here and just click



7

00:00:35,980 --> 00:00:46,120

next and here as the minimum API I chose our Android five point one if you want to you can change it



8

00:00:46,120 --> 00:00:48,980

to for example Android 4.1 jelly bean.



9

00:00:49,200 --> 00:00:49,860

OK.



10

00:00:49,960 --> 00:00:52,950

And just click on next.



11

00:00:52,970 --> 00:00:56,310

So here choose empty activity next.



12

00:00:56,570 --> 00:00:59,340

And here don't change anything and just click on finish.



13

00:00:59,380 --> 00:01:07,040

OK so now that a project is created we need to open the Android view here at the left hand side and



14

00:01:07,040 --> 00:01:08,810

then open this app folder.



15

00:01:08,810 --> 00:01:11,600

Here we have this reservoir there open it.



16

00:01:11,960 --> 00:01:19,010

So now we are going to create an X image file called attributes that X-amount.



17

00:01:19,010 --> 00:01:24,660

This file is going to hold the attributes of our custom view.



18

00:01:25,010 --> 00:01:32,150

So the first thing that we should do in order to create a custom view in Android is to create an XML



19

00:01:32,150 --> 00:01:37,050

file that contains the attributes of our custom view.



20

00:01:37,280 --> 00:01:46,240

So we should provide the attributes of our custom view inside another separate exemplified.



21

00:01:46,370 --> 00:01:48,260

So let's see how we can do that.



22

00:01:48,680 --> 00:01:54,410

So you open this race folder and then we have this the values for the open it and then you can see these



23

00:01:54,410 --> 00:01:57,610

colors that exemplified this things that exemplify.



24

00:01:57,620 --> 00:01:59,550

And this ties that exemplified.



25

00:01:59,690 --> 00:02:03,040

So you're already familiar with all of these files here.



26

00:02:03,050 --> 00:02:09,790

You know that the colors that exemplify contains the colors that we can use inside and other place of



27

00:02:09,790 --> 00:02:10,550

our project.



28

00:02:10,700 --> 00:02:17,810

We have these strings that exemplify what is used in order to internationalize our application or to



29

00:02:17,810 --> 00:02:19,340

put straight resources here.



30

00:02:19,400 --> 00:02:26,090

It is actually recommended to put string resources here inside this void and do not hard code stream



31

00:02:26,230 --> 00:02:29,030

values when you want to specify a string value.



32

00:02:29,030 --> 00:02:35,100

Inside your project for example you create a button and your heart code that the text of that spot in



33

00:02:35,360 --> 00:02:41,960

the Android operating system or the Android system is going to warn you that do not use Harke hard coded



34

00:02:41,960 --> 00:02:42,810

strings.



35

00:02:42,860 --> 00:02:48,800

You can't just create a stream resource here inside these strings that is in a file and then you can



36

00:02:49,160 --> 00:02:56,770

refer to this name inside where ever inside your double file or inside XML file wherever you want.



37

00:02:56,960 --> 00:03:03,950

So it is actually recommended to use strings that on file and that we have these styles that example



38

00:03:03,950 --> 00:03:07,240

file which contains this application.



39

00:03:07,610 --> 00:03:10,170

So now let me close these files here.



40

00:03:10,220 --> 00:03:16,540

So now we want to create another string and at the next MFI and put that fine inside the values for



41

00:03:16,540 --> 00:03:17,090

them.



42

00:03:17,120 --> 00:03:22,580

So right click on these values into here and then click on new and then the kind of values resource



43

00:03:22,580 --> 00:03:23,780

file.



44

00:03:23,810 --> 00:03:26,680

So here we need to specify the filename.



45

00:03:26,810 --> 00:03:36,300

The filing is going to be my underlined custom underline view underline attributes.



46

00:03:36,300 --> 00:03:42,630

So here just click on OK now that we have this file here you can see this resources tag.



47

00:03:42,630 --> 00:03:47,730

So let's actually go inside these resources tag Lippi DoubleClick undisturbed in order to make this



48

00:03:47,730 --> 00:03:53,910

area wider and let's put another tag inside these resources stack sort of an attack and just type in



49

00:03:53,910 --> 00:03:54,490

here.



50

00:03:54,640 --> 00:03:56,980

Declare a dash style level.



51

00:03:57,210 --> 00:04:06,810

The name is going to be my tepi in my custom.



52

00:04:06,910 --> 00:04:09,250

So let me close the stack.



53

00:04:09,280 --> 00:04:12,960

Now we have this starting tag and this closing tag here.



54

00:04:13,090 --> 00:04:19,060

So let's go inside is declare sailable tack and let's create attack here.



55

00:04:19,060 --> 00:04:25,390

Let's say that we have a TTR attribute which stands for attributes.



56

00:04:25,420 --> 00:04:28,180

And now we need to specify the name of our attributes.



57

00:04:28,210 --> 00:04:29,900

As you can see it is required.



58

00:04:29,920 --> 00:04:31,350

So choose this one.



59

00:04:31,720 --> 00:04:40,900

So the name is going to be your view color and then when it is specified the format of our actually



60

00:04:40,900 --> 00:04:43,120

of our attributes.



61

00:04:43,210 --> 00:04:48,250

So the format is going to be of type color as you can see if we have different formats here we have



62

00:04:48,250 --> 00:04:56,250

Boulia format color dimension in our flag float fraction integer reference and string.



63

00:04:56,500 --> 00:05:04,200

So here we want to choose color and then just self close the stack here by just putting in slash here.



64

00:05:04,210 --> 00:05:06,060

Now let's create another attribute.



65

00:05:06,070 --> 00:05:16,940

So just open a tad 83 on this one but the name is going to be text color ok text color.



66

00:05:17,310 --> 00:05:21,400

And now we want to specify the format of our attributes.



67

00:05:21,410 --> 00:05:23,900

So here again it is colored.



68

00:05:23,910 --> 00:05:26,290

So we want to choose color as the format.



69

00:05:26,310 --> 00:05:28,880

So again this self-enclosed stack.



70

00:05:28,920 --> 00:05:35,810

Finally you've want to specify a text for our view so we can again open it like attribute.



71

00:05:36,060 --> 00:05:49,550

The name is going to be text or view text view text and the format is going to be of type strange because



72

00:05:49,550 --> 00:05:51,510

it is going to be the text.



73

00:05:51,740 --> 00:05:56,430

And again let's self-enclosed this text if you want to you can add some more attributes here.



74

00:05:56,440 --> 00:06:01,890

But now I recommend that you only put these attributes here until end.



75

00:06:02,120 --> 00:06:08,390

So after you have actually finished creating this application you can manipulate this app you can manipulate



76

00:06:08,390 --> 00:06:12,600

these attributes and create your own style or your own custom views.



77

00:06:12,620 --> 00:06:17,600

And right now let's actually open the Android view.



78

00:06:18,080 --> 00:06:28,430

So now that we created this XML file in order to specify the attributes of our actually our custom view



79

00:06:29,000 --> 00:06:35,780

now we're going to create another class a class that is going to respond to these attributes.



80

00:06:35,960 --> 00:06:39,400

As you can see here we said name my custom view.



81

00:06:39,650 --> 00:06:45,110

So the class that you're going to create is the name of the class is going to be exactly the same as



82

00:06:45,110 --> 00:06:45,880

this one.



83

00:06:46,040 --> 00:06:47,460

My custom view.



84

00:06:47,810 --> 00:06:50,480

So open the Android view here in the Java folder.



85

00:06:50,510 --> 00:06:52,600

And here we have this first package.



86

00:06:52,670 --> 00:06:54,060

Right click on this page.



87

00:06:54,180 --> 00:06:56,400

New Java class.



88

00:06:56,630 --> 00:07:01,200

So let's specify the name of the class the name of the class is going to be.



89

00:07:01,370 --> 00:07:04,210

I told you to see exactly the same as this name.



90

00:07:04,370 --> 00:07:06,470

My custom



91

00:07:10,070 --> 00:07:12,220

and here are just click on OK.



92

00:07:12,350 --> 00:07:23,650

Now this class is going to extend the view class so as you can see it's showing us an error here but



93

00:07:23,710 --> 00:07:25,330

I'm going to solve this error in a moment.



94

00:07:25,330 --> 00:07:29,050

But let's actually switch this might cause do you attribute the rest in a file.



95

00:07:29,380 --> 00:07:31,540

So here we put this name here right.



96

00:07:31,540 --> 00:07:32,960

So let's actually did it this way.



97

00:07:32,980 --> 00:07:34,540

And let's again just type in here.



98

00:07:34,540 --> 00:07:41,230

My custom view as you can see now that I'm actually typing this name it is referring to this class that



99

00:07:41,230 --> 00:07:43,630

we created inside this package.



100

00:07:43,870 --> 00:07:47,050

And you can see it's it's common example that Matas saw that.



101

00:07:47,200 --> 00:07:49,300

This is the same package that we have here.



102

00:07:49,360 --> 00:07:51,890

So let's choose this one and and present it on your keyboard.



103

00:07:51,910 --> 00:07:56,830

In order to specify that we are exactly exactly referring to this class.



104

00:07:56,920 --> 00:07:58,740

My custom view.



105

00:07:58,930 --> 00:08:01,530

Now let's go to our custom view the job of fine.



106

00:08:01,630 --> 00:08:08,820

Let's go inside this class in order to solve this error you need to create a constructor for this class



107

00:08:09,400 --> 00:08:15,720

so the constructor is going to be actually Puplick and the name of the constructor is going to be my



108

00:08:15,840 --> 00:08:17,280

custom view.



109

00:08:17,310 --> 00:08:18,920

Put a pair of parenthesis here.



110

00:08:19,140 --> 00:08:23,040

Let's open and closed this constructed by using this curly braces.



111

00:08:23,040 --> 00:08:25,770

Now let's go inside the practices of this constructor.



112

00:08:25,770 --> 00:08:30,970

And if you want to specify two privateer's here the first one is going to be a type context.



113

00:08:31,140 --> 00:08:33,870

So the name is going to be context comma.



114

00:08:33,930 --> 00:08:37,300

The second one is going to be have the attributes set.



115

00:08:37,560 --> 00:08:39,700

So the name is going to be attributes set.



116

00:08:40,600 --> 00:08:46,040

Now let's go inside this constructor and here as you can see is shown as an error.



117

00:08:46,060 --> 00:08:51,870

If I hover over this entire area it says there is no default constructor available in and right that



118

00:08:51,890 --> 00:08:53,370

view that view.



119

00:08:53,440 --> 00:08:58,930

This means that we need to call this Super constructor of our custom class.



120

00:08:58,930 --> 00:09:00,910

So the superclass is the view class right.



121

00:09:00,940 --> 00:09:08,110

Here we are actually explicitly specifying that this might be a class is extending from the view class.



122

00:09:08,200 --> 00:09:10,200

So we need clean say this constructed animated.



123

00:09:10,280 --> 00:09:17,780

We need to say super and enter into the apprentice's we need to refer to our context come up and attribute



124

00:09:17,780 --> 00:09:18,560

sets.



125

00:09:18,580 --> 00:09:20,070

Now the error is gone.



126

00:09:20,080 --> 00:09:24,110

So I think that's enough for this year to Oriol in the next tutorial.



127

00:09:24,180 --> 00:09:30,460

We're going to completely implement this my custom view constructor inside is my custom view class.



128

00:09:30,700 --> 00:09:32,220

So thank you very much for watching.



129

00:09:32,230 --> 00:09:37,480

If you have any questions about this concept please post the discussion in the course and then I do



130

00:09:37,480 --> 00:09:39,540

my best to answer all of your questions.



131

00:09:40,120 --> 00:09:42,820

And I look forward to seeing you in the next tutorial.