Page Navigation 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 navigate one page to another page in Xamarin Android app, using Visual Studio 2015.

Step 1

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

UWPCoginitiveEmotion

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

Now, go to Solution Explorer. In Solution Explorer, get all the files and source in your project.

Now, select Resource-->Layout-->double click to open main.axml page. To write XAML code, you need to select the source.

Choose the Designer Window, if you want design and you can design your app.

Step 4

After opening main.axml, file will open the main page designer. You can design this page, as per your desire.

Now, delete the Default hello world button, go to the source panel and you can see the button coding. You need to delete it.

After deleting XAML code, now delete C# button action code.

Go to MainActivity.cs page. You need to delete the button code.

Step 5

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls.

You need to go to the toolbox Window and scroll down. You will see all the tools and controls.

You need to drag and drop the button.

designer

Step 6

Now, go to the properties Window. You need to edit the Button's Id value and Text Value (EX: android:id="@+id/second" android:text="Second Page").

Step 7

In this step, go to the Main.axml page Source Panel. Note, the Button's Id value.

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">
<Button android:text="Second Page" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/second" /> </LinearLayout>

Step 8

In this step, add one layout, whose name is called Second.axml. Go to Solution Explorer-->Resource-->Layout-->Right click-->Add-->New Item (Ctrl+Shift+A).

designer

Step 9

Now, select Android Layout and give the name (Second.axml).

designer

Step 10

In this step, go to the Second.axml page source panel. Write the code, mentioned below.and note, the Button's Id value.

Second.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
<Button android:text="First Page" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/First" /> </LinearLayout>

Step 11

In this step, create one Activity and it's name is called second.cs.

Go to Solution Explorer-->Your app-->Right click-->Add-->New Item (Ctrl+Shift+A).

designer

Step 12

Now, select the Activity and give the name second.cs. Click add.

designer

Step 13

In this step, go to the MainActivity.cs page and 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);
Button button = FindViewById < Button > (Resource.Id.second);
button.Click += delegate {
StartActivity(typeof(second));
};
}

Step 14

In this step, go to the second.cs page and write the code, mentioned below between OnCreate() Method.

second.cs

protected override void OnCreate(Bundle savedInstanceState) {
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.Second);
Button button = FindViewById < Button > (Resource.Id.First);
button.Click += delegate {
StartActivity(typeof(MainActivity));
};
// Create your application here
}

Step 15

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

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 Run option.

designer

Output

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

You will click the Second Page button.

designer

Now, you will see the Second Page successfully. You will click the Fist Page button. You will see the Fist Page.

designer

Summary

This was the process of how to navigate one page to another page in Xamarin Android app, using Visual Studio 2015.

4 Comments

Join the conversation! Your thoughts help the community grow.

Ahmed Shoman6y ago
Thanks, it is very helpful,but How do I access the text property of an Entry in MainPage.xaml to MainActivity.cs in Xamarin forms?
Антон Бернадский7y ago
Thank you, I started learnning Xamarin and c# 3 days ago, and this article helped me great!
- Delpin Susai Raj7y ago
  Thank you :)
Gabriel Xavier8y ago
Awesome dude, really its very need full, Thank you so much.