Hey there.
Well now let's get started.
Let's create a new project and name it.
Music player
so building is complete.
Now let's
I applauded.
Background image a picture like these for our background we'll call it background
and then copy and put it in the drawer Bill folder.
Everything is fine.
The file appeared and here in country it loud out loud.
I will specify the attribute background.
And here I specify the birth to this file the drivable folder and the name of the file.
Background and you see this image is now the background of our parent mockup part parent Klout
always remove the text you.
Hello World also let's change the main course of the application in the file called the Dot simple color
primary let's make it blue
and let it be that shape
call or primary doc
let's zoom it a little bit darker and color accent
I will make the color like we have on the background let it be such an orange color and then let's call
up the value color accent and make the icons of the same color.
I insert the value here and you see the color changes then you need to select the icon itself or the
first icon we play
and here I change the name to orange
then next Ball's icon
this icon will come in handy later on I immediately create it and rename it to orange to
next
well let's try it next and select the skip next icon
and of course rename it all so that the name or the file is consistent with the content
and the previous bottom
such icon.
It will also be orange.
Well now uh we need to create an icon
for our log.
So make it bigger like uh to ADP and change the icon itself.
Choose I want node
here securities
and now let's create a shape.
Click on draw will new and draw.
Bill I would call it circle.
Background
and here we are right.
Shape instead of selector
he always specify which finger.
That's right.
Shape.
Oh well and next right.
The elements solid and specify here the core attribute that is the color of our background.
Let it be called primary and then we need to specify the size attributes width.
Well it may be one hundred fifty DPI and the height also 150 DP
and now create an image you you know drag it onto our screen in here select in Project so-called background
flap
and now it appears in our mock up in our layout.
Let's add constraints
next.
Let's copy these image you with the same constraints paste to copy below saw that they appear in the
same place and we will rename the first image shoot to a logo circle
and another logo note.
And we specify here of course and now the element that is in the draw.
Well this is I see music not
well.
Let's make this note bigger.
Change the attributes width and height involved.
For example one hundred DP
huh.
You see when you increase the note becomes a little blurred.
This is due to the fact that we created of ADP when creating it and increased to 100 AP it becomes blurry.
Therefore let's get rid of this small file o icon and create again the larger size
let's take for example 100 to 100
and in the name to let's specify a 100 B to make it clear what size the icon is
and now here we are in this attribute as our C compote.
Uh specify our new note 100 DP.
And now you see the picture is clear.
The image is not blurred.
Now let's uh set a sig bar here.
Our layout
let's switch it to the width of the screen.
Here we specify margin 0
and here we will place text you the name of the song.
And below we will place our image you buttons.
Uh first you need to put circle back around.
But uh we need to reduce it.
The bolt here
analysts are a size.
Well let it be for example sixty DP.
Next another image you
also immediately make it 60 to be more in height and width
words face it and I'll level with those Barton
and lots of margin right here.
Here for example six GDP and here six to repeal in the left button so that they are equidistant from
the sides
and next image you will sit in the middle.
Also so-called background
again we're a size 8 to 60 GDP and also align it
said that constraints
so we placed our elements here constraints too.
And now let's rename our image use give them the appropriate names left.
Let it be previous background image you
haha.
And here androids to the asks update you suggest as well.
That is how we already linked this image you with the help of constraints they say.
Well click yes of course update because let it be blinded to the new idea.
Let's copy the name and paste it into the second image you just changed the first word instead of previous.
All right play background image you
and the third bottom
let it be called next.
Background image you
and let's go to the tech smoke now.
And here we need now to place our icons less copy the previous background image you and here are a name
it to previous icon image show
in here of course we will specify our file
previous icon let's see now that and next let's copy next background team issue based
and here we are right.
The next icon image you here we paste of course.
Oh I can next
and now we copy.
Background.
Play background
and rename it to a play I can image you
and here we write
specify a file I see play
so well everything is displayed correctly.
Let's see what we have here with the text
let's also create constraints for text to you
name it for example
track title text to
Let's make this size bigger like 24 wispy
text color words specify Android white
no sorry no.
It could be orange it should be orange.
Let's uh have it orange give color accent write down the text.
My song
probably let's set the background so that the text itself can be seen better.
Let's make the background color primer it dark.
Not bad but we can add padding so that the tax is slightly shifted away from their borders or the text
to
ADP for example is better and now we run the app and see what happens
and we got some kind of error.
Let's see what is right.
Writing here.
So.
Well after some study of the problem I realized I've found that my eczema file so-called background
was incorrectly written.
I found out my coping this line and pasting it into Google search.
I will not remove this error so that you also learn to correct errors in this way.
Then I found a post of this topic on stack overflow site.
Why could such an error be cost.
And here it is.
I saw that it means that something should not be in the Excel file like it there.
That is some kind of typo some missing character or incorrectly written.
And here I saw that for some reason I don't know how it can be seen when I changed the selector shape.
I did not change the law a closing tack and now if we change it round the application then everything
start fine starts fine.
We got this layout.
We can currently move the slide manually and then we need to implement their behavior of our application
and let's also of course change the call of the text to call our accent.
And again on Google I found the answer in turn inside your post and here it is written what needs to
be installed in the styles.
That simple file another item of these guide styles that smell in the same place as color sex symbol
in the valleys folder.
And here I add this item title text color which changes the color of the title in the application and
now it will run
there as you see the color is displayed.
Call X..
Perfect.