Download - Evolve 2014 - Effective Navigation in Xamarin Android

Transcript
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