How to make an Android app - Love Calculator

Love calculator is an excellent example of how to make an Android app. And today we will make a great app together, but first, let’s talk a little bit about basics. Making an app is described in 5 essential steps, and you need to know a bit more about every step, thus we explain that below. To be clear, we are making a native app here, written in Java, no shortcuts, a fun app, to learn how to program.

 

How to make an Android app in 5 steps:

• Download and install Android Studio
• Create a new Android Studio project
• Create your layout
• Write code to control events and show results
• Run the project (on emulator or device)
• Have fun (this step is for free)

However, here is a story why we wrote this Love Calculator example in the first place.

 

Love calculator - the story

I wanted to implement the Love Calculator for a long time. For example, I remember how much fun we had in school writing down names and calculating the percentage of love for each other. It was pure fun. We learnt a little bit less in school for a few hours, but at least we were programming :D Well I know now that calculating a score on paper is an algorithm as well, but back then it was just for fun. The next step is to show you how to build an algorithm for calculating love percentage.

I have recorded a video on how to calculate love percentages on paper. In fact, take a look at the video, because I want you to try it on a piece of paper, this way, you will see how the algorithm works before your own eyes. There are not many algorithms you can use on paper at least not on a small piece of paper.

With the Love Calculator app, we explain in a fun way:

• How to make an Android app for beginners
• Make your first screen (what are layouts, constraints and components)
• How a love algorithm works
• Making functions and working with strings
• Displaying results from a love algorithm on the screen

 

Here is the love calculator algorithm explained

In order for the algorithm to work it combines two names and the word "loves". For this example we will use names "Mary" and "James" so the combined text for the calculation is "Mary Loves James" 

1. Count all the letters from left to right and write down the number
   • First one is "M" and it appears twice, so we write down 2
   • Next is "A" and it also appears twice, write down 2
   • Don’t repeat letters (on paper strike the ones you have counted) and continue to the end
   • You should get 2211111221
2. The second part is getting the shorter version of the number
   • You do this by adding the leftmost and rightmost numbers together
   • The first pair is 2 + 1 and write down the sum of the two numbers (in our case 3), next 2 + 2, 1 + 2…, continue this till you reach the middle, if there is only one number left, write it down, otherwise sum both numbers
     • Again you should strike the numbers you add together (one from the left and one from the right)
   • You should get 34322
3. Next step is repeating step 2 until you get only two numbers
   • For our example, this is two more times
   • So you should get 563 for the first iteration
   • And the result should be 86
     • The result should always have two numbers (except 100)
4. The result is 86%

Mary and James are genuinely in love if I might say :D. Furthermore, try this algorithm on paper for you and your secret lover, remember to hide the names if you don’t want others to find out :D

 

How to make an Android app work, with programming, let’s start

The algorithm is just a great example for paper, but we are here to learn how to make an Android app. We have a little work to do to make it work in Android (with Java). But we can do it. We do it step by step like we did with the paper version. Follow the steps and prepare a layout (or a screen) to get all the data (names of lovers). 

 

 

Step 1: Download and install Android Studio

First, you need to download and install Android Studio, go to Android Studio download page. The installation is a little bit different for Windows and Mac (official instructions are here), but the steps are:

• Windows
  1. Launch the .exe file you downloaded.
  2. Follow the setup wizard to install Android Studio and any necessary SDK tools.
  3. There is a video on the official page to check if you have done it correctly.
• Mac
  1. Launch the Android Studio DMG file you downloaded.
  2. Drag and drop Android Studio into the Applications folder, then launch Android Studio.
  3. Select whether you want to import the previous Android Studio settings, then click OK.
  4. The Android Studio Setup Wizard guides you through the rest of the setup, which includes downloading Android SDK components; this is a requirement for Android development.
  5. Check the official video for the installation.

 

Step 2: Create a new Android Studio project named Love Calculator

