Downloaded 134 times
Uploaded byMichael Galpin
Design Patterns for Tablets and Smartphones
The document discusses design patterns for creating applications on tablets and smartphones, emphasizing the importance of app structure, fragments, and action bars. It outlines how to reuse code and assets across different platforms while ensuring compatibility with various screen sizes. Additionally, it covers concepts like loaders, drag-and-drop functionality, and the significance of data handling in app development.
More Related Content
![[FEConf Korea 2017]Angular 컴포넌트 대화법](https://cdn.slidesharecdn.com/ss_thumbnails/angular-171022050314-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Design Patterns for Tablets and Smartphones
![[PBO] Pertemuan 12 - Pemrograman Android](https://cdn.slidesharecdn.com/ss_thumbnails/pbopertemuan12-pemrogramanandroid-181217234438-thumbnail.jpg?width=640&height=640&fit=bounds)
Design Patterns for Tablets and Smartphones
- 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 builtan app...
- 5. One app ortwo? •Re-use code & assets •Simpler logic •Build on Market presence •New platform features
- 6.
- 7. Breakin’ it down App
- 8. Breakin’ it down App Tablet App Library
- 9. What’s in aLibrary? • I/O: Networking, files, content • Data parsing • Models • Services, Receivers, Content Providers • Resources • Drawables, Strings
- 10.
- 14. <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" />
- 15. <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" />
- 16. <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
- 17. Not all tabletsare created equally
- 18.
- 20. Have your cakeand eat it too
- 21. Multiple APKs App Tablet App Library
- 22. Multiple APKs MyApp on the Market App Tablet App Library
- 24.
- 25. Stop me ifyou’ve heard this one
- 27.
- 28.
- 30.
- 31.
- 32. <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>
- 33. <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>
- 35. Fragments: Not justfor Tablets • “Smart” UI • Stateful • Mange data (state) • Communicates
- 36.
- 37. Communication & Coupling publicclass 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); } ... }
- 38. Who knows you& who do you know? Fragment Activity Fragment
- 39. Use an Observer publicclass 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); } ... }
- 40. ...and Observe public classDealsMain 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); } ... }
- 41. Queues Fragment Activity Fragment inbound outbound
- 42. Queues Fragment Activity Fragment inbound outbound
- 43. Queues (Handlers) Fragment Activity Fragment inbound outbound
- 44. But I haveto support Android 2.1
- 48.
- 52. ActionBar Essentials • ReplacesMenu • Can be top & bottom in ICS • Not available in Compatibility Package • Helper for menus -> ActionBar
- 53.
- 55.
- 56.
- 57. AsyncTask Handlers Threads
- 58. AsyncTaskLoader AsyncTask Handlers Threads
- 59. Why do Ineed Loaders? • Encapsulates • Loading of data • Caching of data • Updates to data • Cursors and Async
- 60.
- 61.
- 62. class BoxDragListener implementsOnDragListener{ 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; } }
- 63. public class DndActivityextends 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; } }); }
- 64. Animators ImageView 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(); } });
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n
- #87 \n
- #88 \n
- #89 \n
- #90 \n
- #91 \n
- #92 \n
- #93 \n
- #94 \n
- #95 \n