1

00:00:00,240 --> 00:00:02,150

Hello this is Mortaza Cordy.



2

00:00:02,160 --> 00:00:08,030

And in this story you are going to implement the and drama fit inside our mind.



3

00:00:08,100 --> 00:00:10,020

My custom view class.



4

00:00:10,260 --> 00:00:12,680

First of all let me show you are instance variables.



5

00:00:12,690 --> 00:00:17,220

As you can see we initialize all of these instance variables inside our constructor.



6

00:00:17,220 --> 00:00:22,010

Now Vinita create another instance variable of type paint.



7

00:00:22,110 --> 00:00:30,930

So let's say that it is private and it is of paper paint its name is going to be paint object name it



8

00:00:30,990 --> 00:00:37,110

as paint object because the paint object is going to do the drawing and the view a custom view on the



9

00:00:37,110 --> 00:00:37,500

screen.



10

00:00:37,500 --> 00:00:39,440

So we need this object.



11

00:00:39,600 --> 00:00:43,440

Now we need to initialize this object inside our constructor.



12

00:00:43,650 --> 00:00:52,380

So after calling this Super constructor here inside our custom you constructor to initialize our paint



13

00:00:52,380 --> 00:00:54,090

object we need to say paint object.



14

00:00:54,090 --> 00:01:01,780

Assignment operator new paint semi-colon.



15

00:01:01,860 --> 00:01:08,490

Now that we initialized our paint object we need to implement the underarm F-ed inside my custom class



16

00:01:08,850 --> 00:01:16,290

because we want to draw our custom view on the screen so we must implement our drummer fit inside our



17

00:01:16,290 --> 00:01:16,620

class.



18

00:01:16,620 --> 00:01:18,390

So let's scroll down here.



19

00:01:18,630 --> 00:01:29,850

And before the end in curly brace about my custom view class you can say on drop on we need to specify



20

00:01:30,150 --> 00:01:33,050

that want what we are going to draw on the screen.



21

00:01:33,330 --> 00:01:39,670

Let me show you the components the default components that the Android provides us with.



22

00:01:39,720 --> 00:01:42,870

So open the activity underly minute examine here.



23

00:01:43,320 --> 00:01:47,890

Now take a look at this palette section we have this button or this Tuggle button.



24

00:01:47,960 --> 00:01:53,940

You can see that most of these components especially that button or the text views most of them are



25

00:01:54,030 --> 00:01:55,460

rectangles.



26

00:01:55,860 --> 00:01:56,640

Right.



27

00:01:56,640 --> 00:02:01,930

How about creating a circular pattern or a circular text view.



28

00:02:02,190 --> 00:02:09,270

We already have a rectangular button or a rectangular text view or for example this checkbox.



29

00:02:09,690 --> 00:02:15,990

So if I drag a checkbox here as you can see it is in a rectangle shape right.



30

00:02:16,010 --> 00:02:22,700

If you have this checkbox takes and this view here in order to specify the checkbox.



31

00:02:22,830 --> 00:02:26,200

So let me deal it this component here.



32

00:02:26,220 --> 00:02:32,430

Now let's go inside are my custom view that of a file and here inside this unjam if it let's create



33

00:02:32,640 --> 00:02:38,430

a circle a circular component if you want to you can actually create a rectangular component or anything



34

00:02:38,430 --> 00:02:42,330

you want but here you want to actually create a circle.



35

00:02:42,330 --> 00:02:44,850

So first let's set this tie.



36

00:02:45,300 --> 00:02:50,910

Now we can say paint up text that sets style sets.



37

00:02:50,920 --> 00:02:53,580

Right now we can refer to the paint class.



38

00:02:53,580 --> 00:03:02,230

So paint that's tyle that feel if you take a look at these values here we have this feel and stroke



39

00:03:02,500 --> 00:03:03,190

stroke.



40

00:03:03,410 --> 00:03:13,160

So let's choose feel now let's set the anti-alias attributes so let's say paint object that said anti-alias



41

00:03:13,700 --> 00:03:14,260

true.



42

00:03:14,290 --> 00:03:18,820

So let's hold down to come on here on a keyboard and then click on this method.



43

00:03:18,920 --> 00:03:20,450

Take a look at this documentation.



44

00:03:20,450 --> 00:03:26,180

Here it says anti-aliasing smooths out the edges of bodies being drawn.



45

00:03:26,420 --> 00:03:30,890

But it has no impact on the interior of the shape.



46

