1

00:00:00,290 --> 00:00:05,880

Hire everyone in this tutorial we're going to go ahead and create another Android application.



2

00:00:05,880 --> 00:00:11,270

So here are click on this start in your Android studio project and here for the application name just



3

00:00:11,270 --> 00:00:12,500

type in here app.



4

00:00:12,750 --> 00:00:23,230

First the nine flipped image flip the image OK and then click on next and here choose.



5

00:00:23,240 --> 00:00:31,500

AP is 16 Android 4.1 Jelly Bean for minimum STK and then click on next and here choose our plant activity



6

00:00:31,680 --> 00:00:35,470

next and then click on finish.



7

00:00:35,490 --> 00:00:41,010

Now let's actually select this hello world takes few here and then person delete key on your keyboard



8

00:00:41,580 --> 00:00:42,850

and then are here.



9

00:00:42,950 --> 00:00:45,110

Double click on this race folder here.



10

00:00:45,240 --> 00:00:51,360

Lay out and then activity underline that example and here choose this faluting action button and then



11

00:00:51,360 --> 00:00:53,030

press delete key on your keyboard.



12

00:00:53,050 --> 00:00:57,930

OK so now let's actually go back into this content underline minute example.



13

00:00:58,020 --> 00:01:01,830

And now we want to actually design the user interface of our application.



14

00:01:02,100 --> 00:01:07,940

So now let me show you a demo of the application that we want to actually create in this theater.



15

00:01:08,070 --> 00:01:11,180

So as you can see here this is our application that we want to create.



16

00:01:11,250 --> 00:01:15,130

First of all we have vertical scroll view in our layout.



17

00:01:15,270 --> 00:01:17,260

And as you can see here this is our image.



18

00:01:17,280 --> 00:01:17,540

Okay.



19

00:01:17,550 --> 00:01:25,050

And I can actually click on these buttons here this next button and this previous button in order to



20

00:01:25,050 --> 00:01:26,270

actually to change the image.



21

00:01:26,310 --> 00:01:26,730

OK.



22

00:01:26,940 --> 00:01:30,830

So this image as you can see here are images are inside of you flipper.



23

00:01:30,900 --> 00:01:31,530

OK.



24

00:01:31,830 --> 00:01:38,550

And as you can see here if you scroll down and this image and other images are inside of you animator.



25

00:01:38,550 --> 00:01:39,020

OK.



26

00:01:39,180 --> 00:01:44,550

And this of you flipper and this view animator actually behaving the same.



27

00:01:44,580 --> 00:01:45,110

OK.



28

00:01:45,330 --> 00:01:49,000

So if I click on this next image button here.



29

00:01:49,020 --> 00:01:51,270

So as you can see here we have this image buttons here.



30

00:01:51,270 --> 00:01:52,130

OK.



31

00:01:52,150 --> 00:01:56,370

And these are actually images and we can actually use them as buttons.



32

00:01:56,370 --> 00:01:56,890

OK.



33

00:01:56,910 --> 00:02:01,710

So if I click on the next button and as you can see if you have you can see this image.



34

00:02:01,890 --> 00:02:06,570

And if you actually click on the previous button you can see this previous image here.



35

00:02:06,570 --> 00:02:07,410

OK.



36

00:02:08,070 --> 00:02:13,340

And here as you can see if I scroll down now as you can see we have this image here.



37

00:02:13,440 --> 00:02:13,880

OK.



38

00:02:14,040 --> 00:02:16,090

And again if I click on the next button.



39

00:02:16,230 --> 00:02:18,970

Now as you can see this image actually changes too.



40

00:02:19,020 --> 00:02:19,560

OK.



41

00:02:19,710 --> 00:02:25,950

So if you have these image buttons here for actually changing the images of these these two components



42

00:02:26,180 --> 00:02:28,340

of the flipper and these are animated.



43

00:02:28,350 --> 00:02:34,160

And if we actually click on previous We can see these previous image OK.



