Android Application Development Tutorial - 6 - Introduction to Layouts

what's up guys welcome your sixth
Android tutorial for the new Boston
again with me Travis and what we're
gonna do in this tutorial is install
some new software that we can use for
the I'm just kidding we're getting into
the XML and XML programming so it can
set up some custom views and some custom
layouts so I want you guys to open up
your layout folder and click on this
main XML and you guys will get something
like this now you can switch between the
graphical layout which is this and the
coding which is this by these two tabs
down here graphical layout and main.xml
basically what I'm gonna do in this
tutorial is describe what's going on and
teach you guys a little bit about XML
it's pretty simple language for the most
part but you know it might be confusing
right at the beginning you guys will
pick this up quickly I'm I'm almost
positive now the first line of code you
see is isn't that important because
anytime we set up a new layout it's
gonna give us this code as well I mean
it is important but you guys won't have
to remember typing this out every time
because it's gonna define it for us and
basically you need to have that as your
first line of code for the most part and
then what we do is we set up a linear
layout which starts here and give some
attributes to the linear layout and it
ends here basically what a linear layout
is gonna do is it's gonna hold some
other items such as a text and it's
gonna kind of define basically the
layout of those items to a sense so it's
gonna kind of categorize them and do all
that stuff let's see you got a new
whatever alright so we're gonna do is
basically kinda find this linear layout
and or I'm gonna describe everything
that's going on within the attributes of
this linear layout now we have this
reference basically and that's all it is
you guys don't again you don't have to
really remember that because when you
set up a new layout Eclipse will set up
this reference for us so that's nice
nice and pretty for new programmers
where you guys don't have to remember
the actual file path and type that out
each time
and the next thing that we have is the
orientation of our linear layout which
is set to sorry set to vertical I was
messing around with it and just so
that's why it has changed and basically
what that is going to do is going to set
all the items within the linear layout
vertically so for example if we copy
this text view or this text for the most
part oops and paste it twice
since I cut I cut it instead of copied
it so now we have text to text and we go
into a graphical layout they're placed
vertically from top to bottom that's
just how our layout is gonna work
again we can also set this horizontally
as well as you guys just saw so I'm
gonna do that real quickly by typing
horizontal and hit save go to graphical
layout and and I messed this up all
right
but you guys should have fill parent
again I was playing around with this as
well but just kind of wanted to show you
guys what is going on so that's why I'm
doing it this way save that and then we
go into a graphical layout and you're
like where's that other textview and
basically what's happening is being
pushed off the screen right here and
I'll explain why that's happening in a
second as you guys just saw I kind of
changed the code but that's how you guys
should have your setup because you
wouldn't have that changed code so
basically now we're also adding two more
attributes to this layout basically
we're setting the parameters of how big
this layout is and what the parameters
are well the width is gonna fill the
parent so it's gonna take everything
that's available for the width so the
whole screens width for the most part
and same with the height it's gonna take
all the height that is available to it
and it's gonna set that as it's
basically basically that's its
attributes or its parameters for the
most part so there you go you have your
linear layout set up taking the whole
screen and set to a horizontal
orientation now within here we have our
text view which is basically just the
text
and again pretty much the same line of
codes for these first two layout width
we have that fill parent and as you saw
I changed this to the something like
wrap content is the other option you can
do and basically this is going to wrap
the content of the text whatever text we
have available so then now if we switch
to graphical layout you can see the
pretty much delay or the parameters of
this textview is wrapping the content of
the text so those are your two options
for the most part that you can use you
can also use you know pixels if you want
and we'll get into that later but
basically once you guys remember fill
parent and wrap content and same for
with the height it's wrapping the
content now the text says at string
hello and you're like no it doesn't it
says hello world starting point now
basically what's happening is this is
using a reference anytime you see an at
within it within the XML it's using a
reference so it's referencing the string
hello and that string is located within
our values we have this values and we
have this string so we're gonna say
strings and there's a string called
hello so it's using this reference and
then this is the name of the reference
but it's displaying the value of the
reference so for example we can set up a
new string by clicking add a string and
then we can set up a name call the
breath for reference and say this is a
reference and save it and then go back
into our XML and we can also just do
something like at string ref and then we
go over into our graphical layout it
says this is a reference just that new
string we set up the alternative is you
can also just type so you can just type
whatever you want without using the @
symbol as long as it's within quotations
and there you go you can just display
your type now the good thing about the
references are for Strings is basically
if you're working for a boss that keeps
changing his mind on the title of
whatever the application or whatever if
you guys have a title within your app
keeps changing the name instead of
looking through all this code for where
you typed the title
you can just refer or set up a title a
reference and then just go into your
string under the values and look for
that title and change the value there so
that's kind of the benefit but hopefully
you guys understand a little bit about
the layout oh one other thing there's
two ways to kind of close your
statements you can see them both here
basically we're setting up our linear
layout here and it's closing down here
now basically anytime you see a forward
slash that's when it's closing so
example you can use for I just kind of
set up two different text views and
their closing statements so we have our
text view and we set up some attributes
and then we use the less than sign and
then we use a greater than sign forward
slash text view and then you know less
than sign to close it
or if you don't want to type this out
every time you can just do forward slash
less than sign for your text so there
you guys go quick overview for xml i'll
catch you guys in the next tutorial
thanks for watching