effective navigation in xamarin.android

32
Effective Navigation in Xamarin.Android James Montemagno Developer Evangelist at Xamarin @JamesMontemagno | www.motzcod.es

Upload: james-montemagno

Post on 28-Jan-2015

111 views

Category:

Technology


2 download

DESCRIPTION

Blog Post: http://motzcod.es/post/60427389481/effective-navigation-in-xamarin-android-part-1 Learn how to use the Navigation Drawer and Up Navigation in Android to create beautiful apps with beautiful navigation

TRANSCRIPT

Page 1: Effective Navigation in Xamarin.Android

Effective Navigation in Xamarin.Android

James MontemagnoDeveloper Evangelist at Xamarin

@JamesMontemagno | www.motzcod.es

Page 2: Effective Navigation in Xamarin.Android

Who am I?

That’s me!

Page 3: Effective Navigation in Xamarin.Android

Who am I?I Live Here:

That’s me!

Page 4: Effective Navigation in Xamarin.Android

Who am I?

That’s me!

I Live Here:

Page 5: Effective Navigation in Xamarin.Android

Who am I?

That’s me!

I Live Here:

I Ride:

Page 6: Effective Navigation in Xamarin.Android

Who am I?

I Made These:That’s me!

I Live Here:

I Ride:

Page 8: Effective Navigation in Xamarin.Android

Creating beautiful apps in Xamarin.Android

Navigation Drawer Up & Back Navigation

What’s in this talk?

Page 9: Effective Navigation in Xamarin.Android

…..well, let me tell you!

Why talk about Navigation?

Page 10: Effective Navigation in Xamarin.Android

So many ways to navigate!

Lists

My Media Center

Page 11: Effective Navigation in Xamarin.Android

So many ways to navigate!

Dashboards

Seattle Find It, Fix It

Page 12: Effective Navigation in Xamarin.Android

So many ways to navigate!

Tabs

Instagram

Page 13: Effective Navigation in Xamarin.Android

So many ways to navigate!

Drop Downs

Vevo

Page 14: Effective Navigation in Xamarin.Android

So many ways to navigate!

Ugly Drop Downs

Square Wallet

Page 15: Effective Navigation in Xamarin.Android

So many ways to navigate!

Flyouts

Facebook

Page 16: Effective Navigation in Xamarin.Android

Way too many ways!

Page 17: Effective Navigation in Xamarin.Android

Enter Navigation Drawer!!

Page 18: Effective Navigation in Xamarin.Android

How it works:

http://developer.android.com/design/patterns/navigation-drawer.html

Page 19: Effective Navigation in Xamarin.Android

Why Navigation Drawer?

● Standard Control

● Easy to implement

● Highly Customizable

● User familiarity

TweedleGoogle Drive

Page 20: Effective Navigation in Xamarin.Android

Demo Time!

Let’s Code!

Page 21: Effective Navigation in Xamarin.Android

Tips

● Show specific menu items when drawer opens or closes

● Show your users how to navigate on first run

Page 22: Effective Navigation in Xamarin.Android

Compatibility

● ActionBarSherlock!

http://components.xamarin.com/view/XamarinActionBarSherlock/

Page 23: Effective Navigation in Xamarin.Android

But wait there’s more!

Page 25: Effective Navigation in Xamarin.Android

What’s Up Navigation?

Let me show you!

Page 26: Effective Navigation in Xamarin.Android

Activity Launched by Intent Filters

Create a new backstack!a. Add ParentActivity + Metadata to Activity then:

Page 27: Effective Navigation in Xamarin.Android

What about Back Navigation?

Page 28: Effective Navigation in Xamarin.Android

Deep Link

1. Activity was launched via external source like a notification.

2. Add ParentActivity Information to Activity3. Create a new backstack when launching Intent.

Page 29: Effective Navigation in Xamarin.Android

Fragment Navigation

1. Master & Detail Flow2. Pressing back on detail fragment should go back to

Master fragment3. Add it to the back stack in the transaction!

You can use FragmentManager or SupportFragmentManager

Page 30: Effective Navigation in Xamarin.Android

Back Navigation Situations

3. WebView Navigationa. WebView maintains it’s own backstackb. Override OnBackPressed:

Hybrid Apps with Ryan Paul: http://xamarin.com/evolve/2013#session-g1idcxy2rm

Page 31: Effective Navigation in Xamarin.Android

Creating beautiful apps in Xamarin.Android

Navigation Drawer Up & Back Navigation

Page 32: Effective Navigation in Xamarin.Android

Navigation Drawer:● Get Xamarin.Android: xamarin.com● GitHub Sample: http://bit.ly/NavigationDrawerSample● Navigation Drawer Icons : http://bit.ly/NavigationDrawerIcons● These Slides: http://bit.ly/NavigationDrawerSlides

Awesome Stuff:● MvvmCross: http://mvvmcross.wordpress.com● ViewPagerIndicator: http://bit.ly/XamarinViewPagerIndicator

Me: @JamesMontemagno | www.motzcod.es

Go Make Apps with Beautiful Navigation!