Hey there.
Well I think you all managed to do this task.
If not then let's do it together.
And I love the project that I created before music show.
And the first element in the screenshot is the user name field.
This element is called edit text but if you look for it on the design tab as I said it is called plain
text.
Now let's move form to the text and it is immediately displayed here.
Let's drag plain text on top of the screen.
And now let's go to the text tab and look at the example element.
Edit text in more detail.
See here it is displayed as edit text although in the text mode as plain text as you can see like any
other example element.
Edit text has allowed with and allowed hide attributes the width is said match parent.
That means that it is stretched across the entire width of parent cloud which in our case is linear
loud and hide is said or app content.
Which means it wraps the content that is it is exactly the same height as the text that will be entered
in it.
Also it has ideas attribute which is installed by default as an added text but I have added text too
because before that there was already edited texts.
We can change it to a more appropriate one for our context.
We can change it here on the design top or on the text tab here.
Let's change it.
Here we give it the name name.
Edit text as their name will be entered here on the design tab 8 also changed immediately and I want
to draw your attention toward the name.
Edit text looks like perhaps you have guessed that it is the chemical case format which we discussed
earlier and which is often used in programming for names of various elements.
Camel case is used for the convenience of reading and name consisting of several words the first word
is written with a small letter the rest with Capital One.
I want to tell you about another edit text attribute this attribute is called hint.
This attribute is used for user interaction prompting him.
What exactly needs to be entered in this field.
Edit text words add these attribute right Android hint and let's assign it the value your name
now let's run our application so you can see how these attribute works.
It will take some time for the project to be compiled by the grad or builder.
So let's look on the emulator and as you can see the edit text is displayed.
Let's now try to remove the text that is said by default in these edit text.
It's deleted and as you can see the hint has immediately appeared that prompts to user to enter his
name.
And now when he is just starting to enter his name for example I into mine and he immediately disappears.
Well let's probably remove the text attribute so that my default a hand is displayed immediately.
Let's try to restart the application.
We can make a quick restart of the application with this lightning button.
Well it's click on it
and as you can see immediately by default the edit text is displayed with a hint.
Perfect
next.
And let's look at our screenshot further and do you see that below is the image with the text printed
on it.
As you remember we have already done the placement of the image with the text printed on it in the relative
layout in our let's rocket up words at the relative layout below the edited text.
Again we can do it here in a text editor or on the design tab.
Let's set the loud with attribute match parent and layout height.
WRAP CONTENT
IN ORDER FOR ALL allowed for the image to be located across the entire with or the screen and in height
would be equal to the height or the image itself.
Next inside relative layout add image and text 2 for image.
Image you and respectively for text text you let's add image you let's say again with match parent and
height maybe.
I think about 100 DPI would be enough
the height of the image will be 100 DP and now in order for the image to be displayed we need to add
that image file in the arrays folder to the draw BILL FOLDER.
Let's call ups all this and then expand and then expand the rest folder and here draw a folder.
Let's do it.
I already have the downloaded images.
Copy music shop image and paste it to draw BILL FOLDER.
Okay.
Here.
The file has appeared and now let's add SRS see attribute which means.
Source in image you draw rebel music shop.
Let's now look at the design tab.
So we got a picture but it didn't show up quite us in our screenshot.
Yes because we need to set the scale type attribute.
We need to set it to centre crop so the image will be placed as in the screenshot scale type it sets
into crop and let's take a look.
Here we go.
This is what we need.
So now let's put the text in the center of the image to do these words.
Add the text to below.
Well it's set width and height.
WRAP CONTENT
AND LET'S SEE WHAT WE GOT
huh.
We also need to write the text itself.
Let's write sale minus 30 percent
so here.
T's located here.
It is barely visible of course
we need firstly increase the format and secondly change the color well it's set first text color to
do text reasonable.
Well I said it's Android call or white
so now we can see it and to place it in the center as it is located here.
We can say that the boot layout center in parent draw
let's take a look.
This is what we need.
It is displayed in the middle next.
Well of course we need as I said to change the phone.
Family
let's add this one a Clinica
form formula hasn't changed let's click on this text 2 and change one more time.
Now we've got it.
So minus 30 percent.
Aha.
I accidentally changed the font family in our edit text.
Let's say that by default sale.
And now we need to change tack size.
Let's try for example 30 is speed
Oh let's see what we got
half in.
This is too much maybe.
Let's try 26.
For example
twenty eight maybe
well in my opinion the size about the same.
And of course we need to see the rotation attribute which we are familiar with already so that the text
was located on the image diagonally.
Let's add these attribute rotation
and set its value to twenty
Aha.
We need to another side so let's say that two minus twenty
well I think it looks pretty similar.
Excellent.
Let's go further.
So their next three elements are arranged vertically sequentially one after another.
These are text you spinner and image you.
Let's start from the most top text you added but added after a relative layout so that this element
would be in the Linear Layout with vertical orientation.
Since these elements follow vertical or one after another so all that's right.
Text you again said out width and height are content
next.
Change the text itself right.
Select item
huh.
Item starts with the capital letter.
As you can see the text 2 has appeared next to we change the color or the text because we have gray
here and black here
text call Android called black
text color has changed and we need to do bold
to do this let's set attribute text style and set its value to bold.
Let's take a look.
Well it looks similar to move this text to the right.
Let's set the layout gravity attribute
and let's set value for this attribute end
rate it has moved but we have small space for on the right H to live this small space where let's said
the margin right attribute of these text you
let's try 15.
DP What do we got.
Well let's say that 20 maybe
so.
Look if we who are cursor or this attribute then it stays hint written consider replacing margin right
to margin.
And for better support layout from right to left.
What does it mean margin and attribute is used to support languages with the direction of writing from
right to left.
There are languages in which right from left to right in most of languages but there are languages in
which a right from right to left.
These are some eastern languages and a few more languages.
If you are interested you can Google it in such cases to display spaces correctly in languages with
different directions instead of this word all right.
Use the word and margin and
in fact this is the same thing.
But if we add language support with the direction of the letters from right to left then we have this
element moved to these side and margin and we'll be from these side because everything is changing direction
in the opposite way.
Therefore it's better to write the attribute margin and instead margin right.
You can google and read more about this topic.
Well let's see again if everything is displayed as it is here.
Basically yes it looks like we can resize text size.
Well let's try to change it to 20.
TB for example.
Oh sorry SB for text
maybe too much.
Let's set it to 16
maybe 18
yes I think now quite rude.
Okay.
Let's go to the next element.
Spinner.
Let's add it right after text you
with said match parent height or app content
and a sexy spinner is added to the layout.
Next element is image for you.
Again we need image void.
Let's do it again.
I have a prepared image and you can download an image image what suits you.
Add it to the folder
and add image you you below spinner
and let's set width and height.
One hundred DP
words add SRS C attribute
value draw ball guitar
it is displayed and now set scale type.
Center grope
yes.
Here we go to center.
This element horizontally.
Let's set out gravity attribute to Santa.
Horizontal
yes.
Here we go.
Well now let's compare.
In my opinion the similar.
And one more thing here.
As you can see on the left and on the right there are small indents throughout the markup throughout
the layout.
Therefore let's said in our cloud.
Well margin or pie bedding may be five deep B
maybe let's say that two eight maybe
yes.
Looks pretty similar.
So let's leave 8 dippy and next below we have more complex replacement of the elements.
Therefore it is advisable for them to use relatively out at the relative without on the screen.
By the way we can move it here in design mode or Zoot
input here or relative.
Layout
and we can drag it and place it here and now we can set attributes on the text to let's leave width
match parent and hide said to wrap content
well.
Now we need to place our items elements in this relative layout.
These are a few text for you and two buttons.
Okay let's start from the top left.
Text you with text order price let's set width and height are up content
then again change the text itself.
The color or the text style.
In my opinion here is similar to the style of these text you with the style of these and in fact these
so that we can copy all these four text starting from this text to
and paste it here and write another text or the price
let's take a look.
We need to make space from the left edge to do this.
Let's set margin attribute margin let.
Or we can use margin start for supporting languages with other direction.
Let's set it to 8 to be for example
I think we need more let's say 20
next.
Let's add one more text for you to display some order.
Order
let's copy this text you paste it here and set in text attribute 0.
Let's see.
And as you can see one text to you is placed on another.
We need to place these text you below previous text to you below order price to do this.
As you remember in the ready to play out we can refer to another element either to the parent element.
Parent allowed either to the sibling views which are placed in the same parent loud words specify I.D.
for upper text you for example create idea attribute
and let's call it price title
text or you.
As you see I will return on the name in Kanak case format let it specify I.D. for law.
Text 2 2
words set its value to price text to you and as you can see Android to do on the lines with red wave
lines.
These ideas because they are the same and they can be the same in one file.
So let's go below.
Element price text 2.
And now in these price text 2 we will create their level below attribute and set its value to price.
Title text to you.
This means that these text you are more price will be placed below price.
Title text to you.
Let's see what we got.
And as you can see the price has moved below.
Okay.
Now let's move these text to a beat down and to the right as displayed in our screenshot to do this.
Let's set margins start a little bit more.
Let's try to do it.
40.
DP
In my opinion it seems similar and a little bit down to do these let's set attribute margin top let's
get 30 to try.
Too much Well it's 20
again to March.
Let's turn
yes 10 looks alike.
So then we need to display this currency here.
Door sign here can be any currency euro for example.
Actually we can set the value of the currency here in this text to you.
Let's try
yes it is displayed in approximately the same way but I think it is more advisable to make another text.
You saw that separate text you issues to change their value over the price itself.
And another text you is used to change the currency.
Therefore let's remove the currency value from here.
We can copy text to you price text you
and insert it below.
Well of course we need to change I.D. let's set currency text you.
Let's take a look.
Huh.
We need to set also dollar sign and we need to move it because now it is displayed this text too is
super imposed on the price text you.
So we need to move it to the right.
Let's add the attribute layout to write off price text you because it is to the right or the price to
text you
yes we did it marked it so far.
Let's remove margins start from this text you or let's try to make it a zero DP No this is too close
and let's try.
For example 5 DP
I'm probably a little bit less.
Maybe for Debbie
Yes.
I think this is similar.
And now we can go to the next group.
All the elements create another text quantity.
Title quantity.
Let's create these text you.
Let's add it again and their style is similar to these texts too.
So let's copy price title text here
add it here.
But of course we will change the value of ideas.
Let's set it to quantity.
Title.
Text through and set here.
Text quantity
and also let's add attribute.
Well to write all prize.
Title text to world.
See it is displayed to the right of rice title text 2.
But in the screenshot these text U is located further.
Therefore we need to add margins start or margin left.
Better margins start.
Haha we have it it is 20 let's try 50
mm hmm maybe more.
Well let's try one hundred
well let's try one hundred and ten.
This and now it looks like in the picture next we have buttons to decrease and increase the quantity
of goods.
Well let's add first modern with minus sign
let's add button example element let's make width up content for now I D minus.
Bottom
Oh let's see where we got it.
On the left as it should be left in the upper corner of this relative layout
we need to shift it we can attach it for example to the right of the currency text you.
So let's add attribute layout to write of
currency text do you.
Let's see.
Yes it has moved the button should be a lower than quantity.
So let's add the attribute layout Below below.
Quantity title text to and now let's change the appearance of the bottom.
Let's change its size now with and height are wrap content and a text where it said that the text color
Android color white
and add text attribute
set value minus sign.
Mm hmm.
And now let's change the width and height.
Let's make it 50 DP on 50 DP.
Square button.
Well let's compare
well no.
A little less.
We got it may maybe 70 on 70
no.
This is too much.
Let's try.
Sixty
looks alive.
And we need to change background attribute.
Make it color primary.
Doc
yes.
Yes.
Well you know maybe 50 maybe 50.
In my opinion.
Let's get back 50
yes.
That's right.
50 and now we need to move the button.
Place it some way.
Here let said margins start attribute for these
and let's try maybe 50 DP.
Let's see what we get.
No that's not enough.
Let's try one hundred.
Let's try one hundred and ten.
We need to slightly lower to do this at the modern top attribute
let's make it for example 10 DP
too much let's buy
yes five DP will be enough.
Well unhappy with this image.
Now next is a text to you that displays the number zero
and design is similar to the price text to you.
So we can copy where we are.
Let's see just let's copy these
and paste it here.
Change the idea.
Of course
let's set quantity text through
and we need to place these text you to the right of minus button.
Therefore we add the attribute level to write of
and here we got one as a button but selected.
And let's see.
Mm hmm.
So but too far we need to reduce their margins start.
Let's do 10
maybe a little bit more.
15
yes.
It's okay.
And now we need to add another button plus button
copy this example element button
let's change the name two plus button.
And it must be placed to the right of our quantity text to you.
So all right here.
Allow.
To write off and set value.
Quantity text to you
and we need display plus sign here.
Aha.
Too big margins start.
Therefore our button has gone beyond the screen.
Let's make margins start for example tend to be
so it appeared it must probably be shifted a little to the right.
And let's try to put 15 DP
and in my opinion everything we have done everything is fine.
Well all that remains for us now is to add a lost law.
Bottom we will add it to the external leaning out and let's see what our elements look like.
On the design tab if we call ups our route lay out lean yellow out let's click on it you see it is displayed
as such external blue rectangle.
This is our main route layout.
Well let's open it and take a look or relative layout.
We can collapse relatively out in it.
In it are arranged sequentially in this linear layout with vertical orientation.
The following elements are arranged sequentially from top to bottom.
Name.
Edit text.
Let's click on it.
It immediately stands out like blue rectangle.
Next click on relative layout here.
Eat with image and text you next link on text to select item next spinner next image you.
And next.
These relative lay out the last one we built and the rest of the elements are displayed inside these
relative layouts.
We can also look at it image you and text to you.
Here are also a few text to use and Martin.
Well I know the last button.
Lets call ups everything we need to place it in our external Linear Layout.
Therefore we added outside these are relatively out by the way.
Here we can also call ups all these for clarity with these models
everything call ups.
And now you can see the sequence of all elements.
And now we need to place here the bottom.
Let's say it with match parent and hide or app content
we need to add the text itself first.
All right add to cart
then set text color Android color white
and let's see.
Well we s we did it.
Now we have to change the background
and let's say the two color primary dark
and now we need to add Martin top it said maybe 20 DP
Well see maybe probably 30
new and probably 40
that's it.
I think we did a good job.
We have all the elements that are on the layout that are needed for our application to work and actually
all that remains for us is to learn how to accept user data and process it in the application for this
in Android development is used their Java programming language and Cortland programming language.
The first is Java and we will begin to study it in the next lecture.