Android Homework for Silicon Valley Coder's Club www.siliconvalleycoders.org for July 19th

1. Homework
for
July
19th
2015
User
Interface
Development
Aditya
Aggarwal
wrote
the
following
tutorial
for
the
Saratoga
Young
Coders
Club.

2. Introduction
• In
this
tutorial,
you
will
learn
how
to
make
the
user
interface
of
an
Android
app
• For
how
to
make
your
first
android
app
check
the
“Starting
Android
Development”
document
that
I
sent
out
last
week
At
the
end
of
the
tutorial,
you
will
make
this:

3. STEP
1:
User
Interface
Basics
Before
we
get
started
on
making
the
User
Interface
(the
UI),
you
need
to
know
some
basics.
A
user
interface
is
images
on
a
screen.
For
example,
the
way
you
are
reading
this
document
is
through
a
user
interface.
A
user
interface
for
an
Android
app
would
be
the
images
that
are
used
for
your
app.
So
this
would
be
the
UI
of
an
Android
app:
The
UI
of
any
app
is
created
in
a
markup
language.
Markup
language
is
any
coding
language
that
allows
you
to
style
or
“markup”
text
so
text
becomes
images
on
a
screen.
A
famous
markup
language
is
called
HTML.
If
you
know
HTML,
finish
the
rest
of
STEP
1
and
then
skip
to
STEP
3.
Android
uses
a
markup
language
called
XML
which
stands
for
(e)Xtensible
Markup
Language.
There
are
important
concepts
you
must
learn
in
order
to
understand
any
markup
language.
I
will
be
covering
these
concepts
in
the
next
step.

4. STEP
2:
Markup
Language
Basics
Part
1
(Elements)
All code will be in this font
This is text
<this is text>
<this is still text> <text/>
Text
is
anything
that
can
be
written.
Since
markup
languages
markup
text,
markup
languages
can
understand
anything
that
can
be
written!
In
all
markup
languages,
something
in
the
pointy
brackets
<>
are
elements.
<thisisanelement>
All
the
text
in
between
the
opening
pointy
bracket
<
and
the
first
space
is
called
the
element
name.
The
element
name
is
highlighted
in
pink.
<thisisanelementname thisisnotanelementname>
<elementname notelementname>
<stilltheelementname someattribute=”value”>
Markup
languages
can
convert
elements
into
things
on
the
screen.
If
you
want
to
make
a
square
on
the
screen,
then
you
type
in:
<square>
And
you
get
this:

5.
It
is
not
that
simple
however.
You
can
only
code
certain
elements
in
each
markup
language.
Otherwise,
you
could
code
any
element
<ball>, <car>, etc.
and
the
computer
would
somehow
have
to
know
how
to
make
them.
Markup
languages
require
that
most
elements
have
a
slash /
before
the
end
pointy
bracket
>.
You
would
usually
avoid:
<square>
Instead,
you
would
use:
<square/>

6. If
you
want
to
put
things
inside
an
element,
you
would
use
opening
and
closing
tags.
<opening-tag>
stuff you want to put in your element
</closing-tag>
The
opening
tag
is
highlighted
in
green
the
closing
tag
is
highlighted
in
blue.
Closing
tags
always
start
with
a
slash
/ after
the
beginning
pointy
bracket
<.
If
you
want
to
add
a
circle
inside
the
square,
you
write
<square> <circle/> </square>
And
get
this:
• In
this
example,
you
do
not
create
two
squares.
You
create
a
square
with
a
circle
inside
it.
• The
square
and
everything
inside
it
is
now
the
square
element.
• The
element
name
is
square.
• The
circle
is
also
an
element.
• The
circle
element
is
within
the
square
element.

7. Part
2
(Attributes)
The
attributes
of
something
are
the
characteristics
of
something.
You
have
a
hair
color
attribute
or
a
height
attribute.
This
square
has
a
color
attribute.
All
attributes
have
a
value.
The
value
of
my
height
attribute
is
5
feet
11
inches.
The
color
attribute’s
value
for
the
square
above
is
red.
If
you
want
to
make
an
attribute,
you
type
the
attribute
name,
then
an
equals
sign,
and
in
quotation
marks
the
value.
The
attribute
is
highlighted
in
green.
The
value
is
highlighted
in
pink.
AttributeName= “value”
height= “5 feet 11 inches”
color= “red”

