Creating A VideoView Control In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (Ex. Windows phone, Android, iOS). In Xamarin, the Code-Sharing concept is used. The Xamarin Studio is available in Visual Studio also.

The VideoView Control is used to play the video files, like MP4 videos in your Android app.

Prerequisites

Visual Studio 2015 update 3

The following steps need to be followed in order to create a VideoView Control in Android app, using Visual Studio 2015.

Step 1

Go to File --> New--> Project, or click (Ctrl+Shift+N). This will open the list if all types, of which, a project can be created.

Step 2

Select Installed --> Templates --> Visual C# --> Android --> choose Blank App (Android).

Next, give your Android app a name (Ex:sample) and give path to it. Now, click OK.

Project

Step 3

Next go to the Solution Explorer and select Resource --> Layout --> double click to open Main.axml page.

Step 4

Now, you have to design your app. You can select either Code view or Designer view, as per your expertise, for designing the main page of your application.

Delete the Linear Layout and default "hello world" button by going to the source panel and removing the code.

Now, delete the C# button action code. For this, go to the MainActivity.cs page and delete the button code.

Step 5

Next, go to the toolbox window and scroll down until you see all tools and controls. Now, drag and drop the VideoView Control in your page design.

Project

Step 6

Next, go to the properties window and edit the VideoView properties like id value (Ex - android:id="@+id/SampleVideoView" ).

Project

Step 7

Go to the Main.axml page Source panel and note the id value for future reference.

Project

Main.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px">
<VideoView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/SampleVideoView" />
</LinearLayout>

Step 8

Next, go to the MainActivity.cs page and write the following code.

MainActivity.cs

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
var videoView = FindViewById < VideoView > (Resource.Id.SampleVideoView);
var uri = Android.Net.Uri.Parse("http://ia600507.us.archive.org/25/items/Cartoontheater1930sAnd1950s1/PigsInAPolka1943.mp4");
videoView.SetVideoURI(uri);
videoView.Visibility = ViewStates.Visible;
videoView.Start();
}

// This Uri is sample video
Uri var uri = Android.Net.Uri.Parse("http://ia600507.us.archive.org/25/items/Cartoontheater1930sAnd1950s1/PigsInAPolka1943.mp4");

Step 9

If you have Android Virtual device, run the app on it. Otherwise, connect your Android phone and run the app in that.

Simply, connect your phone and go to Visual Studio.

The connected phone will show up in the Run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.

Project

Output

Project

After a few seconds, the app will start running on your phone. You will see the Video in your app.

Project

If you have any Internet connection issue or URI issue., it will show this type of error message.

Summary

So, this was the process of creating a VideoView Control in Xamarin Android app, using Visual Studio 2015 update 3.