Your SlideShare is downloading. ×
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
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

Design Patterns for Tablets and Smartphones

2,442

Published on

This is a talk I gave at AnDevCon. It talks about ways to take advantage of features introduced in Android 3.0 to create more modular and better looking apps.

This is a talk I gave at AnDevCon. It talks about ways to take advantage of features introduced in Android 3.0 to create more modular and better looking apps.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,442
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
126
Comments
0
Likes
4
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Design Patterns for Tablets and Smartphones Michael Galpin, Bump Technologies
    • 2. About me• Apps! • Bump • eBay Mobile• Book! • Android in Practice • Chapter 15
    • 3. Agenda • Key Concepts • App Structure • Fragments • Goodies • Action Bar • Loaders • Eye Candy
    • 4. So you built an app...
    • 5. One app or two?•Re-use code & assets •Simpler logic•Build on Market presence •New platform features
    • 6. Library Projects
    • 7. Breakin’ it down App
    • 8. Breakin’ it downApp Tablet App Library
    • 9. What’s in a Library?• I/O: Networking, files, content • Data parsing• Models• Services, Receivers, Content Providers• Resources • Drawables, Strings
    • 10. Moving Targets
    • 11. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.manning.aip.tabdroid" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="11" /> <supports-screens android:smallScreens="false" android:normalScreens="false" android:largeScreens="true" android:xlargeScreens="true" android:requiresSmallestWidthDp="500" />
    • 12. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.manning.aip.tabdroid" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="11" /> <supports-screens android:smallScreens="false" android:normalScreens="false" android:largeScreens="true" API <= 12 android:xlargeScreens="true" android:requiresSmallestWidthDp="500" />
    • 13. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.manning.aip.tabdroid" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="11" /> <supports-screens android:smallScreens="false" android:normalScreens="false" android:largeScreens="true" android:xlargeScreens="true" /> android:requiresSmallestWidthDp="500" API >= 13
    • 14. Not all tablets are created equally
    • 15. Screen Size Selectors
    • 16. Have your cake and eat it too
    • 17. Multiple APKsApp Tablet App Library
    • 18. Multiple APKs MyApp on the MarketApp Tablet App Library
    • 19. Fragments
    • 20. Stop me if you’ve heard this one
    • 21. Fragment
    • 22. Fragment
    • 23. Fragment
    • 24. Fragment
    • 25. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/details_container"> <fragment class="com.manning.aip.tabdroid.SectionDetailsFragment" android:id="@+id/section_list_fragment" android:visibility="gone" android:layout_marginTop="?android:attr/actionBarSize" android:layout_width="300dp" android:layout_height="match_parent" /> <fragment class="com.manning.aip.tabdroid.DealFragment" android:id="@+id/deal_fragment" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
    • 26. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/details_container" android:gravity="bottom"> <fragment class="com.manning.aip.tabdroid.DealFragment" android:id="@+id/deal_fragment" android:layout_marginTop="?android:attr/actionBarSize" android:layout_width="match_parent" android:layout_height="wrap_content" /> <fragment class="com.manning.aip.tabdroid.FilmstripFragment" android:id="@+id/section_filmstrip_fragment" android:visibility="gone" android:layout_width="match_parent" android:layout_height="300dp" android:layout_gravity="bottom"/></LinearLayout>
    • 27. Fragments: Not just for Tablets• “Smart” UI • Stateful • Mange data (state)• Communicates
    • 28. Spot the Fragment
    • 29. Communication & Couplingpublic class SectionDetailsFragment extends ListFragment { private void showDeal(int position){ app.currentItem = app.currentSection.items.get(position); DealFragment fragment = (DealFragment) getFragmentManager().findFragmentById(R.id.deal_fragment); fragment.showCurrentItem(); } @Override public void onListItemClick(ListView l, View v, int position, long id) { currentPosition = position; showDeal(position); }...}
    • 30. Who knows you & who do you know?Fragment Activity Fragment
    • 31. Use an Observerpublic class SectionDetailsFragment extends ListFragment { OnItemSelectedListener listener; public static interface OnItemSelectedListener { public void onItemSelected(Item item); } public void setOnItemSelectedListener( OnItemSelectedListener listener){ this.listener = listener; } private void showDeal(int position){ app.currentItem = app.currentSection.items.get(position); listener.onItemSelected(app.currentItem); }...}
    • 32. ...and Observepublic class DealsMain extends Activity implements OnItemSelectedListener{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.home); SectionDetailsFragment sectionFragment = (SectionDetailsFragment) getFragmentManager().findFragmentById(R.id.section_list_fragment); sectionFragment.setOnItemSelectedListener(this); } @Override public void onItemSelected(Item item) { DealFragment fragment = (DealFragment) getFragmentManager().findFragmentById(R.id.deal_fragment); fragment.showItem(item); }...}
    • 33. QueuesFragment Activity Fragment inbound outbound
    • 34. QueuesFragment Activity Fragment inbound outbound
    • 35. Queues (Handlers)Fragment Activity Fragment inbound outbound
    • 36. But I have to supportAndroid 2.1
    • 37. The Action Bar
    • 38. ActionBar Essentials• Replaces Menu• Can be top & bottom in ICS• Not available in Compatibility Package • Helper for menus -> ActionBar
    • 39. Loaders
    • 40. Threads
    • 41. HandlersThreads
    • 42. AsyncTask HandlersThreads
    • 43. AsyncTaskLoader AsyncTask HandlersThreads
    • 44. Why do I need Loaders? • Encapsulates • Loading of data • Caching of data • Updates to data • Cursors and Async
    • 45. Eye Candy
    • 46. Drag and Drop
    • 47. class BoxDragListener implements OnDragListener{ boolean insideOfMe = false; Drawable border = null; Drawable redBorder = getResources().getDrawable(R.drawable.border3); @Override public boolean onDrag(View self, DragEvent event) { if (event.getAction() == DragEvent.ACTION_DRAG_STARTED){ border = self.getBackground(); self.setBackgroundDrawable(redBorder); } else if (event.getAction() == DragEvent.ACTION_DRAG_ENTERED){ insideOfMe = true; } else if (event.getAction() == DragEvent.ACTION_DRAG_EXITED){ insideOfMe = false; } else if (event.getAction() == DragEvent.ACTION_DROP){ if (insideOfMe){ // add to container } else if (event.getAction() == DragEvent.ACTION_DRAG_ENDED){ self.setBackgroundDrawable(border); } return true; }}
    • 48. public class DndActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.grid); findViewById(R.id.topLeft).setOnDragListener(new BoxDragListener()); findViewById(R.id.bottomLeft).setOnDragListener(new BoxDragListener()); findViewById(R.id.topRight).setOnDragListener(new BoxDragListener()); findViewById(R.id.bottomRight).setOnDragListener(new BoxDragListener()); }... ImageView imgView = (ImageView) recycledView; imgView.setOnLongClickListener(new OnLongClickListener(){ @Override public boolean onLongClick(View view) { ClipData data = ClipData.newPlainText("foo","bar"); DragShadowBuilder shadowBuilder = new DragShadowBuilder(owner); owner.startDrag(data, shadowBuilder, owner, 0); return true; } });}
    • 49. AnimatorsImageView backgroundImage = (count % 2 == 0) ? rightSlide : leftSlide;ObjectAnimator anim = ObjectAnimator.ofFloat(backgroundImage, "alpha", 0.0f, 1.0f);anim.addListener(new AnimatorListenerAdapter(){ public void onAnimationEnd(Animator animator){ nextSlide(); }});

    ×