If you have Android Studio ready on your computer, you need to start your first project. In addition, we have a step by step explanation on our blog on how to Create a new Android Studio project. However, remember, name it Love Calculator. There are a few parts of the application already in the new project today we are going to use only two: 

• MainActivity.java this is a file where the code for main activity is (this is our main screen of the application)
• And the layout named activity_main.xml (this is where all the components are, like Buttons and EditTexts). A layout is a group of components that we use together, for example, all the components for the screen or a design for a single item in a list.

 

Step 3: Let’s make the first layout for Android app

Android Studio already makes the activity_main.xml layout for us. In this layout we use ConstraintLayout to position all the elements on the screen. For instance, ConstraintLayout allows you to create complex layouts. In this layout, you connect views with constraints or rules how far apart components are from the border and each other. Later, when the ConstraintLayout resizes or moves, these rules apply and reorder components on the screen according to your positioning and spacing. It works like magic, but if you want, you can read more about it here about ConstraintLayout and constraints. 

The only thing you need to do with ConstraintLayout is to be careful to make all the necessary connections between components; otherwise, they endup in the left upper corner. 

 

Making the Love Calculator layout

To make the love calculator layout open activity_main.xml and follow the steps below. Check with a picture of the final layout below to see if you have all the components on the right spot. Components (or widgets) are visual elements like Button, EditText, TextView, etc.

You can take a look at the Love calculator video (above) or read the blog post about layout editor for Android Studio to learn more about the environment and how to create layouts.

Steps to make a layout:

Add two EditText-s (in the Palete find the PlainText component and use the drag and drop)

• name (attribute id) the first component "textName1" and the second component "textName2".
• make sure that textName1 has 3 constraint connections one to the top of the screen, one to the left side of the screen and one to the right
• same goes for textName2 where the top constraint should link to textName1
• set hint to "Enter her name" for first EditText and "Enter his name" for the second EditText

 

Add one TextView

• Name it "textViewResult"
• Set text to empty text ("Press calculate")
• make sure that it has 3 constraints one to the top linked to textName2, one to the left side of the screen and one to the right
• leave enough room for us to display the calculation, at least a few lines

 

Add one Button on the lower part of the screen 

• name it "buttonCalculate" and
• change the text to "Calculate"
• the button should also have 3 constraints one to the bottom, one to the left and the last one to the right side of the screen

The final layout should look like this:

 

Step 4: How to make an Android app - writing the code

Go to MainActivity.java and prepare all variables that we linked to the components (EditTexts, TextView and Button) on our layout. You can see the code below. The code should go after the MainActivity class definition.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

Once we have variables, we can initialize values for them. We do this in the onCreate function of the MainActivity. We initialize values with the method findViewByID that finds component with given id.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

Also add an onClickListener for buttonCalculate after variables are initialized.

 

Now we add the code to the onClick method. This code gets the text from EditTexts, or in other words we read the names user enters. Moreover, we store these values into variables str1 and str2.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