44

00:02:34,470 --> 00:02:40,530

And as you can see here we have two different animation effects in this application as you can see here.



45

00:02:40,560 --> 00:02:44,970

Now you can see that the animation effects are actually different.



46

00:02:44,970 --> 00:02:47,830

So let's actually go and create this application.



47

00:02:48,030 --> 00:02:52,160

So first of all we need to actually track a linearly out of vertical OK.



48

00:02:52,260 --> 00:02:54,870

At the center of this relatively out here.



49

00:02:54,930 --> 00:02:55,850

OK.



50

00:02:55,950 --> 00:03:01,710

And then we need to actually track R-SC of actually the vertical scroll view as you can see here this



51

00:03:01,710 --> 00:03:04,230

is a vertical scroll inside these containers for that.



52

00:03:04,230 --> 00:03:05,050

OK.



53

00:03:05,070 --> 00:03:10,080

So just like it and put it inside these are linearly aesthetical OK so you can actually put it at the



54

00:03:10,080 --> 00:03:12,680

center of this linearly with vertical.



55

00:03:12,810 --> 00:03:13,480

OK.



56

00:03:13,890 --> 00:03:20,070

And then it's actually the drag and there are linearly out vertical So as you know scroll views can



57

00:03:20,100 --> 00:03:21,930

only accept one dearer child.



58

00:03:21,960 --> 00:03:27,540

OK so we can actually put this linearly alphabetical into this scroll view here.



59

00:03:27,780 --> 00:03:28,370

OK.



60

00:03:28,590 --> 00:03:33,660

And now you can actually put our own user interface components into this are linearly Ellsworthy call



61

00:03:33,660 --> 00:03:34,050

here.



62

00:03:34,080 --> 00:03:38,470

OK so now let's actually change the background color of our relay out.



63

00:03:38,520 --> 00:03:42,920

So just select this relatively out here and then select the background attribute here.



64

00:03:42,930 --> 00:03:46,990

As you can see and I put this value here hash tag 0 0 0.



65

00:03:47,010 --> 00:03:49,930

So this value as you can see here is for the black color OK.



66

00:03:50,040 --> 00:03:51,930

And if I press on energy on my keyboard.



67

00:03:52,080 --> 00:03:56,220

Now as you can see the background color of my layout is actually changed.



68

00:03:56,240 --> 00:04:03,450

OK so now let's actually drag of your flipper into this or linearly or vertical that is inside of this



69

00:04:03,660 --> 00:04:04,310

scroll view.



70

00:04:04,430 --> 00:04:09,770

So as you can see here inside these experts there as you can see we can find this of you flipper here.



71

00:04:09,780 --> 00:04:10,320

OK.



72

00:04:10,380 --> 00:04:14,680

So just select it and put it inside this linearly elsewheres the call here.



73

00:04:14,730 --> 00:04:15,190

OK.



74

00:04:15,360 --> 00:04:20,650

As you can see it linearly aesthetical is here are the top left corner here.



75

00:04:20,730 --> 00:04:21,430

OK.



76

00:04:21,720 --> 00:04:26,860

And I want to actually put it at the center of this linearly and swear to god.



77

00:04:26,880 --> 00:04:29,750

So I just need to select this linearly as vertical here.



78

00:04:29,820 --> 00:04:30,420

OK.



79

00:04:30,720 --> 00:04:34,950

And then I need to actually find a diagram with the attributes.



80

00:04:35,010 --> 00:04:43,230

This is the gravity attribute for the nearly 20 call and then the selectees center check box here and



81

00:04:43,230 --> 00:04:45,070

check this checkbox.



82

00:04:45,090 --> 00:04:46,090

OK.



83

00:04:46,110 --> 00:04:53,000

And now if we actually click on this if you flip it it is now still here at the top left hand corner.



84

00:04:53,190 --> 00:04:59,730

And if I actually select this linearly as vertical here again I need to actually select this center



85

00:04:59,730 --> 00:05:04,470