00:03:31,180 --> 00:03:31,640

OK.



47

00:03:31,730 --> 00:03:40,760

So let's close this wide and here let's set the color of our circle so we can say paint object that



48

00:03:40,970 --> 00:03:48,720

set color and we already created an instance variable for the view colors so we can say View color.



49

00:03:48,800 --> 00:03:51,620

So now it's time to draw the circle on the screen.



50

00:03:51,770 --> 00:04:00,660

Now we can say canvas we have this canvas object from this upright meter here Dot draw.



51

00:04:00,950 --> 00:04:03,740

So this is a very important Smurfit draw.



52

00:04:04,040 --> 00:04:04,940

So take a look at this.



53

00:04:04,970 --> 00:04:07,020

If it's here we have dry text.



54

00:04:07,160 --> 00:04:10,470

We have just Selker a circle which we are going to use now.



55

00:04:10,670 --> 00:04:12,000

We have dropped our.



56

00:04:12,110 --> 00:04:14,990

We have a bitmap.



57

00:04:14,990 --> 00:04:17,770

We have color line oval.



58

00:04:18,110 --> 00:04:20,890

As you can see we have draw picture.



59

00:04:21,080 --> 00:04:28,000

We can draw everything that we want right at the end of this app and at the end of the story else I



60

00:04:28,090 --> 00:04:30,850

am going to guide you to the official documentation.



61

00:04:31,250 --> 00:04:35,790

And then you will be able to do what ever you want of your custom views.



62

00:04:35,870 --> 00:04:38,490

But for now we want to use the draw circle method.



63

00:04:38,510 --> 00:04:39,680

This one.



64

00:04:40,160 --> 00:04:41,370

So let's use this method.



65

00:04:42,550 --> 00:04:44,430

And here we need to pass some arguments.



66

00:04:44,430 --> 00:04:52,220

The first one is the float circle X the x value of our shape or our view on the screen.



67

00:04:52,330 --> 00:04:55,880

So I'm going to pass for for example 200 comma.



68

00:04:56,310 --> 00:04:59,640

We have float circle why again.



69

00:04:59,670 --> 00:05:02,680

I'm going to pass for example 200 comma.



70

00:05:03,150 --> 00:05:07,430

We have the radius so we can specify a radius for our circle.



71

00:05:07,470 --> 00:05:13,560

Was going to say for example 50 comma and you need to pass the paint object.



72

00:05:13,560 --> 00:05:21,220

So because we say paint object now it's time to specify the text inside our circle.



73

00:05:21,420 --> 00:05:27,900

So after this line of code I am going to first of all specify the color of our text so we can say paint



74

00:05:27,900 --> 00:05:36,960

object that set color and here is a text color and we can also specify the position of the text inside



75

00:05:36,960 --> 00:05:37,990

our circle.



76

00:05:38,040 --> 00:05:45,540

So you can say paint object that set text a line you're really first to paint.



77

00:05:45,600 --> 00:05:48,460

Class that line dot.



78

00:05:48,660 --> 00:05:52,290

We have a center left right through the center.



79

00:05:52,290 --> 00:05:57,720

Let's also specify the text size of our text inside our view.



80

00:05:57,720 --> 00:06:05,760

We can say paint object that said pixel size as you can see all of these works are done by the paint



81

00:06:05,810 --> 00:06:06,420

optics.



82

00:06:06,450 --> 00:06:11,520

We have these text size text look and scale X on all of these methods.



83

00:06:11,700 --> 00:06:16,290

So I just use this one here text size and we can say for example Fretty.



84

00:06:16,290 --> 00:06:21,010

Finally we are going to draw the text inside our view.



85

00:06:21,060 --> 00:06:30,630

We say canvas that draw text draw takes and here let's refer to our instance variable for the view text.



86

00:06:30,630 --> 00:06:35,650

So we have this view Text Camera and we have this thart.



87

00:06:35,800 --> 00:06:41,380

So for this tartlets choose the value to two hundred and forty and let's use the value 200.



88

00:06:41,470 --> 00:06:46,690

As you can see it is values at these values that I've put here for the start and the end the x and y



89

00:06:47,020 --> 00:06:50,220

are the same for the circle X and the circle y.



90

00:06:50,320 --> 00:06:53,890

You can't change these values if you want in order to see what happens.



91

00:06:54,220 --> 00:06:57,170

And here you need to pass the paint object.



92

00:06:57,170 --> 00:06:58,690

So paint object.