[Android Journey Part 2] UI Programming
Welcome to the another episode of "learning Android from scratch, with me"!! Here I'll document my journey on building a whole new Android app, video game walkthrough-style (+commentary). So, i'll tell you every roadblocks that I've encountered so far and how I managed to find the solution.
Actually, this project is actually a serious research project (with a very, very tight deadline) that I decided to reject a few days ago. I'm afraid that I'll fail to deliver the project promptly because I have no experience and no sufficient proficiency in Android Development at all, that's why I'm rejecting it.
You can read the previous epsiode on this OSM diary entry. That previous episode specifically discussed about "how hard it is to install a 3rd party library, especially if the documentation is incomplete, and especially more if you're quite a newbie in Android Development." But on this episode, I decided to move and host this article on my bearblog instead, since at this episode, we're barely talking about mapping anymore.
This time, I'm changing my overall strategy. Instead of going straight to the complex subject (like, showing the whole maps), why don't we implement some basic functionality first? For example, access the GPS? Well, I tried the former and it's so hard anyway. So i'm giving up and decided to try the easier tutorial first.
A quick google search on "android gps tutorial" landed me on this freeCodeCamp video tutorial. Well, here we go.
XML Layout Definition
First, go to the app -> res -> layout -> activity_main.xml. Then copy and paste the whole sample XML code.
Oh, XML? It reminds me with HTML. Cool. Maybe it's similar web development afterall?
The gist of the sample XML code is something like this :
<androidx.constraintlayout.widget.ConstraintLayout> <TextView/> <Switch/> </androidx.constraintlayout.widget.ConstraintLayout>
I need to learn more about which XML nodes are available, what is their available properties, and maybe proceeding to tinker here and there with the live-preview feature that's available on Android Studio. But for now, let's skip it and move to the next step.
Control the UI, Programmatically
After that, go to app -> java -> your.app -> MainActivity.java.
Here we got a basic Java class file. Three important parts : package information, import statement, class definition that contains both attribute definition and method definition.
First, we import "Switch" and "TextView" class from android.widget package. We need to control the TextView and Switch that we defined before.
import android.widget.Switch; import android.widget.TextView;
Then, inside the MainActivity class, define several new variables to hold the reference to the UI element.
TextView tv_lat, tv_lon, tv_altitude, tv_accuracy, tv_speed, tv_sensor; Switch sw_locationupdates, sw_gps;
Then, inside the onCreate method implementation (inside MainActivity class), connect all those variables to the actual UI element. Something like this :
tv_sensor = findViewById(R.id.tv_sensor); sw_locationupdates = findViewById(R.id.sw_locationsupdates);
Here is the documentation of "findViewById" method :
public <T extends android.view.View> T findViewById(@IdRes int id): Finds a view that was identified by the android:id XML atribute. Defined in android.app.Activity
The tutorial suggested me to test the code at this point. So, let's test it.
I clicked the build button.
Unfortunately, a wild error notice appears! :
Dependency 'androidx.appcompat:appcompat-resources:1.6.0' requires libraries and applications that depend on it to compile against version 33 or later of the Android APIs.
The error notice is quite helpful and easy to follow. So I opened the build.gradle (module) file, change the compileSdk and targetSdk to 33.
Then, I clicked the build button one more time.
Now, let's try it right on my phone. First, unlock the "developer options", open the developer options, enable usb debugging, connect the phone to the PC by using USB cable, wait until Android Studio identified your phone (see near the "run" icon), then click the run icon.
Whoa. It succeeded too...
- Define the UI building block by using XML/HTML. Add ID info for each XML/HTML UI nodes.