8. You
can
give
elements
attributes.
The
attributes
of
an
element
are
the
characteristics
of
an
element.
If
you
want
to
give
an
element
an
attribute,
you
would
place
it
in
the
pointy
brackets
<>
after
the
element
name
and
before
the
slash
/.
<element attributeName= “value”/>
If
the
element
is
created
with
opening
and
closing
tags,
you
put
the
attributes
in
the
opening
tag
inside
the
pointy
brackets <>
after
the
element
name.
<element attributeName= “value”>
<element2/>
</element>
If
you
want
to
make
the
red
square
above,
type
<square color= “red”/>
or
using
opening
and
closing
tags
and
putting
nothing
inside
the
square
<square color= “red”> </square>
If
we
wanted
to
put
a
blue
circle
inside
a
red
square
you
would
write
<square color= “red”> <circle color= “blue”/>
</square>

9.
Now
you
know
how
to
use
markup
language.
Next,
you
will
learn
how
to
use
XML
((e)Xtensible
Markup
Language)
to
make
the
User
Interface
of
an
Android
App.

10. STEP
3:
Programming
the
Android
UI
Part
1
(Locating
the
XML
file)
Open
Android
Studio
and
open
MyFirstApp
from
the
previous
tutorial.
The
most
recent
project
should
automatically
open,
so
if
you
worked
on
MyFirstApp
most
recently,
MyFirstApp
should
open.
You
can
figure
out
which
project
is
open
by
looking
at
the
area
circled
in
red
in
your
Android
Studio.
Next,
in
your
project
explorer,
navigate
to
activity_main.xml.
Read
my
previous
tutorial
if
you
forgot
what
this
file
is
for.
Click
on
it.

11.
Your
Android
Studio
should
like
this
(if
it
does
not,
continue
reading
to
fix
the
problem).
If
your
Android
Studio
does
not
look
like
the
picture
above,
go
to
the
bottom
of
your
screen
and
click
on
“Text”
(the
“Text”
tab).
The
Design
tab
allows
you
to
edit
the
user
interface
without
code.
However,
you
will
eventually
want
to
know
how
to
code
user
interfaces,
because
the
design
tool
is
not
good
enough
to
make
complicated
user
interfaces
and
ones
that
interact
with
JAVA
(dynamic
language).

12. Part
2
(Android
XML
Elements)
Taking
what
you
have
learned
from
the
“Step
2:
Markup
Language
Basics,”
you
can
figure
out
that
the
code
in
your
editor
creates
a
RelativeLayout
element
and
a
TextView
element
inside
the
RelativeLayout
element.
Both
the
RelativeLayout
element
and
the
TextView
element
have
many
attributes.
A
layout
defines
how
elements
inside
should
be
positioned
on
the
screen.
The
RelativeLayout
element
is
a
layout
that
places
all
elements
inside
of
it
at
the
top
left
of
the
screen.
Therefore,
they
can
overlap.
However,
you
can
use
attributes
on
each
element
inside
to
tell
the
element
to
be
in
a
different
position
on
the
screen
(these
attributes
are
called
positioning
attributes).

13.
Change
the
RelativeLayout
element
to
a
LinearLayout
element.
Make
sure
to
do
this
for
the
opening
and
closing
tags.
A
LinearLayout
element
is
a
layout
that
places
elements
so
they
do
not
overlap.
However,
if
you
use
a
LinearLayout,
you
cannot
use
some
positioning
attributes
on
the
elements
inside
the
layout.

14.
The
TextView
element
creates
a
text
box
on
the
screen.
The
TextView
is
what
shows
in
your
MyFirstApp
app.
Delete
the
TextView.
Your
code
should
like
Make
an
EditText
element
inside
the
RelativeLayout
element.
Start
typing.
As
you
start
typing
in
<EditTe
suggestions
show
up.
Double
click
on
the
suggestion
that
says
EditText
or
select
it
using
your
up
and
down
arrow
keys
and
then
press
Enter
.

