Software Development: How to Build a Calculator App in Android (Part 1)

Codeflare Calculator app

Learning how to Build a calculator application in Android is one of the development projects most Android developers, and indeed developers in other programming languages, undertake in the beginning stage of their software development journey.

Building a calculator application helps you understand the concepts of the programming language better because you get perform both arithmetic and logical operations which in the long run enhances your programming skills and prowess.

In this Android development training, we are going to build the first part of the calculator application, which is the interface. The interface in some ways have to be attractive enough to lure users to want to perform some calculations on it, and while it doesn’t affect the arithmetic operations of the calculator, it does determine how users view and ultimately use the application.

So, here we will be writing codes for the xml layout. Let’s dive right in …

Create a new Android Studio project. Now in your drawable folder, create an xml file called calc_back.xml. Now add the following code to the newly created file.

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#4d5c3d"/>
            <corners android:radius="5dp"/>

        </shape>
</item>



</selector>

Moving on, let’s add a color in our color.xml file

<resources>
    <color name="colorBtn">#fff</color>
    <color name="colorFunc">#cc5500</color>
</resources>

Next, in your activity_main.xml file, add the following code …

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#4c4c4e">

    <LinearLayout
        android:id="@+id/linear_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="6dp">

        <TextView
            android:id="@+id/txt_result"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:text="0"
            android:maxLength="14"
            android:textColor="#000"
            android:textSize="28sp"
            android:padding="10dp"
            android:textAlignment="textEnd"
            android:background="@drawable/calc_back"/>

        <EditText
            android:id="@+id/txt_input"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:layout_marginTop="-10dp"
            android:textColor="#000"
            android:textSize="28sp"
            android:padding="10dp"
            android:textAlignment="textEnd"
            android:background="@drawable/calc_back"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_below="@id/linear_result">

        <Button
            android:id="@+id/btnSin"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="sin"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnCos"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="cos"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnTan"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="tan"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnDel"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="@string/delete"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="#ff0000"/>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_below="@id/linearLayout0">

        <Button
            android:id="@+id/btnOne"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="1"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnTwo"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="2"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnThree"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="3"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnPlus"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="+"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorFunc"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_below="@id/linearLayout1">

        <Button
            android:id="@+id/btnFour"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="4"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnFive"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="5"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnSix"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="6"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnMinus"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="-"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorFunc"/>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_below="@id/linearLayout2">

        <Button
            android:id="@+id/btnSeven"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="7"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnEight"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="8"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnNine"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="9"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnMul"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="x"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorFunc"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_below="@id/linearLayout3">

        <Button
            android:id="@+id/btnZero"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="0"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnDot"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="."
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#000"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorBtn"/>
        <Button
            android:id="@+id/btnDivide"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="@string/divide"
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="@color/colorFunc"/>
        <Button
            android:id="@+id/btnEquals"
            android:layout_width="85dp"
            android:layout_height="65dp"
            android:text="="
            android:textSize="22sp"
            android:padding="1.618dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:clickable="true"
            android:focusable="true"
            android:backgroundTint="#20baaa"/>

    </LinearLayout>

</RelativeLayout>

So, run the code on your emulator and you’ll have the result below

A calculator app by Codeflare

There you have it guys. That is the first part of this tutorial. Would you prefer the video tutorial? Here you go …

Get practical, one-on-one ICT and software development training in a leading ICT training company in Abuj.

Software development tutorials Codeflare
ICT AND SOFTWARE DEVELOPMENT TRAINING

Leave a Reply

Your email address will not be published. Required fields are marked *