Hire everyone in this tutorial we're going to go ahead and create another Android application.
So here are click on this start in your Android studio project and here for the application name just
type in here app.
First the nine flipped image flip the image OK and then click on next and here choose.
AP is 16 Android 4.1 Jelly Bean for minimum STK and then click on next and here choose our plant activity
next and then click on finish.
Now let's actually select this hello world takes few here and then person delete key on your keyboard
and then are here.
Double click on this race folder here.
Lay out and then activity underline that example and here choose this faluting action button and then
press delete key on your keyboard.
OK so now let's actually go back into this content underline minute example.
And now we want to actually design the user interface of our application.
So now let me show you a demo of the application that we want to actually create in this theater.
So as you can see here this is our application that we want to create.
First of all we have vertical scroll view in our layout.
And as you can see here this is our image.
Okay.
And I can actually click on these buttons here this next button and this previous button in order to
actually to change the image.
OK.
So this image as you can see here are images are inside of you flipper.
OK.
And as you can see here if you scroll down and this image and other images are inside of you animator.
OK.
And this of you flipper and this view animator actually behaving the same.
OK.
So if I click on this next image button here.
So as you can see here we have this image buttons here.
OK.
And these are actually images and we can actually use them as buttons.
OK.
So if I click on the next button and as you can see if you have you can see this image.
And if you actually click on the previous button you can see this previous image here.
OK.
And here as you can see if I scroll down now as you can see we have this image here.
OK.
And again if I click on the next button.
Now as you can see this image actually changes too.
OK.
So if you have these image buttons here for actually changing the images of these these two components
of the flipper and these are animated.
And if we actually click on previous We can see these previous image OK.
And as you can see here we have two different animation effects in this application as you can see here.
Now you can see that the animation effects are actually different.
So let's actually go and create this application.
So first of all we need to actually track a linearly out of vertical OK.
At the center of this relatively out here.
OK.
And then we need to actually track R-SC of actually the vertical scroll view as you can see here this
is a vertical scroll inside these containers for that.
OK.
So just like it and put it inside these are linearly aesthetical OK so you can actually put it at the
center of this linearly with vertical.
OK.
And then it's actually the drag and there are linearly out vertical So as you know scroll views can
only accept one dearer child.
OK so we can actually put this linearly alphabetical into this scroll view here.
OK.
And now you can actually put our own user interface components into this are linearly Ellsworthy call
here.
OK so now let's actually change the background color of our relay out.
So just select this relatively out here and then select the background attribute here.
As you can see and I put this value here hash tag 0 0 0.
So this value as you can see here is for the black color OK.
And if I press on energy on my keyboard.
Now as you can see the background color of my layout is actually changed.
OK so now let's actually drag of your flipper into this or linearly or vertical that is inside of this
scroll view.
So as you can see here inside these experts there as you can see we can find this of you flipper here.
OK.
So just select it and put it inside this linearly elsewheres the call here.
OK.
As you can see it linearly aesthetical is here are the top left corner here.
OK.
And I want to actually put it at the center of this linearly and swear to god.
So I just need to select this linearly as vertical here.
OK.
And then I need to actually find a diagram with the attributes.
This is the gravity attribute for the nearly 20 call and then the selectees center check box here and
check this checkbox.
OK.
And now if we actually click on this if you flip it it is now still here at the top left hand corner.
And if I actually select this linearly as vertical here again I need to actually select this center
attribute here and if I select this of you flip it now it is at the center.
So now let's actually select selectees scroll.
This vertical scroll view here OK.
As you can see and there are actually as you can see if you have these little TVs and they are tight.
OK.
And this is Metropolit.
OK.
So here just select it.
And he had a click on these button here as you can see and now we can actually click on this Arap content
here.
OK.
And again select this right here and then click on this button here.
As you can see and then select this wrap content.
And now as you can see our scroll view is at the center of this linearly outwards the color key and
are usually Pert is also at the center of this linearly Ellsworth's the call.
OK so now let's actually track a linearly out horizontal into this linearly or two article here.
So just select this linearly and horizontal and put it inside this linearly vertical here.
OK.
So as you can see here are linearly and here is actually at the center of this linearly as vertical
and it is actually below this of your Flipper here.
OK so now let's actually try to image buttons as you can see we have a component as you can see it says
it.
Its name is image button.
OK so we can use it as buttons.
OK.
So just select it and put it inside.
These are linearly linearly at horizontal.
OK.
And let's actually try another image but then introduce linearly or horizontal.
So if you have two image buttons inside this linearly out horizontal.
So now let's actually drag our two images into our project.
OK.
So here I need to actually have these images here.
I actually uploaded these images in the resources section of this tutorial.
OK.
So you can I should be selective.
You can actually download them.
OK.
So here I just need to select these images and then right click on them and then click on copy 2 items.
OK.
And here I just need to click on this driveable folder right click on it.
And here I just need to click on paste as you can see here we have this paste option here.
But just click on it.
So as you can see here I need to click on.
OK.
So as you can see the name of my image is next to p PMG.
And here it is.
Its name is a previous that.
OK so now let's actually give an idea to these two image buttons here.
So just select this image button and now we can find the the ID attribute here.
So this is the ID attribute of this image button and for the ID just type in here PTEN animal image
next.
OK.
And then I need to press Enter key on my keyboard.
OK.
And here I select this image button here and for the ID just type in here PTEN animal image.
Previous OK and in person and Turkey on your keyboard.
Let's actually track you animator into these are linear layouts vertical here that is inside of this
scroll view.
OK.
So just as you can see here in say the experts fall there if you have this view animator here.
OK so just select it and put it inside this linearly out vertical here.
So as you can see here I have this of your animator here.
So if you actually click close this linearly as horizontal here now you can see this value.
This component is actually below.
These other components here.
OK so now as you can see here do actually to give an idea of you flipper and this animator but the default
idea is actually enough for this tutorial as you can see here we have this idea if you flipper and we
have this idea of you animate here for these two components.
OK.
So now the design of our user interface is actually finished but by the way before we actually go to
our main activity that Joe will fight and putting our own coats there we need to actually give an image
to these two image buttons here.
So just select the APTN and emoluments next.
Here and here you can actually find the C attributes.
So as you can see this is that the is the attribute.
So just select it and here you can see this button here.
OK.
So just click on the spot in here and then select this project tab here.
And now I can actually serves for my image name.
And here you can see inside this triable folder.
I have this my image is here.
OK.
So here as you can see if I scroll down now you can see these images here.
This next image and this previous image.
So I just need to select this next image here and then click on OK here.
OK.