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!

Android UI

on

  • 9,528 views

 

Statistics

Views

Total Views
9,528
Views on SlideShare
9,511
Embed Views
17

Actions

Likes
30
Downloads
975
Comments
0

4 Embeds 17

http://192.168.0.2 13
http://a0.twimg.com 2
http://www.linkedin.com 1
https://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 Android UI Presentation Transcript

  • Android UIs WJAX 2010 • 18. November 2010 • Westin Grand Munich
  • about Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • about Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • Basics
  • Basics Layouts Views
  • Basics Adapter Layouts Views
  • Basics Drawable Resources Adapter Layouts Views
  • Basics Drawable Resources Adapter Themes Layouts Styles Views
  • Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views
  • Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views Design Tips
  • Multiple Screens Basics Drawable Resources Adapter Themes Layouts Styles Views Design Tips Tools Plugins
  • Basics
  • Basics
  • Basics • Views also called widgets or controls. Examples are TextView, EditText or a WebView. Base class for all visual elements, including the ViewGroups.
  • 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.
  • 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.
  • The Activity public class DemoOneActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
  • 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
  • Layout & View(s)
  • Layout & View(s)
  • Layout & View(s) fill_parent fill_parent
  • Layout & View(s) fill_parent Some Button... wrap_content fill_parent fill_parent
  • View Hierarchies ViewGroup
  • View Hierarchies ViewGroup View View ViewGroup
  • View Hierarchies ViewGroup View View ViewGroup View View
  • 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(); } });
  • WebView TabHost VideoView ScrollView Views TextView DatePicker RatingBar ViewSwitcher
  • Many nice views You still want a designer
  • Layouts
  • 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”
  • LinearLayout LinearLayout vertical LinearLayout horizontal weight=0.5 weight=0.5
  • LinearLayout LinearLayout vertical LinearLayout horizontal weight=0.5 weight=0.5
  • RelativeLayout parentTop 1 toRightOf 1 parentLeft layout_below button1 parentBottom 2 toRightOf 1
  • RelativeLayout parentTop 1 toRightOf 1 parentLeft layout_below button1 parentBottom 2 toRightOf 1
  • LayoutParams @+id/red android:layout_above="@id/green" @+id/green android:layout_below="@id/red"
  • 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"
  • LayoutParams @+id/red @+id/green android:layout_alignBottom="@id/red"
  • LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red"
  • 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
  • LayoutParams android:layout_alignTop="@id/red" @+id/green @+id/red @+id/green android:layout_alignBottom="@id/red" @+id/red
  • 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
  • LayoutParams android:layout_alignParentTop="true" android:layout_alignParentLeft="true" @+id/red parent @+id/red android:layout_alignParentBottom="true" android:layout_alignParentRight="true"
  • Adapter
  • 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
  • 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);
  • 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(); } }
  • 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(); } }
  • Roll your own • Extend BaseAdapter, overwrite getCount getItem getItemId getView getItemViewType getViewTypeCount
  • Roll your own • Extend BaseAdapter, overwrite getCount getItem getItemId getView getItemViewType getViewTypeCount
  • 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... }
  • 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; }
  • 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); }
  • 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; }
  • Roll your own
  • <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>
  • Drawable Resources
  • 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
  • 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
  • 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
  • NinePatch Drawables • draw9patch command line tool • Define stretchable areas and padding box (optional) • The coolest thing since the invention of sliced bread
  • NinePatch Drawables stretchable stretchable
  • NinePatch Drawables stretchable stretchable
  • NinePatch Drawables stretchable stretchable padding padding
  • Styles & Themes
  • 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.
  • 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
  • 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>
  • 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>
  • 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
  • Multiple Screen Sizes
  • 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
  • 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
  • Design Tips
  • 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
  • Tools & Plugins
  • Tools & Plugins • Android Asset Studio android-ui-utils.googlecode.com • Web Apps for Launcher Icons Menu Icons Tab Icons Notification Icons
  • Tools & Plugins • Android Asset Studio android-ui-utils.googlecode.com • Web Apps for Launcher Icons Menu Icons Tab Icons Notification Icons
  • 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
  • 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
  • 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
  • Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • Tools & Plugins • Physical Stencil Kit http://uistencils.com
  • 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,
  • Tools & Plugins • HierarchyViewer http://developer.android.com/guide/developing/tools/hierarchy-viewer.html • Visualizes the layout hierarchy, allows you you to discover inefficient layouts
  • Tools & Plugins • HierarchyViewer http://developer.android.com/guide/developing/tools/hierarchy-viewer.html • Visualizes the layout hierarchy, allows you you to discover inefficient layouts
  • Q&A
  • Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de
  • WE HIRE Sven Haiges, greenrobot Twitter @hansamann Android, HTML5, Groovy & Grails sven@greenrobot.de