SlideShare ist ein Scribd-Unternehmen logo
1 von 28
Downloaden Sie, um offline zu lesen
User Experience and Interactions 
Design 
Rakesh Kumar Jha 
M. Tech, MBA 
Delivery Manager
Best Practices for Interaction and 
Engagement 
• These classes teach you how to engage and 
retain your users by implementing the best 
interaction patterns for Android.
Best Practices for Interaction and 
Engagement 
1. Designing Effective Navigation 
2. Implementing Effective Navigation 
3. Notifying the User 
4. Adding Search Functionality 
5. Making Your App Content Searchable by 
Google
Designing Effective Navigation 
1. Planning Screens and Their Relationships 
2. Planning for Multiple Touchscreen Sizes 
3. Providing Descendant and Lateral Navigation 
4. Providing Ancestral and Temporal Navigation 
5. Putting it All Together: Wireframing the 
Example App
Implementing Effective Navigation 
1. Creating Swipe Views with Tabs 
2. Creating a Navigation Drawer 
3. Providing Up Navigation 
4. Providing Proper Back Navigation 
5. Implementing Descendant Navigation
Notifying the User 
1. Building a Notification 
2. Preserving Navigation when Starting an 
Activity 
3. Updating Notifications 
4. Using Big View Styles 
5. Displaying Progress in a Notification
Adding Search Functionality 
1. Setting up the Search Interface 
2. Storing and Searching for Data 
3. Remaining Backward Compatible
Making Your App Content Searchable 
by Google 
1. Enabling Deep Links for App Content 
2. Specifying App Content for Indexing
Designing Effective Navigation
Planning Screens and Their 
Relationships 
• Buttons leading to different sections (e.g., 
stories, photos, saved items) 
• Vertical lists representing collections (e.g., 
story lists, photo lists, etc.) 
• Detail information (e.g., story view, full-screen 
photo view, etc.)
Planning for Multiple Touchscreen 
Sizes 
• Designing applications for television sets also 
requires attention to other factors, including 
interaction methods (i.e., the lack of a touch 
screen), legibility of text at large reading 
distances, and more. 
• Although this discussion is outside the scope 
of this class,
Planning for Multiple Touchscreen 
Sizes 
• Group Screens with Multi-pane Layouts 
• Design for Multiple Tablet Orientations 
• Group Screens in the Screen Map 
• Android Design: Multi-pane Layouts 
• Designing for Multiple Screens
Providing Descendant and Lateral 
Navigation 
• Buttons and Simple Targets 
• Lists, Grids, Carousels, and Stacks 
• Tabs 
• Horizontal Paging (Swipe Views) 
• Android Design: Buttons 
• Android Design: Lists 
• Android Design: Grid Lists 
• Android Design: Tabs 
• Android Design: Swipe Views
Putting it All Together: Wireframing 
the Example App 
• Choose Patterns 
• Sketch and Wireframe 
• Create Digital Wireframes
Putting it All Together: Wireframing 
the Example App 
• Wireframing is the step in the design process 
where you begin to lay out your screens. Get 
creative and begin imagining how to arrange 
UI elements to allow users to navigate your 
app. Keep in mind that at this point, pixel-perfect 
precision (creating high-fidelity 
mockups) is not important
Putting it All Together: Wireframing 
the Example App 
• Wireframing is the step in the design process 
where you begin to lay out your screens. Get 
creative and begin imagining how to arrange 
UI elements to allow users to navigate your 
app. Keep in mind that at this point, pixel-perfect 
precision (creating high-fidelity 
mockups) is not important
Implementing Effective Navigation
Designing Effective Navigation 
• how to implement the key navigation design 
patterns detailed in the Designing Effective 
Navigation
Designing Effective Navigation 
• how to implement the key navigation design 
patterns detailed in the Designing Effective 
Navigation 
• how to implement navigation patterns with 
tabs, swipe views, and a navigation drawer 
• Several elements require the Support 
Library APIs.
Creating Swipe Views with Tabs 
• Learn how to implement tabs in the action bar 
and provide horizontal paging (swipe views) to 
navigate between tabs or left navigationbar. 
• wipe views provide lateral navigation between 
sibling screens such as tabs with a horizontal 
finger gesture (a pattern sometimes known as 
horizontal paging)
Creating Swipe Views with Tabs 
• <?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.view.ViewPager 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 
• To insert child views that represent each page, you need to hook this 
layout to a PagerAdapter. There are two kinds of adapter you can use:
Creating Swipe Views with Tabs 
• FragmentPagerAdapter – 
This is best when navigating between sibling 
screens representing a fixed, small number of 
pages. 
• FragmentStatePagerAdapter – 
This is best for paging across a collection of objects 
for which the number of pages is undetermined. It 
destroys fragments as the user navigates to other 
pages, minimizing memory usage.
Creating Swipe Views with Tabs 
public class CollectionDemoActivity extends FragmentActivity { 
// When requested, this adapter returns a DemoObjectFragment, 
// representing an object in the collection. 
DemoCollectionPagerAdapter mDemoCollectionPagerAdapter; 
ViewPager mViewPager; 
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_collection_demo); 
// ViewPager and its adapters use support library 
// fragments, so use getSupportFragmentManager. 
mDemoCollectionPagerAdapter = 
new DemoCollectionPagerAdapter( 
getSupportFragmentManager()); 
mViewPager = (ViewPager) findViewById(R.id.pager); 
mViewPager.setAdapter(mDemoCollectionPagerAdapter); 
} 
}
Creating Swipe Views with Tabs 
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter { 
public DemoCollectionPagerAdapter(FragmentManager fm) { 
super(fm); 
} 
@Override 
public Fragment getItem(int i) { 
Fragment fragment = new DemoObjectFragment(); 
Bundle args = new Bundle(); 
// Our object is just an integer :-P 
args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1); 
fragment.setArguments(args); 
return fragment; 
} 
@Override 
public int getCount() { 
return 100; 
} 
@Override 
public CharSequence getPageTitle(int position) { 
return "OBJECT " + (position + 1); 
} 
}
Creating Swipe Views with Tabs 
/ Instances of this class are fragments representing a single 
// object in our collection. 
public static class DemoObjectFragment extends Fragment { 
public static final String ARG_OBJECT = "object"; 
@Override 
public View onCreateView(LayoutInflater inflater, 
ViewGroup container, Bundle savedInstanceState) { 
// The last two arguments ensure LayoutParams are inflated 
// properly. 
View rootView = inflater.inflate( 
R.layout.fragment_collection_object, container, false); 
Bundle args = getArguments(); 
((TextView) rootView.findViewById(android.R.id.text1)).setText( 
Integer.toString(args.getInt(ARG_OBJECT))); 
return rootView; 
} 
}
Add Tabs to the Action Bar 
• Action bar tabs offer users a familiar interface 
for navigating between and identifying sibling 
screens in your app.
@Override 
public void onCreate(Bundle savedInstanceState) { 
final ActionBar actionBar = getActionBar(); 
... 
// Specify that tabs should be displayed in the action bar. 
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 
// Create a tab listener that is called when the user changes tabs. 
ActionBar.TabListener tabListener = new ActionBar.TabListener() { 
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { 
// show the given tab 
} 
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { 
// hide the given tab 
} 
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { 
// probably ignore this event 
} 
}; 
// Add 3 tabs, specifying the tab's text and TabListener 
for (int i = 0; i < 3; i++) { 
actionBar.addTab( 
actionBar.newTab() 
.setText("Tab " + (i + 1)) 
.setTabListener(tabListener)); 
} 
}
Change Tabs with Swipe Views 
@Override 
public void onCreate(Bundle savedInstanceState) { 
... 
// Create a tab listener that is called when the user changes tabs. 
ActionBar.TabListener tabListener = new ActionBar.TabListener() { 
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction 
ft) { 
// When the tab is selected, switch to the 
// corresponding page in the ViewPager. 
mViewPager.setCurrentItem(tab.getPosition()); 
} 
... 
}; 
}

