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

In this blog, you will learn how to create an Analog Clock Control in Xamarin Android app, using Visual Studio 2015.

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. 




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.



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.



Summary 

This was the process of creating an Analog Clock control in Xamarin Android app, using Visual Studio 2015 Update 3.