Creating an Analog Clock Control In Xamarin Android App Using Visual Studio 2015

Delpin Susai Raj
Oct 12, 2016
4.1k
0
1
Blog

Introduction

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

Analog Clock is used to display the time in analog format.

Prerequisites

Visual Studio 2015 Update 3

The steps, which are required to be followed in order to create a Analog Clock control in Xamarin Android app, using Visual Studio 2015 are-

Step 1

Click File--> select New--> select Project. The project is 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 name (Ex:sample) and give path of your project. Afterwards, click OK.

Step 3

Go to the 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. You want select source to write XAML code.

If you want design, choose the designer Window and you can design your app.

Step 4

Afterwards, open the main.axml file, which will open the main page designer.

Introduction - Xamarin is platform to develop the cross-platform and multi-platform apps. (Ex. Windows phone,android,ios) in the xamarin platform is code sharing concept used. in the xamarin studio is avalable in the visual studio also. Analog Clock is used to Display the Time in Analog format. Prerequisites - Visual studio 2015 update 3 The following steps need to be followed in order to create a Analog Clock control in Xamarin Android app. using visual studio 2015. Step 1 - Click file-- /> Select New--> Next select Project. the project click after open the all type of projects. in the visual studio. or click (Ctrl+Shift+N) Step 2 - After open the New Project Select Installed-->Templates-->Visual c#-->Android-->choose the Blank App (Android). Next give your android app name(Ex:sample) and give path of your project. after give all click ok. Step 3 - Next go to the solution explorer. in the solution explorer is have the all files and source in your project. Next Select Resource-->Layout-->double click to open main.axml page. you want select source to write the xaml code. you want design choose the designer window you can design your app. Step 4 - After open the main.axml file will open the main page designer. in this page which type you want you can design this page. Step 5 - Next Delete the Default hello world button go to the source panel you can see the button codeing. you will delete it. Step 6 - After delete the xaml code next delete the c# button action code. go to the MainActivity.cs page. you will delete the button code. Step 7 - After delete the hello world button code you will see your app. the button is deleted. Next go to the toolbox window in the toolbox window is have the all type of the tools and control.You will go to the toolbox window. next scrol down you will see the Analog Clock control. you will trag and trop the Analog Clock control in your main.axml page whatever. Step 8 - After trag and trop the Analog clock.you will see in your app. code Main.axml <?xml version=

Step 5

Now, delete the Default hello world button.

Go to the source panel and you can see the button coding. You need to delete it.

Step 6

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

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

Step 7

After deleting the hello world button code, you will see your app. The button needs to be deleted.

Now, go to the toolbox Window. In the toolbox Window, get all types of the tools and control.You will go to the toolbox Window. Now, scroll down and you will see the Analog Clock control.

Drag and drop the Analog Clock control in your main.axml page.

Step 8

After dragging and dropping, you will see Analog clock in your app.

Code

Main.axml << ? xml version = "1.0"
encoding = "utf-8" ? > < 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" > < AnalogClock
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: id = "@+id/analogClock1" / > < /LinearLayout>

Step 9

If you have an Android virtual device, you can run the virtual device. If you don't have, run your Android phone and
connect Android phone, via USB cable in your system or laptop. If you are connecting the Android mobile phone, it will show the message: Allow USB debugging?

Always run the app in this mobile. Check "the always allow from this computer". Subsequently, click OK button.

Now, go to Visual Studio.

If you connect your Andriod phone, it will show the run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). It shows the phone in run option.

Now, go to click the connected Android phone and it will run in your Android phone.

Main.axml << ? xml version = "1.0" encoding = "utf-8" ? /> < 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" > < AnalogClock android: layout_width = "match_parent" android: layout_height = "wrap_content" android: id = "@+id/analogClock1" / > < /LinearLayout>

Output

In this app, run takes some time because the app will be built in your phone, and install the app in your phone due to which it will take some time.

You will see the output with Analog Clock.

output