Build an Android Weather App with Java
So you’ve written some text-based programs in Java and now you want to use your knowledge to build an Android app. This tutorial will help you get started, and you’ll end up with a cool app that converts from Fahrenheit to Celsius!
Note: you certainly don’t have to know Java to follow along with this tutorial and are free to copy and paste, but this tutorial will assume you are familiar with Java basics!
Getting started with Android Studio
Initially, Android app development involves figuring out how to use the special software built for developing Android apps: Android Studio.
First, download Android Studio. Start it up and select all the defaults with the setup wizard. Then wait patiently while it downloads a bunch of stuff. Depending on the security settings of your computer, you may have to go into System Preferences to allow certain downloads.
Click on “Start a New Project.”
Select “Empty Activity”:
Update September 2019: On the next screen, be sure to select “Java” as your language! In the latest version of Android Studio, the default is Kotlin. Otherwise, keep all the defaults.
Okay, now we can open up our editor! Get rid of the pesky assistant by clicking the dark grey “Assistant” box on the right.
Now we’re ready to design our app!
Designing our app
To see the user interface of your app, navigate to activity_main.xml. The file should pop up after the build, but if it doesn’t, follow the very long file path in the picture below.
Some seasoned programmers might think, “Wait. XML is a text-based markup language with syntax similar to HTML — so why am I seeing this cool user interface design instead of code?”
You can see the XML that powers our starting design if you click on the “Text” tab below the user interface picture on Android Studio. We’re going to stay out of there for now, though, and keep using the “Design” tab.
Our app already says “Hello World!” on it. The first thing we’re going to do is actually throw that away. You can just click on it and press the delete key.
We’re going to add our own components instead! Components are text boxes, buttons, and other elements that our users interact with.
Our first app will involve some input and output. Specifically, I want a text box where the user can enter the temperature in Fahrenheit, a button they can press to convert the temperature, and some text that just says the result in Celsius.
A bit of Android Studio lingo: confusingly, a text box that the user can write in is called Plain Text (and is an EditText data type). An element that displays text is called Text View (and is a TextView data type). Thankfully, a button is just called a Button (and is a Button data type).
First, I’m going to drag a Plain Text component onto my interface. I can find Plain Text from the Palette on the left, under the “Text” category.
I can change the ID of the component as well (this will be important later). In the upper right hand corner, under “Attributes,” I’m going to change the ID to “tempF” because I want the user to enter the temperature in Fahrenheit.
Scrolling down on the right, under “Text View,” I can enter “Temperature in Fahrenheit” for the text. That way, it shows up on the phone screen in the text box as instructions for the user.
Lastly, I want the user to only enter numbers. Go to “Input Type” and select “number” from the long list of checkboxes.
OK, nice job on that. Now I’m going to add a button that the user can press to convert the temperature. I’ll take it from the “Buttons” section of the Palette on the left.
The default ID of “button” seems okay, since I’ll just have one button. But under “text” in “Text View,” I’m going to make it say “Convert” since it’ll be converting Fahrenheit to Celsius.
One last component: the Text View where I’ll show the temperature in Celsius. I can find Text View under “Text” in the lefthand Palette.
Change the ID of this component to “tempC” and the text to nothing, since it won’t display a temperature when the user first opens the app.
Try to do this part without looking at pictures for guidance, but definitely scroll up to look at previous pictures if you need to!
Done? Congrats! You just built your first app interface, and soon we are going to code the app’s functionality!
Now I am going to save you a million hours
Fun fact: You can spend a million hours writing gnarly code and creating these things called constraints to make sure your Android app looks equally beautiful and well-formatted on any device (including tablets). You can center components, make one component exactly 16.5px below another component at all times, whatever you want.
Other fun fact: You don’t HAVE to do any of that!
Especially when you’re making hobby apps, you can use auto-constraints and have the computer magically compute your constraints. (That’s what computers are for!)
In the toolbar above your interface design, find the magic wand. When you hover over it, it should say “Infer Constraints.”
Click that wand!
You’ll see your computer do a little magic, and then you don’t have to worry about constraints any more.
Let’s write some code!
You’re here because you’re a Java programmer, and so far we’ve just been downloading things and operating fancy software.
Let’s write some Java!
Open up the tab that says “MainActivity.java.” If that tab isn’t already open, you can find MainActivity.java by following the ridiculous file path in the picture below.
We’re going to start off by declaring some variables before the onCreate function. Normally in Java, one declares variables with types of String and int like so:
String str;
int num;It isn’t the best practice to declare variables like that without initializing their values, but we’re going to do it (you’ll see why later).
Instead of using types like String and int, though, I’m going to use types that describe the Android components I just added to the screen.
Add these variable declarations above your onCreate function (but inside the MainActivity class):
EditText tempF;
Button button;
TextView tempC;Now we have variables to store those Android components in!
But wait — are words like “EditText” and “Button” turning red in your text editor? When you hover over the words, does it say “Cannot resolve symbol ______”?
You just need to import the capacity for Java to deal with these Android components — a component at a time, unfortunately.
Neat trick: Put your cursor inside the word that’s red. Hold down “option” and then press “return.” This list should come up:
Hit “enter” to import the class you need. Repeat for anything that turns red.
Next we’re going to use the IDs we assigned to the components to grab those very components and store them in the variables!
Inside the onCreate function (below the code that is already in the function), add these lines of code:
tempF = (EditText) findViewById(R.id.tempF);
button = (Button) findViewById(R.id.button);
tempC = (TextView) findViewById(R.id.tempC);Storing these components as variables means that now we can access the user input in tempF and print the result to tempC. Awesome!
Making an event listener
When the user clicks the “Convert” button, we want the app to read the value in tempF, convert it to Celsius, and print the result in tempC.
First, we should set up an event listener on the button so it responds to a click. Add this code inside the onCreate function, after you store the components in their variables:
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Our code here!
}
});Again, this should go INSIDE the onCreate function!
Inside the onClick function we just wrote, we need to grab the value inside the tempF text box and store it as an integer:
String input = tempF.getText().toString();
int temp = Integer.parseInt(input);Then you can convert it from Fahrenheit to Celsius:
float celsius = (temp - 32) * ((float) 5 / (float) 9);You have to cast the five and nine to floats before doing integer division (it rounds down to zero otherwise) or you can just use a decimal like 0.55.
Print the new Celsius temperature to the screen:
tempC.setText(celsius + " degrees C");Now our complete function should look like this:
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String input = tempF.getText().toString();
int temp = Integer.parseInt(input);
float celsius = (temp - 32) * ((float) 5 / (float) 9);
tempC.setText(celsius + " degrees C");
}
});And we’re ready to test our app!
Compiling and testing our app
We’re ready to compile our app. If you’ve used other IDEs for building software, the menu in Android Studio might look familiar.
You can click on the hammer to build (compile) your app.
This is usually where I find out that I’ve made some errors. If you’ve made some errors, calmly investigate them and see if it’s just a missing semi-colon or spelling error. Google any errors you can’t figure out or comment on this post with them!
If your app compiles, run it by clicking on the “play” button.
You’ll be prompted to “Create a New Virtual Device.”
Update September 2019: You may need to click on “No devices” and visit the AVD Manager to create a new virtual device.
Click through all the defaults and, in typical Android Studio fashion, you may be forced to download something. Try to exercise the virtue of patience.
Eventually your simulator will start to run! It will automatically open your app if you just wait a little. You’ll see the home screen before you actually see your app.
Once your app loads, test it out!
Does it work? If so, congrats! Bask in your victory and, if you want, head back to activity_main.xml to make your app prettier (try adjusting the colors…or just formatting that float in the Java!).
If not, go to Logcat at the bottom of the screen and see if you can find any hints about what you did wrong. Google your errors or comment with them below!
Congrats on building your first Android app!
