Hey there.
In this lecture I want to show you how to add an image or the icons that are in Android Studio.
This is pretty simple.
We click on the draw.
Both folders with the right mouse button then click on new.
And here you see two options image asset and vector as let's click on that image as an option.
Here we see various icons on the top line.
We can select the type of fly can we are looking for here the launch icons type is not selected.
These are the icons with which our application is launched from the screen over the phone or emulator.
If we minimize the application and here we will see that there are such icons that are used in all applications
that we create music show and also playing audio you see the exact same icon is by default this icon
looks like round image with an android Let's chew or close this window and I will show you where these
icons are in project they are in the meat map folder and here is the icy launcher and I see a launcher
around folders as you can see here are a few pane G files if you open them and they all look the same
differing only in the resolutions also below is the XM mail display.
This file is so called vector image which is a return using the example code and the P and G files are
ordinary images.
Therefore we can immediately view them as soon as we open them.
Here are a few of them.
Let me expand this panel a bit.
At the end of each file in parentheses is the resolution of these file is d P.I. aimed API X aged API.
An API.
This is the medium resolution.
If we increase it then it becomes blurry.
Aged API.
This means higher resolution.
Let's open this file and see that it is not so blurry anymore when we zoom it next X aged API.
It is even with a higher resolution.
Next is to x age API and high resolution is 3 x age DB by but if we increase it way too much it will
become blurry anyway why are 5 different types of images used one image with highest image could be
said the fact is that the higher the resolution of the image the more it applies memory therefore for
for devices with a lower resolution a lower resolution of images is used for devices with a higher screen
resolution a high image resolution is used.
What is the essence of vector images vector images are displayed on all devices with any resolution.
In the same way and it will never be broad.
If you increase it even the largest being G image with the highest resolution it still gets blurry.
If you enlarge it vector image that is built using the x AML code.
It will never be blocked why not always use vector images instead of the usual p n g images and the
fact is that vector images for their displaying require processing of the example code by the process.
Here is the code to display an image the processor should process this code and build this image on
the screen.
Based on this example code there for vector images consume processor resources during display.
You can read more about this if you are interested in a vector and a regular images about pluses and
minuses of these images and real Let's close all the files now.
Open our file actively to me and place the image here let's PWD and I can hear click on the draw Bill.
Then new and then from there begin and select image as a pencil as we have already seen here.
There are icons launcher icons for that we can select the launcher icons here such icons next other
icons for the action bar and the icons for notification these are different types of display icons.
We'll see how it will look at this icon.
We look with a square wide background at the back.
These icons will look like these
these icons will look without a background that is the icon itself and the icons for notifications will
look like these a white image with a black background.
Further we can here to select the icon itself.
If you click on this icon then we are get a wig.
We get a large number of icons which you can now see they can be selected in various sections all icons
on our selected here.
If you click action then the icons of various actions will be displayed here.
There are already fewer displays.
Next stop is a load
next is a V.
Order and video icons can be found here well and a lot of different content or you can type in in the
search by keyword but select everything.
And if we are right play then the various icons with the Turks play in the title for example play are
all that is displayed in the player or for example type music it will search for the keyword music for
example let's say like this icon and click Okay.
Now it is displayed as notification if we want it to be displayed without these black background then
we need to select action bar and type icons.
And here again we need to select the icon so music and again the same icon and you see it is now displayed
without background.
Now let's close this window and again select Victor.
Now and Here is a slightly different option selection in the window.
Let's leave this size the same.
For example let's change the color or the icon.
We can move the slide here and select and a call from the circle which we want.
For example let's choose a blue collar.
Let's choose and you see that the icon is displayed in blue and next click next and finish
and the second now appears in our drivable folder.
So it appear I see music black through into for the B and let's rename it we could rename it right away
when we created it.
Or we can rename it here with a refactor and rename and let's right here not black but blue because
it is no longer black but blue collective factor and if we open these file now you will see that the
symbol code for display in this image is situated here.
That is we cannot see this image right away but we can display this image in our application to do this.
We need to put Image view on the display and then in Project choose our image.
And as you can see it is now immediately displayed here.
We can enlarge the image by dragging stretching on the screen.
Well I think this is clear.
Well now I want to show you how to add a background to this image.
You can do the following.
Go to the text tab and here is image you.
Here we can specify the attribute background.
For example let's select color accent and let's see.
You see we are now showing the background.
But what we want around background to do these we need to create a new X AML file in the draw ball folder
in which we will describe the so-called background for image new.
Here Drabble resolve file let's click here.
We write the name of the file.
Let's call it circle click or key.
And by default the selector element is set here.
But we need the shape element
and further in this stack.
We specify Android shape which actually indicates the shape itself.
Here we can specify four types of different shapes line.
Oh well this a circle rectangle and ring all its choose.
Oh well next we need to describe to specify such an element as solid.
This is the closing self closing tag in it.
We must specify the color of all so-called specify Android color again select color accent for example.
That is our circle will be solid like this the color accent and then another element is their size.
And here we specify and or hide for example.
Let it be 120 DP and Android with let's also specify 120 to be
next.
Close these tag.
And now we can specify in our activity mean In text mode in the background.
We can specify not the color but the file circle for these.
We need to write at drivable.
That is this file is in the drawer above folder.
And here you see circle appears immediately.
Let's see what we got there you see it displays like these.
No it was uh a little bit flat and we can adjust it like these and now let's change the seats this size
in the example file.
Make it two times bigger than our background and see what happens.
How will all activity main change.
And as you can see nothing has changed in order to display a background.
Larger than image.
Here's the thing to do from the beginning to get started.
Let's bind our image you set constraints and then let's copy the image you insert the exact same image
you with the exact same constraints.
That is it will be located in the same place and remove the background attributes in both image use.
Let's see here two images.
Image you are now displayed so superimposed on top of each other because one is indicated here and the
second is here.
Let's change let's set up different ideas right away as you remember I told you you written earlier
are displayed on The View written later.
That is if we are here to install our example file circle as a source
then see what happens.
This same thing was displayed below
well now we can resize this circle that is here we can specify 150 to 150.
And now let's see You see we managed to increase our background.
Let's try to run
and great everything is the same on the phone.