Button Adapter Web Browser In Android Using Xamarin.Forms

Introduction

 

This article demonstrates how to use a button adapter web browser in Android using Xamarin.Forms. Xamarin is a platform that allows us to create a multi-platform mobile application for platforms, like Android, Windows, and iOS through a single integrated development environment (IDE). And with Xamarin.Forms, the interface design for all three platforms can be accomplished within its XAML-based framework. Xamarin apps are built with standard, native user-interface controls.

 

 

 

Let's start!

 

Step 1

 

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform. Select Cross-Platform app, then give your project a name and location and click "OK" button.

 

 

 

Step 2

 

Next, go to project name > right click > Manage NuGet package for the solution. Select "Manage NuGet package". Just update the following NuGet packages to your project.

 

 

 

Now, select the following NuGet package and select your project to install on it.

• Xamarin.Forms

 

 

 

Step 3 

 

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> Drawable >> Add >> Existing Item. When I click an existing item button, now it opens a dialog box.

 

 

 

Next, a dialog box will appear. Choose image location and add images. 

 

 

 

The Images are added successfully. Then, move the cursor to that image and just verify the image.

 

 

Step 4 

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double click for opening the design view of this page.

 

 

The code is given below.

 

 

 

XAML Code 

 

We created four buttons inside the stackLayout and BackgroundImage for adding the Contentpage. The button names are "C# Corner", "Android", "Windows", "IOS". Code copy is given here.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Browser"
             x:Class="Browser.MainPage"
             BackgroundImage="Code.png">
    <StackLayout>
        <Button Text="C# Corner"
                Clicked="Button_Clicked"
                FontAttributes="Bold"/>
        <Button Text="Android"
                Clicked="Button_Clicked_1"
                FontAttributes="Bold"/>
        <Button Text="Windows"
                Clicked="Button_Clicked_2"
                FontAttributes="Bold"/>
        <Button Text="Ios"
                Clicked="Button_Clicked_3"
                FontAttributes="Bold"/>
    </StackLayout>

Step 5

 

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs. Double click for opening the design view of this page.

 

 

The code is given below.

 

 

 

C# Code 

 

 This is the code for the button. Click the button and give the URL that you want to choose the link for.

 

 

Code copy is here. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Browser
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var url = "https://www.c-sharpcorner.com/";
            Device.OpenUri(new Uri(url));
        }

        private void Button_Clicked_1(object sender, EventArgs e)
        {
            var url = "https://en.wikipedia.org/wiki/Android";
            Device.OpenUri(new Uri(url));
        }

        private void Button_Clicked_2(object sender, EventArgs e)
        {
            var url = "https://en.wikipedia.org/wiki/Microsoft_Windows";
            Device.OpenUri(new Uri(url));
        }

        private void Button_Clicked_3(object sender, EventArgs e)
        {
            var url = "https://en.wikipedia.org/wiki/IOS";
            Device.OpenUri(new Uri(url));
        }
    }
}

Step 6 

 

Next, select the Built & Deploy option, followed by selecting from the list of Android Emulator or Simulator. You can choose any API (Application Program Interfaces) Level Emulator or simulator to run it.

 

Output 

 

After a few seconds, you will see your app working.

 

Click the "C# Corner" button or any four buttons will open the "Open With" option. Choose browser then the given URL is displayed.

 

 

 

Finally, we have successfully created Xamarin.Forms.

 

Conclusion 

 

I hope you have learned how to create a Button Adapter Web Browser in Android Using Xamarin.Forms with Visual Studio and C#.