How to Create a Calculator Application Using Android Studio

by KojoB1 in Circuits > Software

5148 Views, 17 Favorites, 0 Comments

How to Create a Calculator Application Using Android Studio

56f360994fbade5c1300094d.jpeg
56f3613d50e1b6f7a6000995.jpeg

Most people today own smart devices which are capable of processing thousands of applications. Unfortunately, only a fraction of application users know how these applications are created and operate. A popular platform in which most of these applications are designed and implemented is in android and this instructable will show you how to create a simple calculator application using Android Studio. The calculator will perform the basic operations:

  • Add
  • Subtract
  • Multiply
  • Divide
  • Clear(C)

STEP 1: Set Up Environment for Android Studio

56f362cf45bcebca36000975.jpeg
56f3636d15be4dc2740008d5.jpeg
  1. Visit the web page http://developer.android.com/sdk/index.html.
  2. Click on the DOWNLOAD ANDROID STUDIO FOR WINDOWS link and follow the prompts to download Android Studio.
  3. Install the software and once installation is complete. Run the program and from the menu bar, choose File > Settings > Appearance > System Settings > Updates.
  4. In the new window that pops up, similar to figure 4, click the Automatically check updates for Android SDK check box.

Step 3 and 4 ensure that the SDK( A set of development tools that helps Android Studio to work) is installed and updated regularly.

STEP 2: Create a New Project

56f3698045bceb0eef000403.jpeg
  1. In Android Studio, from the menu bar choose File > New > New Project.
  2. A window will be opened with four fields. It will be easier to follow this instructable by using the value shown below: # Application Name – The app name that appear to the user. For this project, use “Simple_Calculator.” # Company domain – provides a qualifier that will be appended to the package name; Android Studio will remember this qualifier for each new project you create. # Package name – is the fully qualified name for the project. Your package name must be unique across all packages installed on the Android system. # Project location – The directory on your system that holds the project files. Click Next.

  3. On the new page check the box for Phone and Tablet. For Minimum SDK, select API 8: Android 2.2 (Froyo)
    Selecting a lower API guarantees that your application will run support more devices.

  4. Select Blank Activity on the new page and click next.

  5. The new page shown afterwards allows you to customize your activity. Use the following values for the various fields of this application’s activities:
    # Activity Name – MainActivity # Layout Name – activity_main # Title – MyActivity

  6. Click Finish and your new project should appear within a few seconds.

If all the steps above are followed, the new project should be similar to figure 5.

STEP 3: Build the User Interface

56f36aed4fbade5c13000967.jpeg
  1. In Android Studio, on the right of the window in Tool Buttons, select Project > app > resources/res > layout > activity_main.xml. You should notice that this is the same as the name you entered for Layout Name when you were creating the project.

  2. The xml file page has two tabs beneath it.Choose the Design tab which should open up a page similar to the figure shown above.

  3. Under the palette tab,there are numerous elements to design the user interface. For this project we will only use Plain Text and Button.Click on Plain Text and then on the phone screen on the right click on top of the screen to place the text view.On the bottom right of the screen, Under the properties tab, make the following changes: ·

  4. On the bottom right of the screen, Under the properties tab, make the following changes

    o Layout:width – match_parent

    o Text – “ ”

    o Gravity – right Note – These changes ensure that the Text View fills the the top of the screen and the output of the calculator is always on the right.

  5. Click on Button and then click on the phone screen show on the right side of the palette to place a button. Under properties tab, change the text option to “1”. Repeat this step till you have the same number of buttons shown in figure 6 and each time instead of changing the text option to “1”, change it to the operation or number the button represents.

STEP 4: Build the Activity

56f36d7a937ddb7b6c000974.jpeg
56f36e5615be4d286a0003d9.jpeg
  1. From Project choose app > java > “Your input for company domain when creating the project” > MainActivity.

  2. The new page shown, which a java page, contains the code which enables your app to run.

  3. Underneath “public class MainActivity …” create global variables for the text view, operations to be performed, and numbers for operations. The lines of code from line 13 to 15 make this possible.

  4. The next thing to do is to link the elements created in the xml file to the code. Here you will connect the text field created in the xml file to the global variable “scr” created in step 3. You will also create an array called numberList to store all the buttons. Once the array is created you will loop through and create a listener for each button to perform an action once the button is clicked. The lines of code from line 22 to line 30 in figure 7 implement this functionality.

  5. The next step is to create a class to implement the operations of the calculator which are addition, multiplication, subtraction and division. Basically the class you create will implement onClickListener and based using a switch statement, based on the operation, the class will perform a specific operation. The class ButtonClickListener on line 88 of figure 8 implements this.

  6. You will create 3 functions which will actually perform the operations and output the result to the text field the functions are described below
    # mMath(String str) – This function will takes an operation as a parameter. Once the operation is clicked, it clears the textfield and stores the number that preceded the operation. #updateScreen(String str) – This function appends the value of button clicked to the textfield. # mResult() – This function creates a variable to store the value of a button clicked after a operation button has been clicked. Based on the operation the function adds, subtracts, divides or multiplies. The lines of code from line 57 to line 54 implement this functionality of figures 7 and 8.

STEP 5: Run the Application

avd_manager.PNG
config.PNG
edit.PNG
emulator.PNG

After all the above step have been followed, click on the play button in the toolbar to run the application. Assuming there are no error in both the xml file and the java file, a new page should pop up requesting you to choose a running device. If you have a running Android, here is how to install and run your app.

Run On a Real Device

1. Plug in your device to your development machine with a USB cable.

Note – You might need to install the appropriate USB driver for your device.

2. Enable USB debugging on your device.

3. On Android Studio, click the play button on top of the screen from the toolbar.

4. A new window will pop up requesting you to choose a running device. Select the device you just plugged in from the list and click OK.

5. Android Studio will install the app on your connected device and the app should work.

If you don’t have a running device available, Android Studio provides the option to run the application on an emulator. The following steps describe how to run the application on an emulator.

1. Click AVD Manager in the toolbar.

2. In the AVD Manager window, click Create Virtual Device.

3. Select a device configuration such as Nexus 5 and click Next.

4. Select any of the configuration settings and click Next.

5. On the Virtual Device Configuration window, you can modify the features of the virtual device and afterwards, click finish.

6. Close out of the AVD Manager.

7. Repeat Steps 3 of running on a real device and in the Choose Device window, select the emulator you just created and click OK.

8. Android Studio will install the calculator app on your emulator and the app should work.

You now know how to make a basic calculator using android studio and based on the same technique you can make any kin of app you wand using android studio.