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.

droiddeaw for android

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.

background property in droiddraw

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.

drag widgets in droiddraw

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

set property in droiddraw

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.

generate script in droiddraw

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

copy script in droiddraw

Steps to create Calculator in Mono for Android

  1. Create a new Mono for Android application named "Calculator".

    mono for android application
     
  2. Go to main.xml file inside Resources/Layout and overwrite all existing code by pasting the DroidDraw copied code.

    main.axml page in android application
    pest the scrit in main.axml page
     
  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.

    avtivity1 class in android application

    oncreate methode of android application

     
  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.

    output of calculator in android

Now enter the both values

         input values for android calculator

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

        addition in android application

Now select Subtraction and result will change to subtracted result

        subtraction in android application

Now select Multiplication the multiplication of both values will shows
       
        multiplication in android application

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

        division in android application

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

Thank You,

Up Next
    Ebook Download
    View all
    Learn
    View all