Customizing browser appearance in Xamarin Forms

It’s too friendly when we see an Application with the perfect combination regarding Look & Feel. Some of these Apps needs to access to an external page, which forces us to use browsers that do not help us keep the color scheme used in our application.☹

But…What if I tell you that now you can change the appearance of your browser which help you to maintain the best possible harmony with the graphic interface of your App??

In this post we will be learning how to do it, in the following topics:

? Simple way to open your browser

? Customizing your system preferred browser

Xamarin Essential Nuget package brings this great feature!

First of all… What do I need?

Add from NuGet Package the plugin: Xamarin.Essentials

You can read more information about Xamarin Essential here.

Let’s start!!!

Simple way to open your browser

Let’s start with the simple way to open a Browser in your App.

With the Browser class using the OpenAsync method we can open a browser in our App.

Receives the following parameters:

▪ Uri: This is the URL that will be opened.

▪ BrowserLaunchMode: Indicates the way that the browser will opened. Receives the following options:

External: With this option the user can modify the URL and get access to other.

SystemPreferred: With this option the user can’t modify the URL.

Customizing your System preferred browser

Xamarin Essential gives us, the BrowserLaunchOptions class to customize our browsers, allowing us to modify some browser components depending on the desired platform. In the following image we can see what are them:

This class is used inside the OpenAsync method. With this in mind, lets see the BrowserLaunchOptions class structure:

This class receives the following parameters:

▪ LaunchMode: Indicates the browser in which will be opened. Receives the BrowserLaunchMode enum as parameter which offers us the SystemPrefered and the External options.

▪ TitleMode: Indicates the mode the the browser title will be displayed. Receives the BrowserTitleMode enum as parameter which offers us the Default, Hide and Show options.

▪ PreferredToolbarColor: Indicates the browser toolbar color.

▪ PreferredControlColor: Indicates the browser controls color.