Hey there.
We have already used images in previous projects in these we do.
I want to tell you something else about the work with images.
We will learn how to use animations in Android.
Let's create a project in which we make one image disappear and another appears in its place to do this.
We need to download these images.
Of course I love the Tom and Jerry cartoon.
So let's download this characters.
Let me go to Wikipedia
and type here in the search for Tom Cat polo.
This link
as you see here our cat Tom.
And if we click on this arrow we will see all the versions of cats that were from the beginning of the
creation of this character.
Let's download this image image to a computer right click on the image and select Save image has save
it
and do the same for Jerry
Jerry Mouse
and here Jerry Mouse.
Let's go to this page.
Click on this image.
And here in the same way all the characters of Jerry's mouse download these file the same way
and now.
Let's first open now.
The image of a cat on the Mac images opened by default in the preview program in which I can edit the
image.
If you have a windows computer you may need to install some sort of image editor and Googling.
And I think you will find a sufficient number of such programs.
Well I'll choose Tom cut this image and create a new file from the clipboard and then say I just call
it Tom.
And here is another point you need to name the files that are placed in the project androids to do with
a small letter.
These are the new requirements that have appeared in the new version of Android Studio version 3.
One of their requirements is to specify the names or the files that tie in their resources using small
letters numbers and on the scores uppercase letters cannot be used.
Let's keep it all on the desktop cause these files
no I hope on Jerry's evolution in downloads here too I cut out the latest version of Jerry.
I just copied you can even copy and create a new file.
Ha.
Here you see a small part of the previous version.
I'll erase it carefully.
Here's another piece.
Also erase it.
Probably you also need to delete the year.
The model was created.
And leave only the image itself.
I sent the file.
Call it Jerry.
Also on the desktop.
Cause these files again.
And let's open our Tom and also take away the year
save this file again and close it.
So let's now create new androids to your project.
Let's call it Tom and Jerry
click.
Next.
Next one more.
Next and finish
well.
Now we need to put our images in the rest folder.
And in this folder drivable folder to do this.
Let me go to the desktop.
You can go to your folder or windows.
You can simply drag and drop these files.
Maybe remember what I said but it doesn't work on a Mac.
Here you need to copy files using common see and paste using commentary
Well let's see.
Everything is fine.
The files are in place.
And now let's go to the activity main let's select the design tab let's enlarge the image the view for
convenience.
Get rid of the default text and let's leave this time constraint layout for a change we put in the image
view in constraint layout select
row in the project all file our cat click Okay.
And as you can see here is a red circle with an exclamation mark.
It says that the view is not constrained not attached and it is located on the screen.
In this position only during design mode and if we are on the application this image of you will jump
to position 0 0 0 that takes position will be zero and y position will be zero position over the x y
scale start there from the upper left corner.
That is our image you will move to this corner.
Let's check it.
Let's run our application on the emulator or on the real device and let's see if this is true
yes and yes I see everything in right.
The image you has moved to the upper left corner by default then saw that it is located where we need
it in the middle.
We need to install constraints so-called.
Let's drag it to the middle and move on that on to the constraints.
Installation mode.
And here we just click on plasters All right.
And this sets our constraint to the right age of our parent allowed on the left it can attach to the
left edge from there both to the top and from below to the bottom.
Everything is very simple.
Now we can start the application and everything should work.
Why image should remain in the same place as you see everything worked out and now we need to click
on this image to make it disappear and instead an image of our mouse Jerry appeared first.
Let's think about how we can implement these behavior.
You've probably guessed that we need to set a lock for the bottom to say that on click attribute go
to the text.
That and here let's rename our image you give it the name Tom we match for you.
And here we will set the attribute on clique and call our method erase.
Tall
let's create it in main activity.
And now inside this method we need to create the variable image you name it.
Tom we miss you
and bind it with our image you and our all out since here these are the I.D. told me to you.
Here we specify this idea and further in order for this image to disappear.
We need to set it it's all up property to the 0 2 0.
Maybe remember I once told you that images have such an attribute as our.
If we go to the tab where all the attributes are displayed here's the art of a property and if we set
it to zero point five the image will become half transparent.
As you can see if for example a zero point two.
Then it will be become almost completely transparent.
Well if 0.
Then it will disappear completely.
Alpha is measured from 0 to 1.
Let's remove this attribute for now.
Leave the image completely non transparent and we need to dynamically change the image.
Change the idea for how it's done.
The variable image you made up is called in this variable animate and then said that all of these image
you will set it to 0.
That is we make that image disappear completely.
And here we said that duration of this this appearance using the set duration method.
For example three seconds in milliseconds it will be three thousand milliseconds and now we can check
what we did
let's click on the cat image
and cool it has disappeared we can change this value so that the image disappears faster or slow it
can also change the alpha value.
If we want it to not disappear completely.
But for now we will leave everything as it is.
And now we want a masterpiece instead of top to do this.
We need first to create another image you let's go to text mode copy our time we missed you and pasted
the law.
Change the name to dairy here in the idea and also change the name of our file.
Also to Jerry and let's see what happened here is see an image of Jerry appeared from the top of Tom.
Why is it on top.
Because in the layout view below it is superimposed on the one a written a book.
That is if we swapped them insert the Jerry image you a bowl.
It will be the other way Tom is superimpose on Jerry.
Let's get everything back and now let's make Jerry not visible from the start.
To do this said the alpha attribute in its sign it the value 0 initially.
Well let's see.
And as you see the image U is displayed and the image itself is transparent.
What now needs to be done in our main activity in our error is Tom method.
Let's copy this code
paste it here only here we change to Jerry image you and of course associate with Jerry image you an
all out idea we have Jerry image you like.
Remember
and here we will also specify the jury animate variable only here in a set of 0 we will indicate one
and that is we change from 0 to 1 for 3 seconds we check
and let's click and what a char insert of a cat we got a mouse.
Well now a little challenge for you.
Think about how to implement the behavior of the application so that with each click the image changes
from cat and mouse and vice versa.
Maybe you will need to google and search for a solution on the Internet.
As I said searching for information on the Internet is a very important skill for a programmer.
Good luck and see you in the next lecture.