Create A Frame Layout In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

• Absolute Layout
• Table Layout
• Relative Layout

Prerequisites

• Visual Studio 2015 Update 3.

The steps, given below, are required to be followed in order to create Frame Layout in the Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> New--> Project. The project needs to be clicked after opening all the types of projects in Visual Studio, or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app a name (Ex- sample) and give the path of your project. Afterwards, click OK.



Step 3

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



Step 4

This will open the main page designer. Here, you can select Source mode to write the xaml code or Designer mode to design the app using drag and drop method.



Next, delete the default Linear Layout.

Step 5

In this step, go to Main.axml page source and write the following Frame Layout code.

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlnsandroid="http//schemas.android.com/apk/res/android" androidorientation="vertical" androidlayout_width="match_parent" androidlayout_height="match_parent"> </FrameLayout>

Step 6

Now, go to the toolbox window and scroll down. You will see all the tools and controls. You need to drag and drop the ImageView.



Step 7

Now, drag and drop the TextView.



Step 8

In this step, add the Image from your local system.

Go to Solution Explorer-->Resource-->Drawable-->Right click-->Add-->Existing Item (Shift+Alt+A).



Step 9

Now, you can choose the required image. Click Add and edit imageView src property, you can choose added image.



Step 10

Now, go to the properties window. You need to edit the TextView properties values.



Step 11

In this step, go to the Main.axml page Source Panel. Check the following code.

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlnsandroid="http//schemas.android.com/apk/res/android" androidorientation="vertical" androidlayout_width="match_parent" androidlayout_height="match_parent">
    <ImageView androidsrc="@drawable/monkey" androidlayout_width="match_parent" androidlayout_height="match_parent" androidid="@+id/imageView1" androidscaleType="centerCrop" />
    <TextView androidtext="Absolute Layout" androidlayout_width="fill_parent" androidlayout_height="wrap_content" androidlayout_gravity="bottom" androidgravity="center" androidpadding="16dp" androidbackground="#f8852e02" androidid="@+id/textView1" /> </FrameLayout>

Step 12

In this step, go to MainActivity.cs page. Write the code, mentioned below,  between OnCreate() Method.

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
    base.OnCreate(bundle);
    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);
}

Step 13

If you have Android Virtual device, run the app on it. Else, 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 (ExLENOVO A6020a40(Android 5.1-API 22)). Click the Run option.



Output

After a few seconds, the app will start running on your phone.

You will see the Frame Layout  working successfully.



Summary

So, this was the process of creating a Frame Layout in Xamarin Android app, using Visual Studio 2015.