Weitere ähnliche Inhalte

Andere mochten auch

Презентация ПЗПО
Презентация ПЗПОПрезентация ПЗПО
Презентация ПЗПОUniteh
 
Презентация ПЗПО 2013
Презентация ПЗПО 2013Презентация ПЗПО 2013
Презентация ПЗПО 2013Uniteh
 
Royal Incorporation of Architects Scotland
Royal Incorporation of Architects ScotlandRoyal Incorporation of Architects Scotland
Royal Incorporation of Architects ScotlandWarren Elsmore
 
Finansijska trzista
Finansijska trzista Finansijska trzista
Finansijska trzista Rodjaroki
 
Android coding standard
Android coding standard Android coding standard
Android coding standard Rakesh Jha
 
каталог запчастей болгарские тали
каталог запчастей болгарские таликаталог запчастей болгарские тали
каталог запчастей болгарские талиUniteh
 
Android ndk - Introduction
Android ndk  - IntroductionAndroid ndk  - Introduction
Android ndk - IntroductionRakesh Jha
 
Introduction of phonegap installation and configuration of Phonegap with An...
Introduction of phonegap   installation and configuration of Phonegap with An...Introduction of phonegap   installation and configuration of Phonegap with An...
Introduction of phonegap installation and configuration of Phonegap with An...Rakesh Jha
 