15.
The
code
will
automatically
add
two
attributes
(android:layout_wdith= “” and android:layout_height=
“”) that
are
required
of
every
element.
The
code
will
now
give
you
suggestions
for
the
value
of
an
android:layout_width
attribute.
Do
not
select
anything.
Using
your
right
and
left
arrow
keys
,
move
to
the
cursor
or
click
on
a
different
line
of
code
to
make
the
suggestion
box
disappear.
Your
editor
should
now
look
like
the
picture
below:

16. Below
the
EditText
element
make
a
Button
element.
The
editor
may
ask
you
to
fill
the
android:layout_height
attribute
if
you
press
Enter
at
the
end
of
the
EditText
element.
Just
move
you
cursor
to
the
end
of
the
EditText
element
using
the
right
and
left
arrow
keys
.
and
press
Enter
on
your
keyboard
twice.

17. Using
what
you
have
learned
making
the
EditText
element,
continue
to
making
a
Button
element
below
it.
After
creating
the
Button
element,
your
editor
should
look
like
the
picture
below.
The
EditText
element
creates
an
“input
area”
or
a
place
where
someone
using
your
app’s
UI
can
enter
text.
The
Button
Element
creates
a
button.

18. Part
3
(Android
XML
Attributes)
In
order
for
the
elements
to
look
like
the
pictures
above,
you
have
to
give
these
elements
some
attributes
and
assign
values
to
these
attributes.
You
may
have
noticed
that
almost
all
attributes
start
with
android:
The
android:
that
is
on
every
attribute
is
called
a
namespace.
The
namespace
is
highlighted
in
pink
in
the
code
for
attributes
below.
android:layout_wdith= “”
android:layout_height= “”
The
namespace
is
used
so
that
Android
XML
can
understand
your
attribute.
XML
does
not
have
the
attribute
“layout_width”
or
“layout_height.”
It
has
the
attribute
http://schemas.android.com/apk/res/androidlayout_wi
dth.

19. In
order
to
keep
you
from
typing
http://schemas.android.com/apk/res/android
all
the
time,
your
code
uses
the
attribute
circled
in
red
in
the
picture
below
to
make
android:
stand
for
http://schemas.android.com/apk/res/android.
The
code
circled
in
the
red
is
always
automatically
in
your
code.
You
do
not
have
to
understand
its
syntax.
However,
you
should
know
the
reason
why
you
put
android:
at
the
start
of
many
attributes.

20. android:layout_width= “”
is
the
width
attribute.
android:layout_height= “”
is
the
height
attribute.
You
can
make
the
value
an
amount
of
density
independent
pixels.
One
Density
independent
pixel
is
one
dot
on
a
screen.
The
units
for
length
on
a
ruler
are
either
inches
or
centimeters.
The
units
for
length
on
a
Android
device’s
screen
are
density
independent
pixels,
which
are
abbreviated
as
dp.
If
you
want
to
make
the
width
of
an
element
50
dp,
then
you
would
write
android:layout_width= “50dp”
You
can
also
use
words
as
values
for
these
attributes,
but
you
can
only
use
specific
words.
If
you
want
the
element
to
automatically
have
the
things
inside
it
fit
exactly
(for
example
have
text
like
“SEND”
inside
a
button
fit
exactly),
then
you
would
use
wrap_content.
To
make
the
width
of
the
button
match
the
width
of
the
things
inside
it,
you
would
type:
android:layout_width= “wrap_content”

21. Set
the
value
of
all
the
width
and
height
attributes
to
wrap_content.
You
will
get
suggestions
like
you
did
when
creating
elements.
Use
the
same
method
you
used
to
choose
an
element
suggestion
to
choose
an
attribute
suggestion.
Now
your
code
should
look
like
the
editor
below.

22. Now
add
the
following
attribute
to
EditText:
android:hint= “”
This
attribute
is
the
hint
attribute.
The
hint
attribute
puts
gray
text
in
an
element.
You
use
the
hint
attribute
to
“hint”
or
tell
someone
using
the
app
what
to
put
inside
an
EditText.
You
can
set
the
value
of
the
hint
to
any
text
(except
double
quotation
marks,
because
they
end
a
value.
To
use
double
quotation
marks
within
the
value,
you
would
have
to
type
in
&quot;
instead
of
“
).
Set
the
value
of
the
hint
attribute
to
Enter
a
Message…
Your
editor
should
look
like

