Hire everyone in this story and we're going to go ahead and we're going to design the user interface
of activity underline at Underland martial art.
OK.
So just open the rest folder here and then open the URL for that and I will create this exemplify activity
underline and underline Marshall Otherland art.
OK.
So this is our layout now.
You can see that this is actually a constraint layout.
If I switch to the text tap here you can see that we have actually a constraint out here as our initial
tag initially out.
So let's go to Design tab.
Now let's write a text view into our constraints here.
Inside this palette section just clicked on select the state's view.
Just drag it here into our constraint out here and positioned it here according to these guidelines
here.
So now that I actually put these takes you here you can see that some constraints are automatically
created for this actually for this takes you.
So let me double click on this tab here.
Activity Underland underline at underly should not hit in order to make this area wider.
Let's open the Properties window so you can see that my property is in the here is inside this sidebar
here.
If I click on it now you can see that it is opened.
And here you can see the height icon if I click on icon it is like it is actually hidden.
If I click on properties again it is open.
So now that we have this takes view you can see that we have a top constraint and the left constraint
here so status takes you for the idea we don't have to specify an ID for the state's view because we
don't want to interact with this view from our job because we can't see that play out with ease of content
and heightens our content.
Let's change the text of the state's view.
So just typing here name or martial arts name martial art name calling and then person into Chanute
keyboard.
Now let's write another takes here.
Below is martial art nameplates.
So inside these pellets they should just drag the sticks and put it here below this martial art takes
view.
So let's create a top constraint to the bottom edge of this monster that takes you so look at this.
Actually this little circle that is pulsating on the top of this takes you here just selected and track
it straight here to the bottom edge of this Marshlack name takes you and I just release it.
So for the top margin of the state's view let's assign the values 16 and then person into your keyboard.
Now let's select the state's view for martial art for the text attribute here just step in here.
Martial art martial art price call it and the person until key on your keyboard.
And here.
Let's actually drag and other takes you here into these constraints.
And below it is martial art price.
So inside this palette section select all and then just select this takes you and distracted here.
Below this martial art price and really sets.
So let's create a constraint from the top edge of the text view to the bottom edge of this martial art
place.
So look at this little circle that is pulsating.
Just create a constraint to the bottom edge of this Marshall of price and for the top margin of this
text view here is undervalues 16 here.
And the president of China keyboard.
So sad to say.
And for the text value just typing here Marshall of color color and then person Cheniere keyboard.
So now we have the name Marshall Price Monserrat color.
So let's add some 80 takes us into this constraints that lay out here.
So now you can see that inside this pallet section we have this text click on it and we have this plain
text.
Just drag it and put it here beside this martial arts name.
OK let's just try and put it beside this martial art name here.
Now you can see that I actually are right.
Constraint is created automatically to the right edge of the screen here.
Let's create a constraint to the top edge of the screen.
So let's.
Actually you can see that we have we can create this constraint here to the top edge here.
So just create this constraint and release it.
So a constraint is created to the top edge here so we can assign the values 16 but let's assign the
value number 10 for the top margin of this editrix 10.
And I think that's good.
So now that we have this takes here let's say elected and for the ID just in here EDT EDT NE and N person
enter on your keyboard for the ticks attribute here.
Just delete this value.
And we don't have to provide a hint value for this edit text because we have actually a text view here
that specifies what should be entered in this text so we do not want to actually provide ahint attribute
value for this added text.
So let's drag another edit text here.
So now let's hear.
Inside Politics is just going to come and drag this plain text and put it here beside this martial Marshall
Price here so you can see that we don't have enough space to actually align these texts and this is
edit text.
So for the small Shalott pricier let's increase the top margin of this marketplace place.
Let's change it to 50.
Now if it could scoot right.
So an acetate is a martial art.
Actually it is a little easier.
There is up the constraints to the right of the screen right.
Let's create a constraint to the bottom edge of this.
It takes years of this top it it takes so we could just let a circle that is pulsating.
Create a constraint to the bottom edge of this.
Actually this Ed..
So let's actually like it here are the bits at the bottom.
Let me create this constraint here to the bottom of this.
It takes now I think that's good but let's also select this taste view here.
This modular place this view lets increase the top management to 40.
Let's change it to actually 45.
Now I think it's good.
So now that we have this takes here and selectees it takes.
And for the idea just happened here it is the price and then person in the chair on your keyboard.
Now the latest as it takes for the text attribute here.
Just delete this value and then press on until your keyboard.
So now we have this final actually text here.
So stick to it and for the top Margene here let's assign the value 45 here 45 and that person you keyboard.
So here now that we have this text here let's try and edit text beside these moderate color.
Let's put it here.
So just inside this palette section click and text and drive just plain text here and put it beside
this actually takes view so you can see that are constraints to the right of the screen is created here
from the right age of the text editor just to the right of this screen.
So now let's select this edit takes and let's create a constraint to the bottom edge of these editors.
Yet is it is the price.
So look at this little circle that is pulsating.
So just create a constraint to the bottom of this.
It takes.
Now let's actually for example look at this early this year the top management is eight.
Now let's look at this.
It takes this top margin is 7 so let's change you to number eight.
Now I think it's good.
So select is it it takes.
And for the id attribute here just sitting here EDT color and the person entelechy on your keyboard
selects the text.
And here for the text attribute this actually isn't about you just delete this value and then press
on until your keyboard.
So now we have this it takes this this one and this one but I feel it's better to actually increase
the top margin of this editor so that it is aligned better.
So is all it takes for the top management it's assigned value number 10.
Now I think it's good that increased to 12 now it's better.
OK.
So now everything is fine here now you need actually two more buttons.
So inside this palette section just click on all and then select a spot in here and drag it here into
this consistently out and put it here below these Eadie takes and these takes abuse.
So just put it here now you can see that no constraints are actually created for this button here.
So let's create a constraint to the bottom of this.
It takes here.
So just look at this little circle that is pulsating on the top edge of this button that lets selected
and just create a kind of strength to the bottom edge of this text.
Now for the top margin here let's assign the value actually 40.
And then press on into the your keyboard.
And here I want this button to actually take the entire constraint here the entire width of this Panteley
out.
So just select the spot.
And for the size constraint of the Viets here just click on it and change it to match constraints.
Here Right Now let's create a constraint to the right edge of the actually screen.
So look at this little circle that is pulsating here on the right edge of the spot and just create a
constraint to the right of the screen.
And let's create a constraint to the left edge of the screen.
So just look at this little circle that is pulsating on the right on the left edge of this button.
So let's create a constraint to the left edge of the screen here and just release it.
So let's pro-white an idea for the spot and select the spot.
And for the ID attribute just like in here.
Pythian at martial art and then press on until you and your keyboard select is spot on.
And for the text attribute here just step in here actually at martial arts and then present intention
or keyboard.
So let's strike another button here below the spot in here.
So look at this palette section.
Just click on all and then select button here and just track it and put it here.
Below is want monster look at it but in here.
So automatically it is put here.
So let's drag it and put it here below is at Marshall button.
So you can see our constraint to the right edge of the screen and other constraints to the left edge
of the screen is created here for the spot.
So again I want the Spartan to take the entire width of the parent lay out which is this constraint
there.
First of all let's create a constraint from the top edge of this pattern to the bottom edge of this
at martial arts button.
So look at this circle that is called pulsating just tragic kind of strange to the bottom edge of this
at Marshlack but in here.
So the top margin is eight and it is fine.
So now select the spot.
And that's actually change the size constraint of the Viets of this button.
So look at this here the size constraints for the video.
Just click on it and change it to match constraints so that you can see that the spot is taking the
entire width of the parent.
But there is actually some extra space.
It is not taking the entire week here.
You can see that here but that's because of the margins.
OK.
If I select the spot in here you can see that the right margin and the left margin is 8.
If I select a spot in here you can see that the right margin and the left margin here is zero.
So if you want to I select the spot in and for the right margin here I can assign a value 8 and this
button.
And for the late eight I should be for the left margin that's assigned the value 8.
So I notice that margin is the outer space.
OK.
Managing attributes specifies the outer space of our user interface component which currently is button.
So you can that's what you can see this distance between this button and the right edge of the screen
of the left.
So select a spot in and for the idea just they've been here between or go back between and go back and
that person interchange of keyboard for the text distributed in here patch.
And that person is a key on your keyboard.
That's it.
So now that we have this user interface components here on INSIDE our layout.
Now it's time to go to our martial art activity class and declare and create these objects because we
want to interact with some of these objects.
We want to interact with these texts and these buttons.
So let's go to at motional actually with the class and here in this class I can actually declare some
objects the first one is going to be edit text and the first one is going to be it the name come up.
So what is that we can create.
We can actually declare are martial art objects in one line.
OK we can declare this for example object of type.
Eddie takes this value as it takes in one line.
So we have one for the it is the name another for another one for the idiotcy actually price.
Come.
It is easy.
And finally it is in color right semicolon.
So all these variables all these everybody else are of type in the text.
So we only we also have a button so button PTEN at martial arts martial arts come to PTEN Bache semicolon.
So Enceladus creates Meffert led me to this line of Cahir.
So let me create some space here.
So first of all we want to initialize our names so it has the name assignment operator.
Let's test this object to an object find view by ID or that Id that ID that Itay name semi-colon Itay
price Editta price assignment operator.
Let's test this object to an object find view by id r r that ID does it Itay price.
EDT price semi-colon.
And finally we have this EDT color.
OK.
Assignment operator lets get this object and it takes object find view by id r that ID does it Itay
color semicolon.
And we also have these button so I can say PTEN at martial art assignment operator let's cast this object
to a button object find view by ID or that ID that PTEN at martial arts semicolon.
And finally PTEN patch assignment operator let's cast this object to our button object.
Find view by id find by ID or that Id that PTEN back between go back semicolon.
So that's it.
We actually declared and initialized our objects here.