Make a CALCULATOR App with Xamarin Android

Let learn how to make a simple android calculator app with Xamarin . More precisely, in this part we will be dealing with the UI – writing XML, using LinearLayout, GridLayout, support libraries, custom styles .

Main.axml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <TextView
            android:id="@+id/calculator_text_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:padding="10dp"
            android:textSize="50sp"
            android:text="123" />
    </HorizontalScrollView>
    <android.support.v7.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
        app:orientation="horizontal"
        app:rowCount="5"
        app:columnCount="4">
        <Button
            style="@style/button_calculator"
            app:layout_columnSpan="4"
            android:text="DEL" />
        <Button
            style="@style/button_calculator"
            android:text="7" />
        <Button
            style="@style/button_calculator"
            android:text="8" />
        <Button
            style="@style/button_calculator"
            android:text="9" />
        <Button
            style="@style/button_calculator"
            android:text="÷" />
        <Button
            style="@style/button_calculator"
            android:text="4" />
        <Button
            style="@style/button_calculator"
            android:text="5" />
        <Button
            style="@style/button_calculator"
            android:text="6" />
        <Button
            style="@style/button_calculator"
            android:text="×" />
        <Button
            style="@style/button_calculator"
            android:text="1" />
        <Button
            style="@style/button_calculator"
            android:text="2" />
        <Button
            style="@style/button_calculator"
            android:text="3" />
        <Button
            style="@style/button_calculator"
            android:text="-" />
        <Button
            style="@style/button_calculator"
            android:text="." />
        <Button
            style="@style/button_calculator"
            android:text="0" />
        <Button
            style="@style/button_calculator"
            android:text="=" />
        <Button
            style="@style/button_calculator"
            android:text="+" />
    </android.support.v7.widget.GridLayout>
</LinearLayout>

Style.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="button_calculator">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">0dp</item>
    <item name="layout_rowWeight">1</item>
    <item name="layout_columnWeight">1</item>
    <item name="android:textSize">25dp</item>
    <item name="android:onClick">ButtonClick</item>
  </style>
</resources>

                     Let learn how to code the logic of this simple calculator in C#.

MainActivity.cs

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Views;
using System;

namespace CalculatorAndroidTut
{
    [Activity(Label = "CalculatorAndroidTut", MainLauncher = true)]
    public class MainActivity : Activity
    {
        private TextView calculatorText;

        private string[] numbers = new string[2];
        private string @operator;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            calculatorText = FindViewById<TextView>(Resource.Id.calculator_text_view);
        }

        [Java.Interop.Export("ButtonClick")]
        public void ButtonClick (View v)
        {
            Button button = (Button)v;
            if ("0123456789.".Contains(button.Text))
                AddDigitOrDecimalPoint(button.Text);
            else if ("÷×+-".Contains(button.Text))
                AddOperator(button.Text);
            else if ("=" == button.Text)
                Calculate();
            else
                Erase();
        }

        private void AddDigitOrDecimalPoint(string value)
        {
            int index = @operator == null ? 0 : 1;

            if (value == "." && numbers[index].Contains("."))
                return;

            numbers[index] += value;

            UpdateCalculatorText();
        }

        private void AddOperator(string value)
        {
            if (numbers[1] != null)
            {
                Calculate(value);
                return;
            }

            @operator = value;

            UpdateCalculatorText();
        }

        private void Calculate(string newOperator = null)
        {
            double? result = null;
            double? first = numbers[0] == null ? null : (double?)double.Parse(numbers[0]);
            double? second = numbers[1] == null ? null : (double?)double.Parse(numbers[1]);

            switch (@operator)
            {
                case "÷":
                    result = first / second;
                    break;
                case "×":
                    result = first * second;
                    break;
                case "+":
                    result = first + second;
                    break;
                case "-":
                    result = first - second;
                    break;
            }

            if (result != null)
            {
                numbers[0] = result.ToString();
                @operator = newOperator;
                numbers[1] = null;
                UpdateCalculatorText();
            }
        }

        private void Erase()
        {
            numbers[0] = numbers[1] = null;
            @operator = null;
            UpdateCalculatorText();
        }

        private void UpdateCalculatorText() => calculatorText.Text = $"{numbers[0]} {@operator} {numbers[1]}";
    }
} 

Output