23. Now
add
the
following
attribute
to
button:
android:text= “”
This
attribute
is
the
text
attribute.
The
text
attribute
puts
normal
text
in
an
element.
You
can
set
the
value
of
the
hint
to
any
text
(the
double
quotation
marks
exception
applies
as
it
did
with
the
previous
attribute).
Set
the
value
of
the
text
attribute
to
SEND
Your
editor
should
look
like

24. Part
4
(Checking
with
the
Design
Tab)
Click
the
design
tab
at
the
bottom
left
of
your
screen.
Your
editor
should
look
like
the
picture
below.
(If
your
editor
does
not
look
like
the
picture
below,
continue
reading
to
fix
this
problem.)
The
design
tab
creates
a
preview
of
the
UI,
so
you
can
view
it
without
running
the
app.

25. If
the
editor
does
not
look
like
the
picture
above,
select
the
button
at
the
top
right
of
the
editor
circled
in
the
red
in
the
picture
below
(you
might
have
a
different
number
selected,
that
is
ok)
and
select
an
API
will
a
lower
number.
If
it
does
not
work
again,
select
a
lower
number.
Keep
going
lower
until
you
get
a
preview
of
the
UI.
You
now
have
a
button
and
a
place
where
the
user
can
enter
text.

26. Part
5
(Working
on
your
Own)
You
are
now
going
to
make
the
text
in
the
button
italic.
You
can
figure
out
from
looking
at
your
code
,
it
makes
most
sense
to
place
this
attribute
on
the
button.
This
time
you
will
find
the
name
of
this
attribute
by
yourself.
You
do
not
know
the
names
of
any
of
the
attributes
except
for
the
one’s
you
have
used.
Therefore,
you
will
need
to
learn
how
to
find
the
names
of
attributes
that
cause
changes
to
UI
that
you
want.
Using
your
web
browser,
search
up
“italic
attribute
for
android.”
The
third
result
(on
Chrome)
“How
do
you
change
text
to
bold
in
Android?
-­‐
Stack
Overflow”
should
help
you
figure
it
out.
A
website
called
Stack
Overflow
is
a
question
and
answer
website
that
usually
has
answers
to
almost
any
coding
question.

27.
Using
the
information
you
just
found
from
online,
update
your
code
so
the
text
inside
the
button
is
italic.
The
answer
(the
code)
to
making
the
button
text
italic
is
on
the
next
page.

29. You
can
also
find
information
about
the
attributes
available
on
android
at
this
page
called
a
documentation
page:
https://developer.android.com/training/basics/firstapp/building
-­‐ui.html
http://developer.android.com/reference/android/R.attr.html.
When
you
open
the
link
you
get,
When
you
scroll
down,
you
get
an
alphabetical
list
of
all
the
attributes
available.
Scroll
down
to
textStyle
and
click
it.
Then
you
get
more
information
about
the
attribute.

30.
There
is
unfortunately
no
one
documentation
page
for
elements.
To
find
element
names,
you
should
use
the
search
method
you
used
to
find
the
name
of
the
attribute
that
causes
italics
instead.
Also,
the
Android
Developers
website
has
many
tutorials
for
making
UI
elements.
The
tutorials
on
the
Android
Developers
website
tell
you
what
element
names
and
attribute
names
to
use,
you
just
have
to
understand
the
syntax.

31. STEP
4:
Run
the
App
Press
the
green
play
button
circled
in
red
above
and
run
the
app
(check
my
previous
tutorial
“Starting
Android
Development”
if
you
do
not
know
how
to
do
this).
Your
emulator
should
look
like
Congratulations!
You
now
know
how
to
code
the
UI
of
an
Android
app.

32. Further
Resources
and
Links
Here
are
resources
that
may
help
you
in
this
tutorial:
Make
the
same
UI
you
just
made:
https://developer.android.com/training/basics/firstapp/building-­‐
ui.html
Documentation
Page
for
Android
Attributes:
http://developer.android.com/reference/android/R.attr.html
About
Markup
Languages:
https://en.wikipedia.org/wiki/Markup_language
Search
StackOverflow:
http://stackoverflow.com/search