android design patterns
DESCRIPTION
Slides from the guru session about Android Design Patterns and tools held at Appsterdam / Bouncespace at 20/10/2012TRANSCRIPT
![Page 1: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/1.jpg)
Android Design Patterns
Raul Portales
@sla_shalafi
Platty Soft
@plattysoft
![Page 2: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/2.jpg)
Why?
Good Design = Happy Users
![Page 3: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/3.jpg)
Device Independent Design
Save yourself time and headaches
![Page 4: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/4.jpg)
![Page 5: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/5.jpg)
Device Independent Design
● Use dips● Prefer Relative Layouts● Qualify dimensions as resources
– Best way to move to tablets
![Page 6: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/6.jpg)
Fragments
Design for phones and tabletsReuse as much code as you can
![Page 7: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/7.jpg)
Fragments
● A Fragment represents a behavior or a portion of user interface in an Activity.
● You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running (sort of like a "sub activity" that you can reuse in different activities).
![Page 8: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/8.jpg)
Using Fragments
● Fragments are only available 3.0+● Gingerbread is still on 50%+ of devices
![Page 9: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/9.jpg)
Compat Library
Brings Fragments back to 1.6
![Page 10: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/10.jpg)
Fragments: Detail View
![Page 11: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/11.jpg)
Fragments: Detail View
![Page 12: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/12.jpg)
The tech side
● MasterFragment● DetailFragment● Qualify layouts
– xlarge-land → 2 fragments
– normal → 1 fragment
● MainActivity– If has a detail fragment, use it
– Or write 2 different activities
![Page 13: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/13.jpg)
Fragments
● onCreateView● onViewCreated● getActivity● getArguments
![Page 14: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/14.jpg)
Common Pitfalls
● Be aware of the Constructor!!● The Activity may not be always there
– It may have been destroyed
– Or the fragment detached
● There is no communication among fragments– Do it through the Activity
– Better: Use an interface
![Page 15: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/15.jpg)
FragmentManager
● findFragmentById● findFragmentByTag● FragmentTransaction
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.replace(R.id.mainFragment, MyFragment.newInstance());
ft.commitAllowingStateLoss();
![Page 16: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/16.jpg)
Fragments: View Pager
The most useful utility of Fragments
![Page 17: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/17.jpg)
Fragments: View Pager
![Page 18: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/18.jpg)
The tech side
● MainActivity● FragmentPagerAdapter
– Fragments
![Page 19: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/19.jpg)
Show me the Code
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"/>
</LinearLayout>
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
![Page 20: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/20.jpg)
Action Bar
Main improvement in 3.0 and 4.0Has been around since 2009
![Page 21: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/21.jpg)
Action Bar
● Provide a dedicated space for identifying the application brand and user location.
● Provide consistent navigation and view refinement across different applications.
● Make key actions for the activity (such as "search", "create", "share", etc.) prominent and accessible to the user in a predictable way.
![Page 22: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/22.jpg)
Action Bar
1.App icon
2.View control
3.Action buttons
4.Action overflow
![Page 23: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/23.jpg)
Action Buttons
● Frequent● Important● Typical
![Page 24: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/24.jpg)
Show me the Code
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_activity, menu);
return true;
}
<menu xmlns:android="...”>
<item android:id="@+id/menu_save"
android:icon="@drawable/ic_menu_save"
android:title="@string/menu_save"
android:showAsAction="ifRoom|withText" />
</menu>
![Page 25: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/25.jpg)
The Action Bar is NOT part of the Compat Library
![Page 26: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/26.jpg)
![Page 27: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/27.jpg)
ActionBarSherlock
● Deprecated from Inception– Same class names, different packages
● Based on the Compat library● From Android 2.x up
![Page 28: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/28.jpg)
Using ABS
● Add ABS as library● Use the theme for your App● getActionBar → getSupportActionBar● Activity → SherlockActivity● FragmentActivity → SherlockFragmentActivity● Fragment → SherlockFragment● And so on...
![Page 29: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/29.jpg)
ViewPageIndicator
You have seen it in the screenshotsCombined with a ViewPager
![Page 30: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/30.jpg)
ViewPageIndicator
![Page 31: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/31.jpg)
Show me the Code
<com.viewpagerindicator.TitlePageIndicator
android:id="@+id/indicator"
android:padding="10dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(pager);
![Page 32: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/32.jpg)
Navigation Styles
● Top navigation tabs– For a clear landing page
● Dashboard– For a set of important options
● Drawer– Combined with a landing page
![Page 33: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/33.jpg)
Navigation Styles
Vs.
![Page 34: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/34.jpg)
Testing on devices
![Page 35: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/35.jpg)
Testing on devices
![Page 36: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/36.jpg)
Testing on devices
![Page 37: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/37.jpg)
Testing on devices
![Page 38: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/38.jpg)
Doing more with less
● Gingerbread, hdpi, normal → Nexus One● Jelly Bean, xhdpi → Galaxy Nexus● Froyo, mdpi → HTC Magic● ICS, xlarge → Asus Transformer● large → Nexus 7 / Galaxy Tab 7● Honeycomb → Galaxy Tab
![Page 39: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/39.jpg)
To know more...
● Android Design Site: http://developer.android.com/design
● Google I/O videos, specially day 3 https://developers.google.com/events/io/sessions#android
● ActionBarSherlock http://actionbarsherlock.com/
● ViewPageIndicatorhttp://viewpagerindicator.com/
![Page 40: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/40.jpg)
![Page 41: Android design patterns](https://reader034.vdocuments.us/reader034/viewer/2022052505/554fa327b4c905ad218b4b86/html5/thumbnails/41.jpg)
Android Design Patterns
Raul Portales
@sla_shalafi
Platty Soft
@plattysoft