Simple Calculator Using Mono for Android

Here in this article you will learn how to create a simple calculator application using Mono for Android The calculator will have the following functionality:

• Addition
• Subtraction
• Division
• Multiplication

If you want to see how the XML is going to be built step by step you need to use DroidDraw it is a great tool for rapid prototyping of Google Android user interfaces, learn more and download DroidDraw from here (http://www.c-sharpcorner.com/Blogs/6006/droiddraw-for-android-applications.aspx).

Steps to create UI for Calculator

Step 1: Run the DroidDraw.



Step 2: By default it have AbsoluteLayout and we also using AbsoluteLayout here because AbsoluteLayout is using when we want to place each object in an absolute position on the screen. As per your requirement, if you want change the background color as I do here.



Step 3: Drag the TextView, EditView and Button Widget from the right panel and drop it in the left panel. We repeat this as many times as we need.



Step 4: Go to properties button and set the all required properties.



Step 5: Now generate the XML code of this UI by just pressing the "Generate" button in the "Output" panel. At this point the XML code will be shown.



Step 6: Now copy this code and use it in our project.

Steps to create Calculator in Mono for Android

1. Create a new Mono for Android application named "Calculator".
   
   
   
2. Go to main.xml file inside Resources/Layout and overwrite all existing code by pasting the DroidDraw copied code.
   
   
   
   
3. Here is the complete code of main.xml file.
   
   <?xml version="1.0" encoding="utf-8"?>
   <AbsoluteLayout
   android:id="@+id/widget0"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#808080ff"
   xmlns:android="http://schemas.android.com/apk/res/android"
   >
   <TextView
   android:id="@+id/Rlable"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textColor="#ffffffff"
   android:text="Result"
   android:layout_x="11px"
   android:layout_y="37px"
   />
   <EditText
   android:id="@+id/Redittbox"
   android:layout_width="240px"
   android:layout_height="wrap_content"
   android:textSize="18sp"
   android:layout_x="70px"
   android:layout_y="28px"
   />
   <TextView
   android:id="@+id/Fvalue"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Enter First Value"
   android:layout_x="11px"
   android:layout_y="107px"
   />
   <TextView
   android:id="@+id/Svalue"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Enter Second Value"
   android:layout_x="12px"
   android:layout_y="155px"
   />
   <EditText
   android:id="@+id/FVeditbox"
   android:layout_width="67px"
   android:layout_height="wrap_content"
   android:textSize="18sp"
   android:layout_x="180px"
   android:layout_y="99px"
   />
   <EditText
   android:id="@+id/SVeditbox"
   android:layout_width="67px"
   android:layout_height="wrap_content"
   android:textSize="18sp"
   android:layout_x="179px"
   android:layout_y="146px"
   />
   <TextView
   android:id="@+id/OPlable"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Select the Operation"
   android:textSize="16sp"
   android:layout_x="77px"
   android:layout_y="216px"
   />
   <Button
   android:id="@+id/addition"
   android:layout_width="46px"
   android:layout_height="wrap_content"
   android:text="+"
   android:textSize="20sp"
   android:layout_x="18px"
   android:layout_y="266px"
   />
   <Button
   android:id="@+id/subtraction"
   android:layout_width="46px"
   android:layout_height="wrap_content"
   android:text="-"
   android:textSize="20sp"
   android:layout_x="91px"
   android:layout_y="266px"
   />
   <Button
   android:id="@+id/multiplication"
   android:layout_width="46px"
   android:layout_height="wrap_content"
   android:text="*"
   android:textSize="20sp"
   android:layout_x="167px"
   android:layout_y="266px"
   />
   <Button
   android:id="@+id/division"
   android:layout_width="46px"
   android:layout_height="wrap_content"
   android:text="/"
   android:textSize="20sp"
   android:layout_x="241px"
   android:layout_y="266px"
   />
   <TextView
   android:id="@+id/error"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   />
   </AbsoluteLayout>
   
   
4. Now go to Activity1.cs file and inside the OnCreate() method we will creating and initialize all variables and create function for all theclick's.
   
   
   
   
   
   
5. First associate with all widget which we create in the XML code.
   
   Button btnadd = FindViewById<Button>(Resource.Id.addition);
   Button btnsub = FindViewById<Button>(Resource.Id.subtraction);
   Button btnmult = FindViewById<Button>(Resource.Id.multiplication);
   Button btndiv = FindViewById<Button>(Resource.Id.division);
   
   EditText firstvalue = FindViewById<EditText>(Resource.Id.FVeditbox);
   EditText secondvalue = FindViewById<EditText>(Resource.Id.SVeditbox);
   EditText result = FindViewById<EditText>(Resource.Id.Redittbox);
   
   TextView errormsg = FindViewById<TextView>(Resource.Id.error);
   
   Here we create variable for all the widget's and associate this variable to the widget by using FindViewById<widget_type>(Resource.Id.widget_name).
   
6. Now we create three variable for the operation's and create click event for all the buttons. Like the example below:
   
   double a, b, c;
   
   Button_name.Click += delegate
   {
   try
   {
   // To Do....
   }
   catch (Exception ex)
   {
   // To Do....
   }
   };
   
7. Here is the complete code of Activity1.cs file.
   
   using System;
   using Android.App;
   using Android.Content;
   using Android.Runtime;
   using Android.Views;
   using Android.Widget;
   using Android.OS;
   namespace Calculator
   {
   [Activity(Label ="Calculator", MainLauncher =true, Icon = "@drawable/icon")]
   
   public classActivity1 : Activity
   {
   protected override void OnCreate(Bundle bundle)
   {
   base.OnCreate(bundle);
   
   SetContentView(Resource.Layout.Main);
   
   Button btnadd = FindViewById<Button>(Resource.Id.addition);
   Button btnsub = FindViewById<Button>(Resource.Id.subtraction);
   Button btnmult = FindViewById<Button>(Resource.Id.multiplication);
   Button btndiv = FindViewById<Button>(Resource.Id.division);
   
   EditText firstvalue = FindViewById<EditText>(Resource.Id.FVeditbox);
   EditText secondvalue = FindViewById<EditText>(Resource.Id.SVeditbox);
   EditText result = FindViewById<EditText>(Resource.Id.Redittbox);
   
   TextView errormsg = FindViewById<TextView>(Resource.Id.error);
   
   double a, b, c;
   
   btnadd.Click += delegate
   {
   try
   {
   a = double.Parse(firstvalue.Text);
   b = double.Parse(secondvalue.Text);
   c = a + b;
   result.Text = c.ToString();
   }
   catch (Exception ex)
   {
   errormsg.Text = ex.Message;
   }
   };
   
   btnsub.Click += delegate
   {
   try
   {
   a = double.Parse(firstvalue.Text);
   b = double.Parse(secondvalue.Text);
   c = a - b;
   result.Text = c.ToString();
   }
   catch (Exception ex)
   {
   errormsg.Text = ex.Message;
   }
   };
   
   btnmult.Click += delegate
   {
   try
   {
   a = double.Parse(firstvalue.Text);
   b = double.Parse(secondvalue.Text);
   c = a * b;
   result.Text = c.ToString();
   }
   catch (Exception ex)
   {
   errormsg.Text = ex.Message;
   }
   };
   
   btndiv.Click += delegate
   {
   try
   {
   a = double.Parse(firstvalue.Text);
   b = double.Parse(secondvalue.Text);
   c = a / b;
   result.Text = c.ToString();
   }
   catch (Exception ex)
   {
   errormsg.Text = ex.Message;
   }
   };
   
   }
   }
   }
   
8. Now Build and compile the application, the output looks like the below picture.
   
   
   

Now enter the both values



Now select operation which you want to perform, like I select Addition first and the result will come out in the Result EditBox

Now select Subtraction and result will change to subtracted result

Now select Multiplication the multiplication of both values will shows

Now click on Division sign the output will comes in result box



Hope you like this article. Post your inspirational comments and feedback so that I can improve myself.

Thank You,