Android UI Development
Upcoming SlideShare
Loading in...5
×
 

Android UI Development

on

  • 3,092 views

Short intro to UI Development on Android platform.

Short intro to UI Development on Android platform.

Statistics

Views

Total Views
3,092
Views on SlideShare
3,091
Embed Views
1

Actions

Likes
0
Downloads
90
Comments
1

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great Article!

    Please enjoy free 9-Patch images found on my blog: http://android9patch.blogspot.com/
    I also created an android app to browse, test and share 9-Patch Images: http://market.android.com/details?id=com.android9patch.viewer

    All images are free and can be used in any type of android applications, including commercial projects.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Android UI Development Android UI Development Presentation Transcript

  • Android  UI  Development   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • LAYOUTS  
  • Why  Layouts?   •  UI  is  built  on  top  of  layout   •  Android  diverse  ecosystem   – Several  different  resoluBons  and  densiBes!   •  Layout  helps  to  create  layout  for  different   screen  sizes  
  • Width  and  Height   •  Fixed   – 42dip,  17px,  etc   •  Match  the  parent’s  size   – “As  big  as  my  parent”   – MATCH_PARENT  (in  older  version  FILL_PARENT)   •  Best  fit   – “As  big  as  needed  for  my  content”   – WRAP_CONTENT
  • Child  (width:  match_parent)   Child  (width:   wrap_content)   Child  (width:   wrap_content)   Child  (width:  match_parent)   Does  NOT  fill  the   space,  width  is  the   same  than  parent’s!  
  • Common  Layouts   •  LinearLayout –  Views  in  line,  either  verBcally  or  horizontally   •  RelativeLayout –  Define  posiBons  of  each  other  child  view  relaBve  to  each  other  and  screen   boundaries   •  TableLayout –  Rows  and  Columns   •  FrameLayout –  FrameLayout  is  designed  to  display  a  single  item  at  a  Bme.  You  can  have   mulBple  elements  within  a  FrameLayout  but  each  element  will  be  posiBoned   based  on  the  top  le^  of  the  screen.  Elements  that  overlap  will  be  displayed   overlapping.   •  AbsoluteLayout (Depricated) –  Use  coordinates   •  And  others…  
  • LinearLayout  and  RelaBveLayout  
  • Defining  Layout   •  Portrait  mode:   – res/layout/main.xml •  Landscape  mode:   – res/layout-land/main.xml •  Each  AcBvity  can  have  it's  own  layout   – setContentView(R.layout.main);
  • Example  of  Layout   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ apk/res/android" android:orientation="vertical" android:layout_width=”fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
  • Common  Abributes   A)ribute   Descrip4on   Notes   layout_width   Specifies  the  width  of  the  View  or  ViewGroup   layout_height   Specifies  the  height  of  the  View  or  ViewGroup   layout_marginTop   Specifies  extra  space  on  the  top  side  of  the   View  or  ViewGroup     layout_marginBobom   Specifies  extra  space  on  the  bobom  side  of  the   View  or  ViewGroup     layout_marginLe^   Specifies  extra  space  on  the  le^  side  of  the   View  or  ViewGroup     layout_marginRight   Specifies  extra  space  on  the  right  side  of  the   View  or  ViewGroup     layout_gravity   Specifies  how  child  Views  are  posiBoned     Only  in  LinearLayout  or   TableLayout   layout_weight   Specifies  the  raBo  of  Views   Only  in  LinearLayout  or   TableLayout  
  • Example  of  Layout  with  Gravity  and  Weight   <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button A" /> <Button android:layout_width="wrap_content" android:layout_height="0dip" android:text="Button B" android:layout_gravity="right" android:layout_weight="0.5" /> <Button android:layout_width="match_parent" android:layout_height="0dip" android:text="Button C" android:layout_weight="0.5" /> </LinearLayout>
  • Example  of  Table  Layout  
  • <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:background="#646464" android:stretchColumns="1”> <TableRow> <TextView android:text="E-mail:" /> <EditText android:id="@+id/email" /> </TableRow> <TableRow> <TextView android:text="Password:" /> <EditText android:id="@+id/password" android:password="true" /> </TableRow> <TableRow> <TextView /> <CheckBox android:id="@+id/rememberMe" android:text="Remember Me" /> </TableRow> <TableRow> <Button android:id="@+id/signIn" android:text="Log In" android:layout_span="2" /> </TableRow> </TableLayout>
  • RelaBveLayout   •  RelaBveLayout  lays  out  elements  based  on   their  relaBonships  with  one  another,  and  with   the  parent  container.   •  It’s  possible  to  put  TextView  center  of  the   screen  and  other  Views  related  to  that  
  • FrameLayout   <?xml  version="1.0"  encoding="u;-­‐8"?>   <FrameLayout      android:layout_width="match_parent"      android:layout_height="match_parent"      xmlns:android="hBp://schemas.android.com/apk/res/android">    <ImageView        android:src="@drawable/ic_launcher"      android:layout_height="match_parent"      android:layout_width="match_parent"/>    <TextView      android:text="Hello  World!"      android:textSize="24sp"      android:textColor="#000000"      android:layout_height="match_parent"      android:layout_width="match_parent"      android:gravity="center"/>   </FrameLayout>    
  • STYLES  
  • Defining  Styles   •  MulBple  Bubons   •  Define  style  only  once!  
  • The  Bubons  in  layout/main.xml ... <TableRow android:id="@+id/TableRow01" android:layout_weight="0.2" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/Button07" style="@style/mybutton" android:text="7" /> <Button android:id="@+id/Button08" style="@style/mybutton" android:text="8" /> <Button android:id="@+id/Button09" style="@style/mybutton" android:text="9" /> <Button android:id="@+id/ButtonDivide" style="@style/mybutton" android:text="/" /> </TableRow> ...
  • Styles  in  values/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="mybutton" parent="@android:style/TextAppearance"> <item name="android:textSize">30sp</item> <item name="android:textColor">#000000</item> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">fill_parent</item> <item name="android:layout_weight">1</item> </style> </resources>
  • Styles  and  Themes   •  Way  of  building  formahng  and  layout  to  your   app   •  Style  has  formahng  abributes  to  several   elements     •  Theme  has  formahng  abributes  to  all   acBviBes   – Create  the  theme  in  xml  (styles.xml)   – Apply  the  theme  in  manifest  
  • COMMON  WIDGETS  
  • Some  Common  Widgets   •  TextView –  Label   •  EditText –  Editable  text   •  ListView –  View  group  that  manages  a  group  of  Views.   •  Spinner –  TextView  associated  with  ListView.  Let's  you  select  an  item  from  a  list.   •  Button –  Standard  push  bubon   •  CheckBox –  Standard  checkbox   •  RadioButton –  Standard  radiobubon   •  See  documentaBon  how  to  use  these!  
  • ListView  Example  
  • list_item.xml   <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textSize="16sp" > </TextView>
  • ListAcBvity   public class ListViewExample extends ListActivity { static final String[] COUNTRIES = new String[] { "Afghanistan", "Albania", "Algeria", .... }; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setListAdapter(new ArrayAdapter(this, R.layout.list_item, COUNTRIES)); ListView lv = getListView(); lv.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(this, ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); } }); } }
  • MENUS  
  • About  Menus   •  Common  UI  component  in  many  types  of  apps   – Beginning  from  Android  3.0  (API  Level  11)  android   devices  may  not  hold  a  dedicated  menu  –  buBon!   •  Use  instead  AcBonBar   •  Hopefully  implemenBng  AcBonBar  is  really   simple  and  99%  same  than  menus   •  There  are  three  different  menu  types   – OpBons  Menu  (AcBonBar),  Context  Menu  and   Popup  Menu  
  • Menus   •  Op4ons  menu  /  Ac4onBar   –  Compact  menu  bobom  of  the  screen   •  Context  Menu   –  Long  press   •  Submenus   –  Submenu  opens  in  a  new  window  
  • CreaBng  Menus  in  Java   public class MenuExample extends Activity { @Override public void onCreate(Bundle savedInstanceState) { ... } // Modify menu items dynamically. Disable/enable menuitems. @Override public boolean onPrepareOptionsMenu(Menu menu) { ... } // Create your menu here @Override public boolean onCreateOptionsMenu(Menu menu) { ... } // When menuitem is selected @Override public boolean onOptionsItemSelected(MenuItem item) { ... } }
  • CreaBng  Menus  in  Java   public class MenuExample extends Activity { // You can increment this for additional menuitems static final private int MENU_ITEM1 = Menu.FIRST; static final private int MENU_ITEM2 = Menu.FIRST + 1; // Create your menu here @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); // Specify group value to separate Menu Items for batch processing and // ordering. NONE = No group int groupId = Menu.NONE; // Unique identifier for each menu item (used for event handling) int menuItemId1 = MENU_ITEM1; int menuItemId2 = MENU_ITEM2; // Order value. Menu.NONE = I don't care int menuItemOrder = Menu.NONE; // Menu Text int menuItemText1 = R.string.menu_item1; int menuItemText2 = R.string.menu_item2; menu.add(groupId, menuItemId1, menuItemOrder, menuItemText1); menu.add(groupId, menuItemId2, menuItemOrder, menuItemText2); return true; } }
  • Event  Handling  in  Menus   public class MenuExample extends Activity { static final private int MENU_ITEM1 = Menu.FIRST; static final private int MENU_ITEM2 = Menu.FIRST + 1; // Event Handling @Override public boolean onOptionsItemSelected(MenuItem item) { super.onOptionsItemSelected(item); switch (item.getItemId()) { case (MENU_ITEM1): // Do something return true; } return false; } .... }
  • Changing  Menu  Dynamically   public class MenuExample extends Activity { static final private int MENU_ITEM1 = Menu.FIRST; static final private int MENU_ITEM2 = Menu.FIRST + 1; @Override public boolean onPrepareOptionsMenu(Menu menu) { super.onPrepareOptionsMenu(menu); MenuItem menuItem = menu.findItem(MENU_ITEM1); menuItem.setEnabled(false); return true; } .... }
  • CreaBng  Menus  in  XML   •  Create  new  xml-­‐file:  menu/mymenu.xml •  Add  Items:   <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:title="A" android:id="@+id/a"></item> <item android:title="B" android:id="@+id/b"></item> <item android:title="C" android:id="@+id/c"></item> <item android:title="D" android:id="@+id/d"></item> </menu>
  • Submenu   •  A  sub  menu  can  be  added  within  any  menu   •  Can  be  defined  in  XML  or  in  Java   •  In  XML,  real  easy   <menu> <item title="Reset" /> <item title="Sub menu"> <menu> <item title="Example sub menu item" /> </menu> </item> </menu>
  • Opening  the  Menu  in  Java   @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); return true; }
  • Context  Menu   •  Context  Menu  =  Long  press   •  Override  two  methods  on  a  AcBvity   – onCreateContextMenu() – onContextItemSelected() •  Register  the  context  menu  to  the  view   – registerForContextMenu(view)
  • Example   public class MyContextMenu extends Activity { private TextView tv; @Override public void onCreate(Bundle savedInstanceState) { } @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { } @Override public boolean onContextItemSelected(MenuItem item) { } }
  • OnCreate   @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); tv = new TextView(this); tv.setText("Context Menu!"); registerForContextMenu(tv); setContentView(tv); }
  • onCreateContextMenu   @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); if(v == tv) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); } }
  • onContextItemSelected   @Override public boolean onContextItemSelected(MenuItem item) { super.onContextItemSelected(item); switch (item.getItemId()) { case R.id.a: Toast.makeText(this, "A", 1000).show(); return true; case R.id.b: Toast.makeText(this, "B", 1000).show(); return true; } return false; }
  • SAY  GOODBUY  TO  MENU  BUTTON  
  • Menus?   •  Android  no  longer  requires  Menu  bubon!   •  Android  3.0  introduced  concept  of  AcBonBar   – No  need  for  physical  menu  bubon   •  You  should  migrate  your  designs  away  from   using  the  Menu  bubon   •  You  can  support  both  menu  and  acBonbar  
  • AcBonBar   •  AcBonBar  was  introduced  in  Android  3.0  but   also  available  for  2.1  using  Support  Library   •  If  supporBng  only  API  level  11  and  higher   – import android.app.ActionBar •  If  supporBng  lower  than  11   – import android.support.v7.app.ActionBar •  You  must  set  up  a  appcombat  v7  support   library  for  lower  than  11  
  • AcBonBar:  Api  Level  11  -­‐>   •  AcBvity  contains  informaBon  about  the   AcBonBar   •  To  display  AcBonBar,  use  Theme.Holo  theme   or  one  of  its  descendants   •  Show  AcBonBar   – ActionBar ab = getActionBar(); – ab.show();
  • Adding  AcBon  Items   •  Use  normal  menus,  but  add   – android:showAsAction="ifRoom" •  to  the  menuitem!   •  That's  it.  
  • NOTIFICATING  USER   Dialogs  and  NoBficaBons  
  • NoBcaBons   •  Toast  NoBficaBon   – Brief  message   – Toast •  Status  Bar  NoBficaBon   – Persistent  reminder   •  Dialog  NoBficaBon   – AcBvity-­‐related  noBficaBon   – AlertDialog, DatePickerDialog, TimePickerDialog
  • Toast   •  Simple  Feedback  about  an  operaBon  in  a  small   popup   – No  user  response   – Also  very  good  for  debugging  purposes!    
  • How?  It's  simple…   Toast toast = Toast.makeText(this, "Reset", Toast.LENGTH_SHORT); toast.show(); // in one line Toast.makeText(this, "Reset", Toast.LENGTH_SHORT).show();  
  • Dialogs   •  A  dialog  is  a  small  window  that  prompts  the   user  to  make  a  decision  or  enter  addiBonal   informaBon  
  • Dialogs   •  Dialog  class  is  a   base  class,  use   subclasses:   – AlertDialog – DatePickerDialog – TimePickerDialog
  • DialogFragment •  DialogFragment  class  helps  you  to  manage   correctly  lifecycle  events  such  as  back-­‐bubon   pressing   •  Class  also  allows  reusing  of  dialog's  UI  as  an   embeddable  component  in  larger  UI   •  DialogFragment  is  available  from  API  Level  11   -­‐>   – Support  Library  also  available  for  older  devices.  
  • Example  Dialog  Fragment   private void showMyDialog() { MyDialogFragment f = new MyDialogFragment(); f.show(getFragmentManager(), "MyDialog"); } public static class MyDialogFragment extends DialogFragment { @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // Use the Builder class for convenient dialog construction AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setMessage("Achtung!") .setPositiveButton("Ok", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { } }) .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // User cancelled the dialog } }); // Create the AlertDialog object and return it return builder.create(); } }
  • To  Build  an  Alert   // 1. Instantiate an AlertDialog.Builder with its constructor AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); // 2. Chain together various setter methods to set the dialog // characteristics builder.setMessage(R.string.dialog_message) .setTitle(R.string.dialog_title); // 3. Get the AlertDialog from create() AlertDialog dialog = builder.create();
  • List  Example   @Override public Dialog onCreateDialog(Bundle savedInstanceState) { AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setTitle(R.string.pick_color) .setItems(R.array.colors_array, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // The 'which' argument contains the index position // of the selected item } }); return builder.create(); }
  • NoBficaBons   •  NoBficaBon  is  a  message  you  can  display  to   the  user  outside  of  your  app's  normal  UI.   •  When  issuing  noBficaBon,  it  appears  as  an   icon  in  the  noBficaBon  area   •  To  see  more  details,  user  opens  the   no4fica4on  drawer.  
  • Status  Bar  NoBficaBon   •  Two  versions   –  Normal  view   –  Big  view  (4.1  -­‐>)   •  If  your  app  is  working  in   the  background,  give   status  bar  noBficaBons  
  • Normal  View   •  Normal  view  appears  in  area  up  to  64dp  tall   •  Holds  1)  Content  Btle,  2)  Large  icon,  3)   Content  text,  4)  Content  info,  5)  Small  icon,  6)   Time  noBficaBon  was  issued  
  • Big  View   •  Big  View  appears  when  noBficaBon  is  expanded   •  Available  4.1  -­‐>   •  Difference:  7)  Details  area    
  • The  Basics   •  Specify  your  noficaBon  using   NotificationCompat.Builder  object   •  Use  NotificationCompat.Builder.build() for  building  the  noBficaBon  object   •  call  notify() when  needed   •  NoBficaBon  must  contain:  1)  small  icon,  2)   Btle  and  3)  detail  text   •  Service  can  launch  status  bar  no4fica4on!  
  • Building  the  NoBficaBon   // Building the notification Notification.Builder mBuilder = new Notification.Builder(this) .setSmallIcon(R.drawable.icon) .setContentTitle("My notification") .setContentText("Hello World!"); Notification notification = mBuilder.build(); -- clip – // Displaying the notification using notification manager NotificationManager mNotificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); int mId = 1; // mId allows you to update the notification later on. mNotificationManager.notify(mId , notification);
  • NoBficaBon  AcBons   •  Although  opBonal,  you  should  provide  one  acBon   to  noBficaBon   –  Allows  user  to  go  to  your  app  from  the  noBficaBon   –  StarBng  an  acBvity  when  the  user  clicks  the   noBficaBon  is  the  most  common  scenario   •  NoBficaBonManager  is  different  app  from  your   app  and  it  needs  special  permissions  to  open   your  acBvity.   –  Instead  of  using  Intent,  you  use  PendingIntent.   •  See:  hbp://developer.android.com/guide/topics/ ui/noBfiers/noBficaBons.html  
  • CUSTOM  COMPONENTS  AND   DRAWING  
  • How  to  Modify  ExisBng  Component?   •  Create  own  View  subclass  and  adjust  it   – Inherit   – Override   – Use   •  The  most  generic  component  you  can  inherit   is  View   – onDraw() – onMeasure() – onKeyDown()...
  • class MyCustomWidget extends View { // To allow ADT to interact with this! // You will get here information implemented in the xml - file public MyCustomWidget(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // How to draw? Paint. Where to draw? Canvas // It would be wise to initialize the Paint one time instead // of every draw iteration Paint p = new Paint(); p.setTextSize(20); p.setColor(0xFFFF0000); p.setAntiAlias(true); canvas.drawText("Hello World", 0, 20, p); } }
  • XML   <fi.tamk.MyCustomWidget android:layout_width="fill_parent" android:layout_height="wrap_content" />