Make a CALCULATOR App with Xamarin Android #1 (Code)

In this tutorial you will learn how to make a simple android calculator app. More precisely, in this first part we will be dealing with the UI – writing XML, using LinearLayout, GridLayout, support libraries, custom styles and more Android goodness!

This post contains all the code that’s been written in this YouTube video.

You can also check out the GitHub repository: https://github.com/ResoCoder/Simple-Calculator—Xamarin-Android

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>

styles.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>