Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Android UI

on

  • 9,724 views

 

Statistics

Views

Total Views
9,724
Views on SlideShare
9,706
Embed Views
18

Actions

Likes
31
Downloads
984
Comments
0

4 Embeds 18

http://192.168.0.2 13
http://a0.twimg.com 2
https://www.linkedin.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

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…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Android UI Presentation Transcript

  • 1. Android UIs WJAX 2010 • 18. November 2010 • Westin Grand Munich
  • 2. about Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • 3. about Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • 4. Basics
  • 5. Basics Layouts Views
  • 6. Basics Adapter Layouts Views
  • 7. Basics Drawable Resources Adapter Layouts Views
  • 8. Basics Drawable Resources Adapter Themes Layouts Styles Views
  • 9. Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views
  • 10. Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views Design Tips
  • 11. Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views Design Tips Tools Plugins
  • 12. Basics
  • 13. Basics
  • 14. Basics • Views also called widgets or controls. Examples are TextView, EditText or a WebView. Base class for all visual elements, including the ViewGroups.
  • 15. Basics • Views also called widgets or controls. Examples are TextView, EditText or a WebView. Base class for all visual elements, including the ViewGroups. • ViewGroups can contain multiple child elements. They either represent compound controls or layout managers. The latter define the how and where the widgets are placed on the screen.
  • 16. Basics • Views also called widgets or controls. Examples are TextView, EditText or a WebView. Base class for all visual elements, including the ViewGroups. • ViewGroups can contain multiple child elements. They either represent compound controls or layout managers. The latter define the how and where the widgets are placed on the screen. • Activities load or create the UI based on View-Elements. Typicallz a layout is inflated from a resource which contains multiple child elements.
  • 17. The Activity public class DemoOneActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
  • 18. Layout & View(s) <?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"> <Button android:id="@+id/button" wrap_content android:layout_width="fill_parent" fill_parent android:layout_height="wrap_content" 15dp android:text="@string/hello" /> </LinearLayout> res/layout/main.xml
  • 19. Layout & View(s)
  • 20. Layout & View(s)
  • 21. Layout & View(s) fill_parent fill_parent
  • 22. Layout & View(s) fill_parent Some Button... wrap_content fill_parent fill_parent
  • 23. View Hierarchies ViewGroup
  • 24. View Hierarchies ViewGroup View View ViewGroup
  • 25. View Hierarchies ViewGroup View View ViewGroup View View
  • 26. Listener Button b = (Button)findViewById(R.id.button){ b.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(DemoOneActivity.this, "Klick!", Toast.LENGTH_SHORT).show(); } });
  • 27. WebView TabHost VideoView ScrollView Views TextView DatePicker RatingBar ViewSwitcher
  • 28. Many nice views You still want a designer
  • 29. Layouts
  • 30. Layouts • It’s less complex than you think LinearLayout and RelativeLayout are the important ones • LinearLayout Lays out its children horizontally or vertically • RelativeLayout Allows for relative positioning. “Place EditText top right” or “Place the ImageView below the Button”
  • 31. LinearLayout LinearLayout vertical LinearLayout horizontal weight=0.5 weight=0.5
  • 32. LinearLayout LinearLayout vertical LinearLayout horizontal weight=0.5 weight=0.5
  • 33. RelativeLayout parentTop 1 toRightOf 1 parentLeft layout_below button1 parentBottom 2 toRightOf 1
  • 34. RelativeLayout parentTop 1 toRightOf 1 parentLeft layout_below button1 parentBottom 2 toRightOf 1
  • 35. LayoutParams @+id/red android:layout_above="@id/green" @+id/green android:layout_below="@id/red"
  • 36. LayoutParams @+id/red android:layout_above="@id/green" @+id/green android:layout_below="@id/red" android:layout_toLeftOf="@id/green" @+id/red @+id/green android:layout_toRightOf="@id/red"
  • 37. LayoutParams @+id/red @+id/green android:layout_alignBottom="@id/red"
  • 38. LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red"
  • 39. LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red" android:layout_alignLeft="@id/red" @+id/green @+id/red
  • 40. LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red" @+id/red
  • 41. LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red" android:layout_alignRight="@id/red" @+id/green @+id/red
  • 42. LayoutParams android:layout_alignParentTop="true" android:layout_alignParentLeft="true" @+id/red parent @+id/red android:layout_alignParentBottom="true" android:layout_alignParentRight="true"
  • 43. Adapter
  • 44. Adapter • Bridge between View and Data View = Gallery, List, Grid Data = Array, Cursor, Custom Adapter • Creates a view object for each item • Efficient implementation is key for custom adapters
  • 45. CursorAdapter String[] projection = new String[] { Browser.BookmarkColumns._ID, Browser.BookmarkColumns.TITLE, Browser.BookmarkColumns.URL }; Cursor cur = managedQuery(android.provider.Browser.BOOKMARKS_URI, projection, null, null, null); String[] displayFields = new String[] { Browser.BookmarkColumns.TITLE, Browser.BookmarkColumns.URL }; int[] displayViews = new int[] { android.R.id.text1, android.R.id.text2 }; adapter = new SimpleCursorAdapter(this, android.R.layout.simple_list_item_2, cur, displayFields, displayViews);
  • 46. CursorAdapter public class MyListActivity extends ListActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //create adapter code setListAdapter(adapter); } @Override protected void onListItemClick(ListView l, View v, int position, long id) { TextView title = (TextView) v.findViewById(android.R.id.text1); Toast.makeText(this, title.getText(),Toast.LENGTH_SHORT).show(); } }
  • 47. CursorAdapter public class MyListActivity extends ListActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //create adapter code setListAdapter(adapter); } @Override protected void onListItemClick(ListView l, View v, int position, long id) { TextView title = (TextView) v.findViewById(android.R.id.text1); Toast.makeText(this, title.getText(),Toast.LENGTH_SHORT).show(); } }
  • 48. Roll your own • Extend BaseAdapter, overwrite getCount getItem getItemId getView getItemViewType getViewTypeCount
  • 49. Roll your own • Extend BaseAdapter, overwrite getCount getItem getItemId getView getItemViewType getViewTypeCount
  • 50. Roll your own public class CustomAdapter extends BaseAdapter { private static int TYPE_RIGHT = 0; private static int TYPE_LEFT = 1; LayoutInflater inflater; public CustomAdapter(LayoutInflater inflater) { super(); this.inflater = inflater; } //more stuff... }
  • 51. Roll your own public int getCount() { return 50; } public Object getItem(int position) { return new Integer(position); } public long getItemId(int position) { return position; } public int getItemViewType(int position) { return (position % 2 == 0) ? TYPE_LEFT : TYPE_RIGHT; } public int getViewTypeCount() { return 2; }
  • 52. Roll your own static class ViewHolder { ImageView image; TextView text; } private View getFreshViewForPosition(int position) { return inflater.inflate((getItemViewType(position) == TYPE_LEFT) ? R.layout.row_left : R.layout.row_right, null); }
  • 53. Roll your own public View getView(int position, View convertView, ViewGroup parent) { View v = (convertView == null) ? getFreshViewForPosition(position) : convertView; ViewHolder holder; if (convertView == null) { holder = new ViewHolder(); holder.image = (ImageView)v.findViewById(R.id.image); holder.text = (TextView)v.findViewById(R.id.text); v.setTag(holder); } else { holder = (ViewHolder)v.getTag(); } holder.text.setText("This is element " + position); return v; }
  • 54. Roll your own
  • 55. <RelativeLayout Roll your own android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/rounded" android:padding="10dip"> <ImageView android:id="@+id/image" android:background="#9ACD32" android:layout_alignParentLeft="true" android:layout_height="50dip" android:layout_width="50dip" /> <TextView android:id="@+id/text" android:layout_toRightOf="@+id/image" android:layout_centerVertical="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:textSize="20sp" android:textColor="#000000" /> </RelativeLayout>
  • 56. Drawable Resources
  • 57. Drawable Resources • Shapes, Colors and Gradients all defined in XML, XML sucks but it’s better than Photoshop, right? • State List Drawables define different Drawables for states like “focused” or “pressed” • NinePatch Drawables define stretchable PNG files that magically adapt
  • 58. Shapes <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@color/light_pink" android:endColor="@color/dark_pink" android:angle="270" /> <corners android:radius="15dp" /> <stroke android:width="2dp" android:color="@color/black" /> </shape> res/drawable/shape.xml
  • 59. State List Drawables <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/ android"> <item android:state_focused="true" android:drawable="@drawable/focused" /> <item android:state_pressed="true" android:drawable="@drawable/pressed" /> <item android:drawable="@drawable/normal" /> </selector> res/drawable/selector.xml
  • 60. NinePatch Drawables • draw9patch command line tool • Define stretchable areas and padding box (optional) • The coolest thing since the invention of sliced bread
  • 61. NinePatch Drawables stretchable stretchable
  • 62. NinePatch Drawables stretchable stretchable
  • 63. NinePatch Drawables stretchable stretchable padding padding
  • 64. Styles & Themes
  • 65. Styles & Themes • Styles a collection of properties applied to a View. Use it to define recurring settings for widgets once instead of each time. • Themes Themes are styles :-) but applied to an entire Activity or even Application. Each and every view will inherit the properties defined in the theme.
  • 66. Style <?xml version="1.0" encoding="utf-8"?> <resources> <style name="Button" parent="@android:style/Widget.Button"> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">fill_parent</item> <item name="android:background">@drawable/normal</item> <item name="android:textSize">18sp</item> <item name="android:textStyle">bold</item> </style> <style name="Button.Red"> <item name="android:background">@drawable/red</item> </style> <style name="Button.Green"> <item name="android:background">@drawable/green</item> </style> </resources> res/values/style.xml
  • 67. Styles & Themes <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button style="@style/Button" res/layout/stylelayout.xml android:text="Generic Button"/> <Button style="@style/Button.Red" android:text="Red Button"/> <Button style="@style/Button.Green" android:layout_width="wrap_content" android:text="Green Button"/> </LinearLayout>
  • 68. Styles & Themes <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button style="@style/Button" res/layout/stylelayout.xml android:text="Generic Button"/> <Button style="@style/Button.Red" android:text="Red Button"/> <Button style="@style/Button.Green" android:layout_width="wrap_content" android:text="Green Button"/> </LinearLayout>
  • 69. Styles & Themes • R.attr lists all the properties that’s a huge list, it’s usually best to check JavaDocs • Some can only be applied as a Theme they belong to the entire window, not a single view • R.style lists all platform styles and themes browse the source code of styles.xml and themes.xml http://bit.ly/bCPxZP http://bit.ly/8XfY5H
  • 70. Multiple Screen Sizes
  • 71. Multiple Screen Sizes • Android Resource Management Framework based on qualifiers like screen density, screen size or screen orientation, the framework picks the right resource • Currently 3 densities defined ldpi|mdpi|hdpi • e,g. XML files res/drawable res/drawable-ldpi res/drawable-mdpi Image files res/drawable-hdpi
  • 72. Multiple Screen Sizes • If possible, create vector graphics for HDPI screens, then scale down • Ratios HDPI to MDPI: 0.66 MDPI to LDPI: 0.75 • Use RelativeLayout, don’t use px
  • 73. Design Tips
  • 74. Design Tips • don’t port from “other” platforms • don’t overuse modal progress dialogs • create large tap areas • set proper margins and padding • handle orientation changes Romain Nurik, Google
  • 75. Tools & Plugins
  • 76. Tools & Plugins • Android Asset Studio android-ui-utils.googlecode.com • Web Apps for Launcher Icons Menu Icons Tab Icons Notification Icons
  • 77. Tools & Plugins • Android Asset Studio android-ui-utils.googlecode.com • Web Apps for Launcher Icons Menu Icons Tab Icons Notification Icons
  • 78. Tools & Plugins • Pencil Opensource GUI Prototyping http://pencil.evolus.vn/ http://code.google.com/p/android-ui-utils/downloads/ • Android Stencils for Pencil Rich set of Android GUI elements
  • 79. Tools & Plugins • Pencil Opensource GUI Prototyping http://pencil.evolus.vn/ http://code.google.com/p/android-ui-utils/downloads/ • Android Stencils for Pencil Rich set of Android GUI elements
  • 80. Tools & Plugins • Pencil Opensource GUI Prototyping http://pencil.evolus.vn/ http://code.google.com/p/android-ui-utils/downloads/ • Android Stencils for Pencil Rich set of Android GUI elements
  • 81. Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • 82. Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • 83. Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • 84. Tools & Plugins • Oh, and... ADT Plugin for Eclipse http://developer.android.com/sdk/eclipse-adt.html • New projects, or unsigned packages debug, export signed create application UI,
  • 85. Tools & Plugins • HierarchyViewer http://developer.android.com/guide/developing/tools/hierarchy-viewer.html • Visualizes the layout hierarchy, allows you you to discover inefficient layouts
  • 86. Tools & Plugins • HierarchyViewer http://developer.android.com/guide/developing/tools/hierarchy-viewer.html • Visualizes the layout hierarchy, allows you you to discover inefficient layouts
  • 87. Q&A
  • 88. Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • 89. WE HIRE Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de