Webnisus Media SEO portfolio
Webnisus Media SEO portfolioWebnisus Media SEO portfolio
Webnisus Media SEO portfoliowebnisus
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for PhonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
Mobile applications testing (challenges, tools & techniques)
Mobile applications testing (challenges, tools & techniques)Mobile applications testing (challenges, tools & techniques)
Mobile applications testing (challenges, tools & techniques)Rakesh Jha
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapRakesh Jha
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
 

Andere mochten auch (16)

Презентация ПЗПО
Презентация ПЗПОПрезентация ПЗПО
Презентация ПЗПО
 
My persentation
My persentationMy persentation
My persentation
 
Презентация ПЗПО 2013
Презентация ПЗПО 2013Презентация ПЗПО 2013
Презентация ПЗПО 2013
 
Royal Incorporation of Architects Scotland
Royal Incorporation of Architects ScotlandRoyal Incorporation of Architects Scotland
Royal Incorporation of Architects Scotland
 
Finansijska trzista
Finansijska trzista Finansijska trzista
Finansijska trzista
 
Android coding standard
Android coding standard Android coding standard
Android coding standard
 
каталог запчастей болгарские тали
каталог запчастей болгарские таликаталог запчастей болгарские тали
каталог запчастей болгарские тали
 
29 Ways To Stay Creative - ENG version
29 Ways To Stay Creative - ENG version29 Ways To Stay Creative - ENG version
29 Ways To Stay Creative - ENG version
 
Android ndk - Introduction
Android ndk  - IntroductionAndroid ndk  - Introduction
Android ndk - Introduction
 
Introduction of phonegap installation and configuration of Phonegap with An...
Introduction of phonegap   installation and configuration of Phonegap with An...Introduction of phonegap   installation and configuration of Phonegap with An...
Introduction of phonegap installation and configuration of Phonegap with An...
 
Webnisus Media SEO portfolio
Webnisus Media SEO portfolioWebnisus Media SEO portfolio
Webnisus Media SEO portfolio
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for Phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Mobile applications testing (challenges, tools & techniques)
Mobile applications testing (challenges, tools & techniques)Mobile applications testing (challenges, tools & techniques)
Mobile applications testing (challenges, tools & techniques)
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with Phonegap
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 

Ähnlich wie User experience and interactions design

Windows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsWindows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsOliver Scheer
 
