Homework  for  July  19th  2015  

User  Interface  Development  

 

         

Aditya  Aggarwal  wrote  the  following  tutorial  for  the  Saratoga  Young  Coders  Club.  

   

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:    

 

       

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.        

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:              

     

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/>    

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.  

     

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”    

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>        

             

         

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.        

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.      

 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).              

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).        

 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.  

    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   .  

     

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:    

     

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.            

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.      

     

   

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_width.

     

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.    

   

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”      

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.    

       

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  

 

 

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      

     

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.    

     

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.        

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.    

   

   

   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.      

           

 

     

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.    

     

                         

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.        

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.        

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