Keep Users from Leaving Your App with Chrome Custom Tabs

Chrome Custom Tabs were one of the exciting announcements made at Google I/O 2015 that you can try now in your Xamarin apps.

If your app is like many others today, you may provide your own in-app web browser experience when displaying linked web content to your users. This provides a seamless and branded user experience, but misses out on things like saved passwords and form data.

With Chrome Custom Tabs, you get the best of both worlds. You can still deliver a branded experience that feels like it’s right inside your app, while your users get all of the power and familiarity of Chrome.

Loading a URL

Loading your URL in a Chrome Custom Tab couldn’t be any easier, as it only requires a couple of lines of code:

var hostedManager = new HostedActivityManager (this);

var uiBuilder = new HostedUIBuilder();
// Add any optional customizations here...

hostedManager.LoadUrl ("http://xamarin.com", uiBuilder);

Customization

It’s easy to specify your own colors for branding the toolbar and start and exit animations for activity. This will ensure your users feel like they’ve never left your app.

// Set the Toolbar Color
uiBuilder.SetToolbarColor (Color.Red);

// Customize animations
uiBuilder.SetStartAnimations (this, Resource.Animation.slide_in_right, Resource.Animation.slide_out_left);
uiBuilder.SetExitAnimations (this, Resource.Animation.slide_in_left, Resource.Animation.slide_out_right);

It’s also possible to add your own Toolbar items and menu items to the overflow menu.

Getting Started

While Chrome Custom Tabs currently only works with Chrome Dev (44 and higher), it will gracefully fall back to opening URL’s in your default browser if Custom Tabs aren’t available.

Check out our Chrome Custom Tabs Component, which includes a sample app to help you get started today!