Learn Android Programming #1: My First App
written by: Prasidya Pramadresana Saftari
Objective:
- Learn basic Android XML design
- Learn basic Android activity with Kotlin Language
Hello guys, this is my first post. And here, we will learn about a simple Android app. Very simple app, a simple calculator. We will create our very first Android app with Android Studio IDE. For preparation, you can download the Android Studio from here and Java SE JDK from here.
If your Android Studio and Java SE JDK are set to go, let’s begin! Open your Android Studio and follow these instructions below!
Codelab Simple Calculator App
1. Open your Android Studio, then select “Start new Android Studio project”
2. Select the “Empty Activity”, then hit NEXT button
3. Fill the form like this, then hit the FINISH button
App Name: Simple Calculator
Package Name: com.example.simplecalculator
Minimum SDK: API 24 - Android 7.0 (Nougat)
Language: Kotlin
Use legacy android.support libraries: False
4. Familiarize yourself
After successfully created a new project, your Android Studio window will be like this. For more detail of this introduction, visit the Android Studio intro here.
Too many panels and stuff hm? Don’t worry, you don’t have to use all of them, you don’t even have to remember them. First, on the left (red) is your PROJECT tab, there you’ll see all of your project resources and Java/Kotlin classes used to create your app.
On the center, it’s your WORKSPACE, an XML file, you can choose between Splitview, Design, and Code. But for the Java/Kotlin files, you cannot change the workspace view
On the upper right, there are some build options you can use to compile the program. Look at the screenshot below.
Okay, now let’s start! First of all, let’s design the UI. There are so many layouts in Android XML that we can customize, to learn all of them you can visit this link. But for now, let’s stick to the RelativeLayout first. So, open your activity_main.xml, switch to split view workspace, then type the codes like below
Now go to your PROJECT tab, go to res > values > strings.xml, add these codes below
Great, the layout is now set! Now back to activity_main.xml, switch to Design workspace, it should be like this. You can run this app now on your USB connected device or your Android Studio Device Emulator by clicking the green triangle button on the upper right options.
6. Code the logic
We’ve created our own UI. Now to make the calculator really works, we have to create the program logic. Let’s begin by opening your PROJECT tab, go to java > com.example.simplecalculator (your package name) > MainActivity.kt or simply switch using CTRL+E. Your MainActivity.kt should be like this in default.
Let’s complete the codes! First, we need to understand the logic of our app. So the logic is simple! For example, we have 2 and 3 for the inputs, then we pressed the add (+) button. So the program will execute 2 + 3 operation then show the result on the RESULT section.
First of all, implement the setOnClickListener function for each button. This function used to execute the operation when the button mentioned is clicked.
Now let’s process the input 1 and input 2, by tell the program to convert the EditText to String data type using toString() function like below. If you don’t understand what is data type, visit this link.
Now, we should check whether input 1 or input 2 is empty or not, if not then the operation can be executed every time we click a button. To do that, we need conditional if with TextUtils.isEmpty() function for every input we want to check. The program should be like this.
Nice! Now your app is done! You can try it now on your USB connected smartphone or Android Studio Device Emulator by clicking the green triangle (RUN) button on the upper right options like before. But, this app only for portrait orientation.
We should add a little more code to make it rotatable and switch rotation to the landscape position without destroying any instance data (for more details, visit this link) like below
Done! Perfect! Now try to run the app on your device again from Android Studio. Try to rotate the device into landscape orientation, see how it does! It should be like this…
Congratulations, you’ve created your first Android app, this is the basics of Android programming. Stay tuned for the next Android programming tutorial. Thank you
