Your SlideShare is downloading. ×
0
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Android UI Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Android UI Development

2,828

Published on

Short intro to UI Development on Android platform.

Short intro to UI Development on Android platform.

Published in: Technology, News & Politics
1 Comment
1 Like
Statistics
Notes
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,828
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
109
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Android  UI  Development   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • 2. UI  Overview   •  All  UI  elements  are  either  View  or  ViewGroup – View  =  Something  on  the  screen  (widget)   – ViewGroup  =  Container  for  other  Views  or   ViewGroups   •  UI  is  a  combinaGon  of  Views  and  ViewGroups   •  Most  effecGve  way  to  declare  UI  is  in  XML   – You  can,  however,  implement  everything  in  code  
  • 3. LAYOUTS  
  • 4. Why  Layouts?   •  UI  is  built  on  top  of  layout   •  Android  diverse  ecosystem   – Several  different  resoluGons  and  densiGes!   •  Layout  helps  to  create  layout  for  different   screen  sizes  
  • 5. Common  Layouts   •  LinearLayout –  Views  in  line,  either  verGcally  or  horizontally   •  RelativeLayout –  Define  posiGons  of  each  other  child  view  relaGve  to  each  other  and  screen   boundaries   •  TableLayout –  Rows  and  Columns   •  FrameLayout –  FrameLayout  is  designed  to  display  a  single  item  at  a  Gme.  You  can  have   mulGple  elements  within  a  FrameLayout  but  each  element  will  be  posiGoned   based  on  the  top  leV  of  the  screen.  Elements  that  overlap  will  be  displayed   overlapping.   •  AbsoluteLayout (Depricated) –  Use  coordinates   •  And  others…  
  • 6. LinearLayout  and  RelaGveLayout  
  • 7. Width  and  Height   •  Fixed   – 42dp,  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
  • 8. Defining  Layout   •  Portrait  mode:   – res/layout/main.xml •  Landscape  mode:   – res/layout-land/main.xml •  Each  AcGvity  can  have  it's  own  layout   – setContentView(R.layout.main);
  • 9. 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=”match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
  • 10. Common  Acributes   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_marginBocom   Specifies  extra  space  on  the  bocom  side  of  the   View  or  ViewGroup     layout_marginLeV   Specifies  extra  space  on  the  leV  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  posiGoned     Only  in  LinearLayout  or   TableLayout   layout_weight   Specifies  the  raGo  of  Views   Only  in  LinearLayout  or   TableLayout  
  • 11. 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>
  • 12. Example  of  Table  Layout  
  • 13. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <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>
  • 14. RelaGveLayout   •  RelaGveLayout  lays  out  elements  based  on   their  relaGonships  with  one  another,  and  with   the  parent  container.   •  It’s  possible  to  put  TextView  center  of  the   screen  and  other  Views  related  to  that  
  • 15. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:textSize="50sp" android:text="Hello World" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView2" android:layout_above="@+id/textView" android:layout_centerHorizontal="true" android:text="other text" /> </RelativeLayout>
  • 16. FrameLayout   <?xml version="1.0" encoding="utf-8"?> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://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>
  • 17. STYLES  
  • 18. Defining  Styles   •  MulGple  Bucons   •  Define  style  only  once!  
  • 19. The  Bucons  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> ...
  • 20. 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>
  • 21. Styles  and  Themes   •  Way  of  building  formaeng  and  layout  to  your   app   •  Style  has  formaeng  acributes  to  several   elements     •  Theme  has  formaeng  acributes  to  all   acGviGes   – Create  the  theme  in  xml  (styles.xml)   – Apply  the  theme  in  manifest  
  • 22. COMMON  WIDGETS  
  • 23. 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  bucon   •  CheckBox –  Standard  checkbox   •  RadioButton –  Standard  radiobucon   •  See  documentaGon  how  to  use  these!  
  • 24. ListView  Example  
  • 25. 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>
  • 26. ListAcGvity   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(); } }); } }
  • 27. MENUS  
  • 28. 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  –  buDon!   •  Menus  are  in  ActionBar •  Hopefully  implemenGng  ActionBar  is  really  simple   and  99%  same  than  menus   •  You  can  build  the  menus  using  Java  or  XML   •  There  are  three  different  menu  types   1.  OpGons  Menu  (AcGonBar)   2.  Context  Menu   3.  Popup  Menu  
  • 29. Menus?   •  Android  no  longer  requires  Menu  bucon!   •  Android  3.0  introduced  concept  of  AcGonBar   – No  need  for  physical  menu  bucon   •  You  should  migrate  your  designs  away  from   using  the  Menu  bucon   •  You  can  support  both  menu  and  acGonbar  
  • 30. AcGonBar   •  AcGonBar  was  introduced  in  Android  3.0  but   also  available  for  2.1  using  Support  Library   •  If  supporGng  only  API  level  11  and  higher   – import android.app.ActionBar •  If  supporGng  lower  than  11   – import android.support.v7.app.ActionBar •  You  must  set  up  a  appcombat  v7  support   library  for  lower  than  11  
  • 31. Menus   •  Op4ons  menu  /  Ac4onBar   –  Compact  menu  bocom  of  the   screen  or  acGon  bar   •  Context  Menu   –  Long  press   •  Submenus   –  Submenu  opens  in  a  new   window  
  • 32. CreaGng  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) { ... } }
  • 33. CreaGng  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; } }
  • 34. 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 (R.id.menu_item1): // Do something return true; } return false; } .... }
  • 35. 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; } .... }
  • 36. CreaGng  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:showAsAction="ifRoom" 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>
  • 37. 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>
  • 38. Opening  the  Menu  in  Java   @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); return true; }
  • 39. Context  Menu   •  Context  Menu  =  Long  press   •  Override  two  methods  on  a  AcGvity   – onCreateContextMenu() – onContextItemSelected() •  Register  the  context  menu  to  the  view   – registerForContextMenu(view)
  • 40. 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) { } }
  • 41. OnCreate   @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); tv = new TextView(this); tv.setText("Context Menu!"); registerForContextMenu(tv); setContentView(tv); }
  • 42. 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); } }
  • 43. 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; }
  • 44. NOTIFICATING  USER   Dialogs  and  NoGficaGons  
  • 45. NoGcaGons   •  Toast  No4fica4on   – Brief  message   – Toast •  Dialog  No4fica4on   – AcGvity-­‐related  noGficaGon   – AlertDialog, DatePickerDialog, TimePickerDialog •  Status  Bar  No4fica4on   – Persistent  reminder  
  • 46. TOAST  
  • 47. Toast   •  Simple  Feedback  about  an  operaGon  in  a  small   popup   – No  user  response   – Also  very  good  for  debugging  purposes!    
  • 48. 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();  
  • 49. Dialogs   •  A  dialog  is  a  small  window  that  prompts  the   user  to  make  a  decision  or  enter  addiGonal   informaGon  
  • 50. Dialogs   •  You  can  use  subclasses  of  Dialog:   – AlertDialog •  dialog  with  Gtle,  up  to  three  bucons,  a  list  of  selectable   items  or  a  custom  layout. – DatePickerDialog •  Predefined  layout – TimePickerDialog •  Predefined  layout
  • 51. DialogFragment •  DialogFragment  class  helps  you  to  manage   correctly  lifecycle  events  such  as  back-­‐bu)on   pressing   – Class  also  allows  reusing  of  dialog's  UI  as  an   embeddable  component  in  larger  UI  
  • 52. public void showDialog(View v) { MyDialogFragment dialog = new MyDialogFragment(); // Tag is a unique name that the system uses to save and restore the // fragment state when necessary. You can also get a reference to // the fragment by calling findFragmentByTag() dialog.show(getFragmentManager(), "fragmentTagName"); } 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("What do you want to do?"); builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { } }); builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { } }); return builder.create(); } }
  • 53. Passing  Events  to  Host  AcGvity   public class MyDialogFragment extends DialogFragment { public interface NoticeDialogListener { public void onDialogPositiveClick(DialogFragment dialog); public void onDialogNegativeClick(DialogFragment dialog); } private NoticeDialogListener host; @Override public void onAttach(Activity activity) { super.onAttach(activity); // My crash, use try .. catch host = (NoticeDialogListener) activity; } @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // Use the Builder class for convenient dialog construction AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setMessage("What do you want to do?"); builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { host.onDialogPositiveClick(MyDialogFragment.this); } });
  • 54. Passing  Events  to  Host  AcGvity   public class MainActivity extends Activity implements MyDialogFragment.NoticeDialogListener { public void showDialog(View v) { MyDialogFragment dialog = new MyDialogFragment(); // Tag is a unique name that the system uses to save and restore the // fragment state when necessary. You can also get a reference to // the fragment by calling findFragmentByTag() dialog.show(getFragmentManager(), "fragmentTagName"); } public void onDialogPositiveClick(DialogFragment dialog) { this.setTitle("Ok"); } public void onDialogNegativeClick(DialogFragment dialog) { this.setTitle("Cancel"); }
  • 55. 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();
  • 56. 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(); }
  • 57. STATUS  BAR  NOTIFICATIONS  
  • 58. NoGficaGons   •  Message  for  user   outside  of  your  app's   normal  UI   •  NoGficaGon  shows  in   no4fica4on  area   •  More  details  can  be   seen  when  user  opens   no4fica4on  drawer  
  • 59. Normal  View   •  Normal  view  appears  in  area  up  to  64dp  tall   •  Holds  1)  Content  Gtle,  2)  Large  icon,  3)   Content  text,  4)  Content  info,  5)  Small  icon,  6)   Time  noGficaGon  was  issued  
  • 60. Big  View   •  Big  View  appears  when  noGficaGon  is  expanded   •  Available  4.1  -­‐>   •  Difference:  7)  Details  area    
  • 61. The  Basics   •  Specify  your  noficaGon  using   NotificationCompat.Builder  object   •  Use  NotificationCompat.Builder.build() for  building  the  noGficaGon  object   •  call  notify() when  needed   •  NoGficaGon  must  contain:  1)  small  icon,  2)   Gtle  and  3)  detail  text   •  Service  can  launch  status  bar  no4fica4on!  
  • 62. Building  the  NoGficaGon   // Building the notification Notification.Builder mBuilder = new Notification.Builder(this); // Drag icon.png to drawable/ folder // Small icon, content title and text are minimum. mBuilder.setSmallIcon(R.drawable.icon); mBuilder.setContentTitle("Notification Title"); mBuilder.setContentText("Notification Text"); // You should create also a pending intent // createPendingIntent is a method that you have to implement. // PendingIntent pi = createPendingIntent(); // mBuilder.setContentIntent(pi); Notification notification = mBuilder.build(); // Displaying the notification using notification manager NotificationManager mNotificationManager = (NotificationManager) getSystemService(this.NOTIFICATION_SERVICE); int mId = 1; // mId allows you to update the notification later on. mNotificationManager.notify(mId , notification);
  • 63. NoGficaGon  AcGons   •  Although  opGonal,  you  should  provide  one  acGon   to  noGficaGon   –  Allows  user  to  go  to  your  app  from  the  noGficaGon   –  StarGng  an  acGvity  when  the  user  clicks  the   noGficaGon  is  the  most  common  scenario   •  NoGficaGonManager  is  different  app  from  your   app  and  it  needs  special  permissions  to  open   your  acGvity.   –  Instead  of  using  Intent,  you  use  PendingIntent.   •  See:  hcp://developer.android.com/guide/topics/ ui/noGfiers/noGficaGons.html  
  • 64. CUSTOM  COMPONENTS  AND   DRAWING  
  • 65. Basic  Approach   •  CreaGng  custom  views  is  really  easy:   1.  Extend  exiGng  View  –  class   2.  Override  some  of  the  View  –  classes  methods   •  onDraw(), onMeasure(), onKeyDown() .. 3.  Use  your  class  in  XML  –  layout  file  
  • 66. class MyCustomWidget extends View { // You will get here information implemented in the xml – file // This is mandatory 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); } }
  • 67. XML   <fi.mycompany.MyCustomWidget android:layout_width="match_parent" android:layout_height="wrap_content" />
  • 68. Define  own  Custom  Acributes   •  You  can  define  your  own  custom  acributes   •  Create  custom  acribute  in  values/acrs.xml   •  Add  the  acribute  to  the  view  in  layout.xml   •  Read  the  acribute  in  View's  constructor  
  • 69. values/acrs.xml   <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomView"> <attr name="textInLabel" format="string" /> </declare-styleable> </resources>
  • 70. layout.xml   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fi.company.project.CustomView android:layout_width="fill_parent" android:layout_height="wrap_content" custom:textInLabel="Hello World" /> </LinearLayout>
  • 71. CustomView   public class CustomView extends View { private String text; public CustomView(Context context, AttributeSet attrs) { super(context, attrs); text = attrs.getAttributeValue("http://schemas.android.com/apk/res-auto", "textInLabel"); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint p = new Paint(); p.setTextSize(20); p.setColor(0xFFFF0000); p.setAntiAlias(true); canvas.drawText(text, 0, 20, p); } }

×