Xamarin.Android - FrameLayout View Using Visual Studio 2017

What are Xamarin and Xamarin Forms?

  • Xamarin is a cross-platform to develop multi-platform Applications.
  • Xamarin is a shared code (C#), but separately design UI's Android (Java), Windows (C#), iOS (Objective C & Xcode).
  • Xamarin forms UIs & shared code (C#) remains same with all the projects. 

Prerequisites

  • Visual Studio 2017 Enterprise

The steps given below are required to be followed in order to design FrameLayout View in Xamarin Android, using Microsoft Visual Studio 2017.

Step 1

  • Go to Visual Studio 2017.
  • Click File -> New -> Project.

    Xamarin

Step 2

  • In this step, click C# -> Android -> Blank App (Android).
  • Enter the Application Name, followed by clicking Blank App = A project to create a Xamarin.Android Application.

  • Xamarin

Step 3

  • In this step, add one image to drawable folder.
  • Open Solution Explorer Window.
  • Click Resources folder, followed by right clicking drawable folder. Click Add, select Existing item and add anyone image.

    Xamarin

Step 4

Afterwards, open Solution Explorer Window. Click Resources folder, followed by clicking Layout folder and opening axml.


  • Xamarin

Step 4

In this step, click Main.axml page, insert the code given below in Main.axml and save it.

Xamarin 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">  
  5.     <ImageView  
  6.         android:src="@drawable/microsoft"  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="fill_parent"  
  9.         android:id="@+id/imageView1"  
  10.         android:scaleType="centerCrop" />  
  11.     <TextView  
  12.         android:text="Microsoft  of click at Me"  
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="wrap_content"  
  15.         android:id="@+id/textView1"  
  16.         android:textSize="50dp"  
  17.         android:textColor="#000" />  
  18.     <TextView  
  19.         android:gravity="right"  
  20.         android:text="My Name is Logesh"  
  21.         android:layout_width="fill_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:id="@+id/textView2"  
  24.         android:textSize="50dp"  
  25.         android:textStyle="bold"  
  26.         android:layout_gravity="bottom"  
  27.         android:textColor="#fff" />  
  28. </FrameLayout>   

Click Main.axml Page Designer View, wait for few minutes and Designer View is visible.

Xamarin

The Designer View TableLayout is given below.

Xamarin

Step 5

In this step, click MainActivity.cs page, insert the code given below in MainActivity.cs and save it.

Xamarin 

  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4.   
  5. namespace TableLayout  
  6. {  
  7.     [Activity(Label = "TableLayout", MainLauncher = true, Icon = "@drawable/icon")]  
  8.     public class MainActivity : Activity  
  9.     {  
  10.         protected override void OnCreate(Bundle bundle)  
  11.         {  
  12.             base.OnCreate(bundle);  
  13.   
  14.             // Set our view from the "main" layout resource  
  15.              SetContentView (Resource.Layout.Main);  
  16.         }  
  17.     }  
  18. }   

Step 6

  • Click Build menu, followed by selecting Configuration Manager.
  • Configure your Android Application to deploy & build Setting. Click Close.

    Xamarin

Step 7

In this step, select Build & Depoly option, followed by clicking to start your Application.

Go to Run option, choose Debug, select any one simulator and run it.

Xamarin

Step 8

Output

  • After a few seconds, the app will start running on your Android Simulator. You will see your app working, which is created successfully.

    Xamarin

  • Your FrameLayout Android Application is created succesfully.

Conclusion

Thus, we learned how to create FrameLayout Android Appliacation, using Visual Studio 2017.