attribute here and if I select this of you flip it now it is at the center.



86

00:05:04,470 --> 00:05:07,540

So now let's actually select selectees scroll.



87

00:05:07,630 --> 00:05:09,590

This vertical scroll view here OK.



88

00:05:09,600 --> 00:05:14,570

As you can see and there are actually as you can see if you have these little TVs and they are tight.



89

00:05:14,580 --> 00:05:15,110

OK.



90

00:05:15,160 --> 00:05:17,450

And this is Metropolit.



91

00:05:17,460 --> 00:05:18,020

OK.



92

00:05:18,210 --> 00:05:19,620

So here just select it.



93

00:05:19,830 --> 00:05:27,830

And he had a click on these button here as you can see and now we can actually click on this Arap content



94

00:05:27,830 --> 00:05:28,240

here.



95

00:05:28,310 --> 00:05:28,890

OK.



96

00:05:29,060 --> 00:05:33,640

And again select this right here and then click on this button here.



97

00:05:33,710 --> 00:05:37,270

As you can see and then select this wrap content.



98

00:05:37,400 --> 00:05:43,520

And now as you can see our scroll view is at the center of this linearly outwards the color key and



99

00:05:43,610 --> 00:05:47,200

are usually Pert is also at the center of this linearly Ellsworth's the call.



100

00:05:47,400 --> 00:05:54,760

OK so now let's actually track a linearly out horizontal into this linearly or two article here.



101

00:05:54,830 --> 00:06:00,190

So just select this linearly and horizontal and put it inside this linearly vertical here.



102

00:06:00,200 --> 00:06:00,670

OK.



103

00:06:00,860 --> 00:06:05,690

So as you can see here are linearly and here is actually at the center of this linearly as vertical



104

00:06:05,890 --> 00:06:08,580

and it is actually below this of your Flipper here.



105

00:06:08,630 --> 00:06:17,370

OK so now let's actually try to image buttons as you can see we have a component as you can see it says



106

00:06:17,630 --> 00:06:17,970

it.



107

00:06:18,080 --> 00:06:19,520

Its name is image button.



108

00:06:19,520 --> 00:06:21,260

OK so we can use it as buttons.



109

00:06:21,260 --> 00:06:21,670

OK.



110

00:06:21,770 --> 00:06:23,810

So just select it and put it inside.



111

00:06:23,810 --> 00:06:26,760

These are linearly linearly at horizontal.



112

00:06:26,790 --> 00:06:27,430

OK.



113

00:06:27,770 --> 00:06:32,210

And let's actually try another image but then introduce linearly or horizontal.



114

00:06:32,390 --> 00:06:36,510

So if you have two image buttons inside this linearly out horizontal.



115

00:06:36,800 --> 00:06:40,330

So now let's actually drag our two images into our project.



116

00:06:40,340 --> 00:06:40,940

OK.



117

00:06:41,270 --> 00:06:45,000

So here I need to actually have these images here.



118

00:06:45,050 --> 00:06:49,910

I actually uploaded these images in the resources section of this tutorial.



119

00:06:49,910 --> 00:06:50,470

OK.



120

00:06:50,610 --> 00:06:52,800

So you can I should be selective.



121

00:06:53,120 --> 00:06:54,160

You can actually download them.



122

00:06:54,200 --> 00:06:54,740

OK.



123

00:06:54,980 --> 00:07:00,790

So here I just need to select these images and then right click on them and then click on copy 2 items.



124

00:07:00,790 --> 00:07:01,250

OK.



125

00:07:01,400 --> 00:07:04,940

And here I just need to click on this driveable folder right click on it.



126

00:07:05,330 --> 00:07:10,950

And here I just need to click on paste as you can see here we have this paste option here.



127

00:07:11,030 --> 00:07:12,420

But just click on it.



128

00:07:12,470 --> 00:07:14,330

So as you can see here I need to click on.



129

00:07:14,360 --> 00:07:15,020

