Introduction: Android Tip Calculator

Overview

This Instructable will show you how to create a basic application using Android Studio. The application I will be showing you how to make is a tip calculator. The calculator will be fairly simple to create and use. You simply type in the amount, click on the desired tip value, and the total tip for the amount will be displayed.

Difficulty

Beginner and intermediate

WARNING!

Make sure to download only the approved and certified Android Studio software from Google. Any other source can contain viruses and malware that could potentially harm your computer.

Materials Needed

  • A computer that can support Android Studio
  • Android Studio
  • Android Phone (optional)
  • Micro-USB cable (optional)

Step 1: Creating the Project

Start a new Android Studio Project. Use the pictures and notes as reference to guide you. Make sure to follow same naming procedure to avoid confusion in later steps. Once you are all finished, you should see a screen like the last image.

Step 2: Go to the XML File

Click on the activity_main.xml tab at the top of the screen.

Step 3: Familiarize Yourself With the XML

XML is the front end part of the project. It creates everything that you see on the screen, while the Java part makes the XML "do things." Android studio has created a drag and drop system that lets you add different types of things on the screen, such as spinners, images, buttons, etc. Scroll down until you find Number (Decimal).

Step 4: Delete Hello World Text

Delete the hello world text on the screen by clicking on it and then pressing delete.

Step 5: Drag and Drop Number (decimal) Text Field

Drag the Number(Decimal) widget on to the screen. Drag it somewhere near the top of the screen. This will allow the user to input decimal numbers. Refer to the picture in the intro for reference.

Step 6: Add the Other Elements to the Screen

Drag and drop the different buttons and textfields on to the screen so it looks like something in the picture. If you have any questions of which type of widget to use, look at the blue screen on the right to see the widget I used. If you double click on any of the widgets, you will be able to change the text of it. Change the text to the appropriate numbers and words.

Step 7: Customize the XML Text File

If you are familiar with XML code, you can go ahead and customize the widgets on the screen to your liking. If you are unfamiliar with XML code, start typing something like "textSize" and android studio will pull up suggestions of the properties that you would like to change. If you would like to learn more about using XML with Android, visit the Android Developer Site.

Step 8: Change IDs of Buttons

In the top right corner, you should see a properties section. In the properties section, the first field is title ID. For each of the buttons, name the ID so that it corresponds with the number. For example, change the ID of the 10% button to tenPercent. Make sure not to use numerals for the names. When naming variables, it is common practice to use camel case. Visit WikiSchool to learn more about camel case.

Step 9: Initialize the Buttons and Connect Java With XML

Go ahead and click back on the MainActivity.java tab. Follow the code in the image. What we are doing here is creating variables, or objects, in Java and connecting them with XML so we can control what each XML element does.
The code below initializes each button as a field in Java. It then connects the Java field with the XML elements.

Button tenPercent;
Button fifteenPercent;
Button twentyPercent;    
Button twentyFivePercent;
EditText editText;
TextView textView;
Double money;
tenPercent = (Button) findViewById(R.id.tenPercent);
fifteenPercent = (Button) findViewById(R.id.fifteenPercent);
twentyPercent = (Button) findViewById(R.id.twentyPercent);
twentyFivePercent = (Button) findViewById(R.id.twentyFivePercent);
editText = (EditText) findViewById(R.id.editText2);
textView = (TextView) findViewById(R.id.textView3);

Step 10: Add Two Fields to Keep Track of Your Money and Tip Value

Create two fields to keep track of the input by the user and the final amount to display on the screen.

Code Below:

Double money;
Double finalAmount; 
finalAmount = 1.00;

Step 11: Implement OnClickListnener Interface

Implement the OnClickListener Interface at the top of the screen. This listener will allow us to give the buttons functionality. When you implement the listener, an error will appear because you have not implemented the method associated with the interface. To resolve this error, press alt + enter on PC or option + enter on Mac . It will ask you to implement the onClick method so just press enter. You should see the method added at the bottom of the screen, shown in the second image.

Code below:

implements OnClickListener

Step 12: Implement OnClick Method

The OnClick Method determines which button was clicked and takes the appropriate action. The following steps will help you implement the OnClick method.

1. First, get the monetary value that the user puts into the phone with the following code:

money =Double.parseDouble(editText.getText().toString());

2. Create an if-structure for each of the 4 buttons to determine which one was clicked.

3. Then, within each if-structure, set finalAmount equal to money times the percentage of the button clicked.

4. Round the finalAmount to two decimals and set the following value as the text to display.

The code below should help you if you need some help implementing the method:

if (view.getId() == tenPercent.getId()){
    finalAmount = money * .10;
    finalAmount = Math.round(finalAmount *100.0) / 100.0;
    textView.setText("$" + finalAmount.toString());
}

if (view.getId() ==fifteenPercent.getId()){    
    finalAmount = money * .15;
    finalAmount = Math.round(finalAmount *100.0) / 100.0;
    textView.setText("$" +finalAmount.toString());
}

if (view.getId() == twentyPercent.getId()){
    finalAmount = money * .2; 
    finalAmount = Math.round(finalAmount *100.0) / 100.0;
    textView.setText("$" + finalAmount.toString());
}

if (view.getId() == twentyFivePercent.getId()){    
    finalAmount = money * .25;
    finalAmount = Math.round(finalAmount *100.0) / 100.0;
    textView.setText("$" + finalAmount.toString());
}

Step 13: Make the Buttons Clickable

To make the buttons actually "do things", we have to set their onClickListener method. Since we implemented the interface for OnClickListener in the class, we can pass the argument "this". Add the following code in the onCreate method:

tenPercent.setOnClickListener(this);
fifteenPercent.setOnClickListener(this);
twentyPercent.setOnClickListener(this);
twentyFivePercent.setOnClickListener(this);

Step 14: Run the Application

We're all done! Now we just have to run the app. If you have an Android device, you can plug it into your computer. To run the app, click the green play button at the top of the screen. Here you can see all your available devices, emulators or android devices. Once you have the app started up, feel free to plug in numbers and test out each of the buttons.

Step 15: Conclusion

Now that you have created your first application, feel free to customize and add your own features to the application.