Android design patterns
-
Upload
platty-soft -
Category
Documents
-
view
4.430 -
download
0
description
Transcript of Android design patterns
Android Design Patterns
Raul Portales
@sla_shalafi
Platty Soft
@plattysoft
Why?
Good Design = Happy Users
Device Independent Design
Save yourself time and headaches
Device Independent Design
● Use dips● Prefer Relative Layouts● Qualify dimensions as resources
– Best way to move to tablets
Fragments
Design for phones and tabletsReuse as much code as you can
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).
Using Fragments
● Fragments are only available 3.0+● Gingerbread is still on 50%+ of devices
Compat Library
Brings Fragments back to 1.6
Fragments: Detail View
Fragments: Detail View
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
Fragments
● onCreateView● onViewCreated● getActivity● getArguments
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
FragmentManager
● findFragmentById● findFragmentByTag● FragmentTransaction
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.replace(R.id.mainFragment, MyFragment.newInstance());
ft.commitAllowingStateLoss();
Fragments: View Pager
The most useful utility of Fragments
Fragments: View Pager
The tech side
● MainActivity● FragmentPagerAdapter
– Fragments
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);
Action Bar
Main improvement in 3.0 and 4.0Has been around since 2009
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.
Action Bar
1.App icon
2.View control
3.Action buttons
4.Action overflow
Action Buttons
● Frequent● Important● Typical
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>
The Action Bar is NOT part of the Compat Library
ActionBarSherlock
● Deprecated from Inception– Same class names, different packages
● Based on the Compat library● From Android 2.x up
Using ABS
● Add ABS as library● Use the theme for your App● getActionBar → getSupportActionBar● Activity → SherlockActivity● FragmentActivity → SherlockFragmentActivity● Fragment → SherlockFragment● And so on...
ViewPageIndicator
You have seen it in the screenshotsCombined with a ViewPager
ViewPageIndicator
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);
Navigation Styles
● Top navigation tabs– For a clear landing page
● Dashboard– For a set of important options
● Drawer– Combined with a landing page
Navigation Styles
Vs.
Testing on devices
Testing on devices
Testing on devices
Testing on devices
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
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/
Android Design Patterns
Raul Portales
@sla_shalafi
Platty Soft
@plattysoft