[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Androidrizki adam kurniawan
 
03.Controls in Windows Phone
03.Controls in Windows Phone03.Controls in Windows Phone
03.Controls in Windows PhoneNguyen Tuan
 
Application Development - Overview on Android OS
Application Development - Overview on Android OSApplication Development - Overview on Android OS
Application Development - Overview on Android OSPankaj Maheshwari
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tabletsDesigning and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tabletsTeddy Koornia
 
Ch4 creating user interfaces
Ch4 creating user interfacesCh4 creating user interfaces
Ch4 creating user interfacesShih-Hsiang Lin
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Peak Usability
 
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...Akira Hatsune
 
React Native: Introduction
React Native: IntroductionReact Native: Introduction
React Native: IntroductionInnerFood
 
Lecture14 abap on line
Lecture14 abap on lineLecture14 abap on line
Lecture14 abap on lineMilind Patil
 
Android Tutorial
Android TutorialAndroid Tutorial
Android TutorialFun2Do Labs
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxGevitaChinnaiah
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI DesignIvano Malavolta
 
W1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxW1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxssuserc1e786
 
Android Custom Views
Android Custom ViewsAndroid Custom Views
Android Custom ViewsBabar Sanah
 

Ähnlich wie User experience and interactions design (20)

Windows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsWindows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 Applications
 
[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android
 
03.Controls in Windows Phone
03.Controls in Windows Phone03.Controls in Windows Phone
03.Controls in Windows Phone
 
Application Development - Overview on Android OS
Application Development - Overview on Android OSApplication Development - Overview on Android OS
Application Development - Overview on Android OS
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tabletsDesigning and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
 
Ch4 creating user interfaces
Ch4 creating user interfacesCh4 creating user interfaces
Ch4 creating user interfaces
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
 
Prototyping + User Journeys
Prototyping + User JourneysPrototyping + User Journeys
Prototyping + User Journeys
 
React Native: Introduction
React Native: IntroductionReact Native: Introduction
React Native: Introduction
 
Lecture14 abap on line
Lecture14 abap on lineLecture14 abap on line
Lecture14 abap on line
 
Android Tutorial
Android TutorialAndroid Tutorial
Android Tutorial
 
Hello Android
Hello AndroidHello Android
Hello Android
 
User-centred design
User-centred designUser-centred design
User-centred design
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptx
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI Design
 
W1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxW1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptx
 
Android Custom Views
Android Custom ViewsAndroid Custom Views
Android Custom Views
 
User experience design
User experience design User experience design
User experience design
 
Diving Into Xamarin.Forms
Diving Into Xamarin.Forms Diving Into Xamarin.Forms
Diving Into Xamarin.Forms
 

Mehr von Rakesh Jha

Whitep paper on Emerging java and .net technology and critical trends
Whitep paper on Emerging java and .net technology and critical trendsWhitep paper on Emerging java and .net technology and critical trends
Whitep paper on Emerging java and .net technology and critical trendsRakesh Jha
 
Ways to be a great project manager
Ways to be a great project managerWays to be a great project manager
Ways to be a great project managerRakesh Jha
 
What is mobile wallet
What is mobile walletWhat is mobile wallet
What is mobile walletRakesh Jha
 
Cordova vs xamarin vs titanium
Cordova vs xamarin vs titaniumCordova vs xamarin vs titanium
Cordova vs xamarin vs titaniumRakesh Jha
 
Native development kit (ndk) introduction
Native development kit (ndk)  introductionNative development kit (ndk)  introduction
Native development kit (ndk) introductionRakesh Jha
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in AndroidRakesh Jha
 
Multithreading and concurrency in android
Multithreading and concurrency in androidMultithreading and concurrency in android
Multithreading and concurrency in androidRakesh Jha
 
Advance ui development and design
Advance ui  development and design Advance ui  development and design
Advance ui development and design Rakesh Jha
 
Android installation & configuration, and create HelloWorld Project
Android installation & configuration, and create HelloWorld ProjectAndroid installation & configuration, and create HelloWorld Project
Android installation & configuration, and create HelloWorld ProjectRakesh Jha
 

Mehr von Rakesh Jha (9)

Whitep paper on Emerging java and .net technology and critical trends
Whitep paper on Emerging java and .net technology and critical trendsWhitep paper on Emerging java and .net technology and critical trends
Whitep paper on Emerging java and .net technology and critical trends
 
Ways to be a great project manager
Ways to be a great project managerWays to be a great project manager
Ways to be a great project manager
 
What is mobile wallet
What is mobile walletWhat is mobile wallet
What is mobile wallet
 
Cordova vs xamarin vs titanium
Cordova vs xamarin vs titaniumCordova vs xamarin vs titanium
Cordova vs xamarin vs titanium
 
Native development kit (ndk) introduction
Native development kit (ndk)  introductionNative development kit (ndk)  introduction
Native development kit (ndk) introduction
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
 
Multithreading and concurrency in android
Multithreading and concurrency in androidMultithreading and concurrency in android
Multithreading and concurrency in android
 
Advance ui development and design
Advance ui  development and design Advance ui  development and design
Advance ui development and design
 
Android installation & configuration, and create HelloWorld Project
Android installation & configuration, and create HelloWorld ProjectAndroid installation & configuration, and create HelloWorld Project
Android installation & configuration, and create HelloWorld Project
 

User experience and interactions design

  • 1. User Experience and Interactions Design Rakesh Kumar Jha M. Tech, MBA Delivery Manager
  • 2. Best Practices for Interaction and Engagement • These classes teach you how to engage and retain your users by implementing the best interaction patterns for Android.
  • 3. Best Practices for Interaction and Engagement 1. Designing Effective Navigation 2. Implementing Effective Navigation 3. Notifying the User 4. Adding Search Functionality 5. Making Your App Content Searchable by Google
  • 4. Designing Effective Navigation 1. Planning Screens and Their Relationships 2. Planning for Multiple Touchscreen Sizes 3. Providing Descendant and Lateral Navigation 4. Providing Ancestral and Temporal Navigation 5. Putting it All Together: Wireframing the Example App
  • 5. Implementing Effective Navigation 1. Creating Swipe Views with Tabs 2. Creating a Navigation Drawer 3. Providing Up Navigation 4. Providing Proper Back Navigation 5. Implementing Descendant Navigation
  • 6. Notifying the User 1. Building a Notification 2. Preserving Navigation when Starting an Activity 3. Updating Notifications 4. Using Big View Styles 5. Displaying Progress in a Notification
  • 7. Adding Search Functionality 1. Setting up the Search Interface 2. Storing and Searching for Data 3. Remaining Backward Compatible
  • 8. Making Your App Content Searchable by Google 1. Enabling Deep Links for App Content 2. Specifying App Content for Indexing
  • 10. Planning Screens and Their Relationships • Buttons leading to different sections (e.g., stories, photos, saved items) • Vertical lists representing collections (e.g., story lists, photo lists, etc.) • Detail information (e.g., story view, full-screen photo view, etc.)
  • 11. Planning for Multiple Touchscreen Sizes • Designing applications for television sets also requires attention to other factors, including interaction methods (i.e., the lack of a touch screen), legibility of text at large reading distances, and more. • Although this discussion is outside the scope of this class,
  • 12. Planning for Multiple Touchscreen Sizes • Group Screens with Multi-pane Layouts • Design for Multiple Tablet Orientations • Group Screens in the Screen Map • Android Design: Multi-pane Layouts • Designing for Multiple Screens
  • 13. Providing Descendant and Lateral Navigation • Buttons and Simple Targets • Lists, Grids, Carousels, and Stacks • Tabs • Horizontal Paging (Swipe Views) • Android Design: Buttons • Android Design: Lists • Android Design: Grid Lists • Android Design: Tabs • Android Design: Swipe Views
  • 14. Putting it All Together: Wireframing the Example App • Choose Patterns • Sketch and Wireframe • Create Digital Wireframes
  • 15. Putting it All Together: Wireframing the Example App • Wireframing is the step in the design process where you begin to lay out your screens. Get creative and begin imagining how to arrange UI elements to allow users to navigate your app. Keep in mind that at this point, pixel-perfect precision (creating high-fidelity mockups) is not important
  • 16. Putting it All Together: Wireframing the Example App • Wireframing is the step in the design process where you begin to lay out your screens. Get creative and begin imagining how to arrange UI elements to allow users to navigate your app. Keep in mind that at this point, pixel-perfect precision (creating high-fidelity mockups) is not important
  • 18. Designing Effective Navigation • how to implement the key navigation design patterns detailed in the Designing Effective Navigation
  • 19. Designing Effective Navigation • how to implement the key navigation design patterns detailed in the Designing Effective Navigation • how to implement navigation patterns with tabs, swipe views, and a navigation drawer • Several elements require the Support Library APIs.
  • 20. Creating Swipe Views with Tabs • Learn how to implement tabs in the action bar and provide horizontal paging (swipe views) to navigate between tabs or left navigationbar. • wipe views provide lateral navigation between sibling screens such as tabs with a horizontal finger gesture (a pattern sometimes known as horizontal paging)
  • 21. Creating Swipe Views with Tabs • <?xml version="1.0" encoding="utf-8"?> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> • To insert child views that represent each page, you need to hook this layout to a PagerAdapter. There are two kinds of adapter you can use:
  • 22. Creating Swipe Views with Tabs • FragmentPagerAdapter – This is best when navigating between sibling screens representing a fixed, small number of pages. • FragmentStatePagerAdapter – This is best for paging across a collection of objects for which the number of pages is undetermined. It destroys fragments as the user navigates to other pages, minimizing memory usage.
  • 23. Creating Swipe Views with Tabs public class CollectionDemoActivity extends FragmentActivity { // When requested, this adapter returns a DemoObjectFragment, // representing an object in the collection. DemoCollectionPagerAdapter mDemoCollectionPagerAdapter; ViewPager mViewPager; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_collection_demo); // ViewPager and its adapters use support library // fragments, so use getSupportFragmentManager. mDemoCollectionPagerAdapter = new DemoCollectionPagerAdapter( getSupportFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mDemoCollectionPagerAdapter); } }
  • 24. Creating Swipe Views with Tabs public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter { public DemoCollectionPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { Fragment fragment = new DemoObjectFragment(); Bundle args = new Bundle(); // Our object is just an integer :-P args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1); fragment.setArguments(args); return fragment; } @Override public int getCount() { return 100; } @Override public CharSequence getPageTitle(int position) { return "OBJECT " + (position + 1); } }
  • 25. Creating Swipe Views with Tabs / Instances of this class are fragments representing a single // object in our collection. public static class DemoObjectFragment extends Fragment { public static final String ARG_OBJECT = "object"; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // The last two arguments ensure LayoutParams are inflated // properly. View rootView = inflater.inflate( R.layout.fragment_collection_object, container, false); Bundle args = getArguments(); ((TextView) rootView.findViewById(android.R.id.text1)).setText( Integer.toString(args.getInt(ARG_OBJECT))); return rootView; } }
  • 26. Add Tabs to the Action Bar • Action bar tabs offer users a familiar interface for navigating between and identifying sibling screens in your app.
  • 27. @Override public void onCreate(Bundle savedInstanceState) { final ActionBar actionBar = getActionBar(); ... // Specify that tabs should be displayed in the action bar. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Create a tab listener that is called when the user changes tabs. ActionBar.TabListener tabListener = new ActionBar.TabListener() { public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // show the given tab } public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { // hide the given tab } public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { // probably ignore this event } }; // Add 3 tabs, specifying the tab's text and TabListener for (int i = 0; i < 3; i++) { actionBar.addTab( actionBar.newTab() .setText("Tab " + (i + 1)) .setTabListener(tabListener)); } }
  • 28. Change Tabs with Swipe Views @Override public void onCreate(Bundle savedInstanceState) { ... // Create a tab listener that is called when the user changes tabs. ActionBar.TabListener tabListener = new ActionBar.TabListener() { public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // When the tab is selected, switch to the // corresponding page in the ViewPager. mViewPager.setCurrentItem(tab.getPosition()); } ... }; }