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.

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).

Visual Studio

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.

Visual Studio

Step 3

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

Visual Studio

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.

Visual Studio

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

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

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.

Visual Studio

Step 7

Now, drag and drop the TextView.

Visual Studio

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).

Visual Studio

Step 9

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

Visual Studio

Step 10

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

Visual Studio

Step 11

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

Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlnsandroid="http//schemas.android.com/apk/res/android" androidorientation="vertical" androidlayout_width="match_parent" androidlayout_height="match_parent">  
  3.     <ImageView androidsrc="@drawable/monkey" androidlayout_width="match_parent" androidlayout_height="match_parent" androidid="@+id/imageView1" androidscaleType="centerCrop" />  
  4.     <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>  
Visual Studio

Step 12

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

MainActivity.cs

  1. protected override void OnCreate(Bundle bundle) {  
  2.     base.OnCreate(bundle);  
  3.     // Set our view from the "main" layout resource  
  4.     SetContentView(Resource.Layout.Main);  
  5. }  
Visual Studio

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.

Visual Studio

Output

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

You will see the Frame Layout  working successfully.

Visual Studio

Summary

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

 


Similar Articles