We need a name (values user enters) to calculate the love percentage. Add these two lines just after OnClick (after curly brackets ({) of course). The complete code is below after functions for counting chars.

 

Functions for the love calculator

We already use some functions from Android libraries (without knowing it), but what is a function. A function is a block of code that gives us a result for given parameters. There are a lot of functions already prepared for us in Android and in Java itself. Some of them we already used like findViewById, getText, toLowerCase. This time we write custom functions and use them to calculate the love percentage.

 

The function for counting characters

We demonstrate the calculation in 3 steps. Similar to the algorithm I have shown on paper. To calculate the first step, we count characters in the names and in the word "loves". We do this in function countChars. Below is the code and the explanation of the function, step by step to show what is happening.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

Explanation:

This function takes 2 parameters (names of lovers) and adds the word "loves" in the middle. Furthermore, to get the combined string, we store it in a variable named combinedString. The function checks character by character from beginning to the end of the combinedString and counts the occurrences of that character. It does so with two "for each" loops. One for getting the character and the other one for counting. Once it counts occurrences, it stores the character and stores it out for the next iteration so that it does not repeat the count for the next appearance of the same character.

We build the algorithm step by step, so that we can test it. Now add a call for the function countChars at the end of the onClick method and try it out, to see how it works. 

Don’t forget, you have to add the second two lines: the first executes the function for counting characters and the second one shows the result on the screen.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

Now let us run the application for the first time (check step 5, running the final application). Once the application runs, enter Mary and James, and you should see the result like this:

 

The result should be the same as we calculated on paper 2211111221.

The code you have so far is the first step of our application. Now we make the shortening of the number that is the result of the love percentage.

Function to shorten the number using the love algorithm

The code that shortens the number looks like this (explanation is below):

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

Explanation:

The shortenNumber function uses recursion to calculate the result. In fact, this means that the function calls itself inside the function. Recursion is a great concept, but hard to grasp.  Besides this is your first example, for now follow it, and example by example you will learn how to do it. 

The function consists of two parts according to length (split with if statement), if we have at least two characters (chars) we add numbers on the edge together. If the number is 2 chars long we return the string or number that is left, and this number is also the result.

And if we use this function in our onClick method it should look like this. Furthermore, beware that the last line is different as it uses the shortenNumber function with parameter calculation. This is only the first shortening of the number, we calculate all of them in a separate function.

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

If you run your application now and enter Mary and James, the result should look like this:

 

Calculate function - Making Algorithm Work

We have come to the last step, and it is making the whole algorithm work. We do this using calculate function (explanation is below):

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

Explanation:

What this function does is it repeats steps we have done so far to calculate the result (a number, that is only two numbers long). We do this with the do while loop. In fact, it runs for the first time and checks if it needs to run again in the end, in our case (shortString.length() > 2) at the end of each loop. Moreover, this function appends the shortString or number for this step of the calculation to the output string. Output is a variable of a String type that shows the calculation in a nicer way, with new lines ("\n"), step by step and the final love percentage at the end.

The onClick method now looks like this (we change the last two lines to use the calculate function)

Thanks for reading!

If you like our code, you can give back by sharing this article!

Thanks, let me see the code again!

 

Step 5: Running the final application

Once you have learnt how to make Android app you know how to test it.

You can run an application:

• On an Emulator (Virtual Device)

  • An emulator is an excellent tool for development as you can see the app on your screen, make screenshots, share the screen for a presentation or for making a video of the final app.
  • For the emulator to work, you need to enable Virtualization on your computer. Sometimes this means running the BIOS, for most new computers this option is on by default, but for some, you might have to change it. Remember, this can be a hard step to do so you can try running your app on a device instead, but it is rewarding when you make it work. Sadly there is no straight solution; you have to Google your computer manufacturer and find the solution most suitable for you (how to enable this in your BIOS). You can start here: Intel Virtualization Technology (VT-x) not supported on this computer.

• On a Device

  • Most devices work straight out of the box. But for some devices, you have to find the appropriate drivers to work. For example google your device, model name and “debugging using a USB”.
  • The important thing is to enable USB Debugging on your device as well. Read more on the link below. And connect your cable.

Here you can read more about running an Android application from Android studio.

Once you have the emulator or device connected, you can run the application in two ways:

• Using the menu
  
• Using shortcut icon
  

This shows a dialog for the connected devices (including virtual devices):

Choose your device and wait for your application to run.

For our example and the final code, when the application runs, enter values for Mary and James. And you should see the result on the screen with all the steps for the calculation. The final result for our love couple is on the screen (see picture below) with a nice score of 86%. Check it out, try it with a first name, last name, combination of both or nicknames.

 

Step 6: Conclusion and having fun!

This is just one example of an application. Now you know how to make an Android app and you have your first app that is also fun to use. Share it with friends and remember we have more projects for you at CodeBrainer. If you want to build a simple project you can try our Calculator course.

Have fun, coding with CodeBrainer