36
Effective Navigation in Xamarin.Android Developer Evangelist, Xamarin @JamesMontemagno James Montemagno

Evolve 2014 - Effective Navigation in Xamarin Android

Embed Size (px)

DESCRIPTION

Video: https://www.youtube.com/watch?v=Hw8tB45kse4 Abstract: With so many navigation styles in Android, selecting what's perfect for your app can be difficult. There are Tabs, Navigation Drawers, and Dashboards... it can be overwhelming! Join James as he covers best practices for creating elegant navigation patterns for your Xamarin.Android mobile application. Together, you'll take a look at what style of navigation is optimal for different types of apps.

Citation preview

Page 1: Evolve 2014 - Effective Navigation in Xamarin Android

Effective Navigation in Xamarin.Android

Developer Evangelist, Xamarin@JamesMontemagno

James Montemagno

Page 2: Evolve 2014 - Effective Navigation in Xamarin Android

Why Navigation?

Page 3: Evolve 2014 - Effective Navigation in Xamarin Android
Page 4: Evolve 2014 - Effective Navigation in Xamarin Android

State of Navigation

Page 5: Evolve 2014 - Effective Navigation in Xamarin Android

Lists

Page 6: Evolve 2014 - Effective Navigation in Xamarin Android

Dashboards

Page 7: Evolve 2014 - Effective Navigation in Xamarin Android

Tabs

Page 8: Evolve 2014 - Effective Navigation in Xamarin Android

Tabs…in the wrong place

Page 9: Evolve 2014 - Effective Navigation in Xamarin Android

Drop Down List

Page 10: Evolve 2014 - Effective Navigation in Xamarin Android

Overflow Menu…don’t do this

Page 11: Evolve 2014 - Effective Navigation in Xamarin Android

Flyouts

Page 12: Evolve 2014 - Effective Navigation in Xamarin Android

Way too many ways!

Page 13: Evolve 2014 - Effective Navigation in Xamarin Android

Subtitle

Page 14: Evolve 2014 - Effective Navigation in Xamarin Android

Subtitle

Page 15: Evolve 2014 - Effective Navigation in Xamarin Android

Enter Navigation Drawer

Page 16: Evolve 2014 - Effective Navigation in Xamarin Android

How it works:

Page 17: Evolve 2014 - Effective Navigation in Xamarin Android

Why Navigation Drawer?

Page 18: Evolve 2014 - Effective Navigation in Xamarin Android

I am glad you asked

• User Familiarity

• Content First

• Standard Control

• Easy to Implement

• Highly Customizable

• “Fragment” First Approach

Page 19: Evolve 2014 - Effective Navigation in Xamarin Android

Demo

Page 20: Evolve 2014 - Effective Navigation in Xamarin Android
Page 21: Evolve 2014 - Effective Navigation in Xamarin Android

Combine It

• Plays great with:

• Tabs

• Drop Downs

• Buttons

• Just about anything

Better together

Page 22: Evolve 2014 - Effective Navigation in Xamarin Android

Tips & Tricks

• Only show specific menu items

• Hide most when open

• Show all when closed

• Open drawer on first run

• Gets your user familiar with you app

• Use standard icons

Even more effective

Page 23: Evolve 2014 - Effective Navigation in Xamarin Android

Android L

Page 24: Evolve 2014 - Effective Navigation in Xamarin Android

Compatibility

• ActionBarCompat v7

• Gotchas:

• Ensure you use Compat variables

• GravityCompat

• ?android:attr/activatedBackgroundIndicator doesn’t exist

• Use CheckedTextView and a custom drawable background

Page 25: Evolve 2014 - Effective Navigation in Xamarin Android

Xamarin.Forms Compatible

• Master

• Content Page w/ListView

• Detect Selection

• Set Detail Page

• Use same hamburger button

MasterDetailPage

Page 26: Evolve 2014 - Effective Navigation in Xamarin Android

Demo

Page 27: Evolve 2014 - Effective Navigation in Xamarin Android

Up Navigation

Page 28: Evolve 2014 - Effective Navigation in Xamarin Android

Up Navigation

Page 29: Evolve 2014 - Effective Navigation in Xamarin Android

Back vs. Up

Page 30: Evolve 2014 - Effective Navigation in Xamarin Android

Demo

Page 31: Evolve 2014 - Effective Navigation in Xamarin Android
Page 32: Evolve 2014 - Effective Navigation in Xamarin Android

Choose wiselyNot everyone needs it

Page 33: Evolve 2014 - Effective Navigation in Xamarin Android

Perhaps this would work nicelyMake use of overflow for sections not used often.

Page 34: Evolve 2014 - Effective Navigation in Xamarin Android

Evolution of an appEasily switch out fragments

Page 35: Evolve 2014 - Effective Navigation in Xamarin Android

Make Beautiful Navigable Apps!

!

code: http://github.com/jamesmontemagno/Xam.NavDrawer

Page 36: Evolve 2014 - Effective Navigation in Xamarin Android

Navigation.End(﴾)﴿;

James Montemagno@JamesMontemagno