OK.



130

00:07:15,200 --> 00:07:15,660

OK.



131

00:07:15,770 --> 00:07:18,580

So as you can see the name of my image is next to p PMG.



132

00:07:18,590 --> 00:07:20,560

And here it is.



133

00:07:20,570 --> 00:07:22,170

Its name is a previous that.



134

00:07:22,260 --> 00:07:27,860

OK so now let's actually give an idea to these two image buttons here.



135

00:07:27,860 --> 00:07:32,350

So just select this image button and now we can find the the ID attribute here.



136

00:07:32,360 --> 00:07:40,670

So this is the ID attribute of this image button and for the ID just type in here PTEN animal image



137

00:07:41,750 --> 00:07:42,760

next.



138

00:07:43,240 --> 00:07:43,770

OK.



139

00:07:43,940 --> 00:07:47,260

And then I need to press Enter key on my keyboard.



140

00:07:47,790 --> 00:07:48,320

OK.



141

00:07:48,440 --> 00:07:57,830

And here I select this image button here and for the ID just type in here PTEN animal image.



142

00:07:58,210 --> 00:08:03,740

Previous OK and in person and Turkey on your keyboard.



143

00:08:03,860 --> 00:08:10,010

Let's actually track you animator into these are linear layouts vertical here that is inside of this



144

00:08:10,160 --> 00:08:10,770

scroll view.



145

00:08:10,790 --> 00:08:11,350

OK.



146

00:08:11,540 --> 00:08:16,700

So just as you can see here in say the experts fall there if you have this view animator here.



147

00:08:16,700 --> 00:08:22,170

OK so just select it and put it inside this linearly out vertical here.



148

00:08:22,430 --> 00:08:25,690

So as you can see here I have this of your animator here.



149

00:08:25,730 --> 00:08:30,420

So if you actually click close this linearly as horizontal here now you can see this value.



150

00:08:30,470 --> 00:08:32,290

This component is actually below.



151

00:08:32,290 --> 00:08:33,880

These other components here.



152

00:08:33,890 --> 00:08:42,410

OK so now as you can see here do actually to give an idea of you flipper and this animator but the default



153

00:08:42,470 --> 00:08:48,920

idea is actually enough for this tutorial as you can see here we have this idea if you flipper and we



154

00:08:48,920 --> 00:08:52,150

have this idea of you animate here for these two components.



155

00:08:52,160 --> 00:08:52,760

OK.



156

00:08:52,940 --> 00:08:58,610

So now the design of our user interface is actually finished but by the way before we actually go to



157

00:08:58,610 --> 00:09:05,600

our main activity that Joe will fight and putting our own coats there we need to actually give an image



158

00:09:05,600 --> 00:09:08,330

to these two image buttons here.



159

00:09:08,360 --> 00:09:10,580

So just select the APTN and emoluments next.



160

00:09:10,600 --> 00:09:14,560

Here and here you can actually find the C attributes.



161

00:09:14,570 --> 00:09:17,610

So as you can see this is that the is the attribute.



162

00:09:17,780 --> 00:09:20,500

So just select it and here you can see this button here.



163

00:09:20,510 --> 00:09:20,940

OK.



164

00:09:20,990 --> 00:09:25,910

So just click on the spot in here and then select this project tab here.



165

00:09:26,150 --> 00:09:28,530

And now I can actually serves for my image name.



166

00:09:28,550 --> 00:09:30,940

And here you can see inside this triable folder.



167

00:09:31,070 --> 00:09:32,570

I have this my image is here.



168

00:09:32,570 --> 00:09:33,000

OK.



169

00:09:33,050 --> 00:09:37,800

So here as you can see if I scroll down now you can see these images here.



170

00:09:37,850 --> 00:09:40,150

This next image and this previous image.



171

00:09:40,280 --> 00:09:44,580

So I just need to select this next image here and then click on OK here.



172

00:09:44,750 --> 00:09:45,100

OK.