Journey with Kotlin 001 — Hello World

An introduction to Android Studio

This article assumed that you have successfully installed Android Studio and is ready to create your very first app, the classic Hello World.

Without any ado, let’s get started.

Creating a Project

Opening Android Studio

When you first open Android Studio, you will be prompted to select what you want to do :

Here, we will just select Start a new Android Studio project.

Selecting Template

Next, it will ask you what kind of project are you working on.

Android Studio provides you with 5 categories of projects to choose from :

• Phone & Tablet
• Wear OS : Watches
• TV
• Android Auto : Automobile
• Android Things : IOT

Among them, there are various templates to choose from. Here we are starting with Empty Activity in Phone & Tablet.

Configuring the Project

Next step is to configure your project :

Here, you will be asked to fill in your:

• project name : The default display name
• package name : Usually we give it a domain name in a reversed format. For example: www.google.com → com.google.www
• save location : The location your project is saved.
• Language : It can be either Kotlin or Java
• Minimum API level : API level is determined by the version of the Android you are coding in. Since Android has backward compatibility, with a lower API level, your app will cover more devices. Vice versa, with a higher API level, your device coverage will decrease. The device coverage is stated right under this selection.
• Instant apps : If you decided to create an app that user can access your data without the installation of your app, then this is the right choice for you.

Run the Default App

Now that you are done, you should see this :

Next, let’s run the app that is prepared by Android Studio by simply pressing ^R (control + R).

Nothing happened … odd

Well, good thing that Android Studio left you a clue :

So if we look at the bar on top, you get a list of icons :

In the order from left to right, they are :

• Make project (⌘F9) : Used to compile only the files whose source code has been changed.
• Run/Debug Configuration : You can configure your app, including defining before-launch operations, create a test template, and others.
• Available Devices
• Run app
• Apply Changes and Restart Activity and Apply Code Changes: Android Studio builds a new APK and determines whether the changes can be applied
• Debug mode : Use this if you wish to debug your app
• Run app with Coverage : This is only when running a unit-test.
• Project Structure
• Run Anything : You can run command, configuration, debug and others. I haven’t get my hands on it yet.
• Sync Project with Gradle files
• AVD manager : Android Virtual Device Manager
• SDK manager: Software Development Kit Manager
• Search
• Login with Google Account

Since we need a device to run the app, AVD manager is the one we need.

AVD Manager — Creating a Virtual Device

Let’s click on the AVD Manager icon :

This is what you get :

Click on “+ Create Virtual Device …” :

You will be prompted with a list of virtual devices available, each has its own size and density (dpi).

Let’s just pick the Phone selected for us and click Next:

You will be asked to select the system in the virtual device you’ve just picked.

Here, I have already installed Nougat, the name of Android 7.0 system. On the left, it tells you what is its API level. I would start with the one with API level lower if not the same as your target.

Click “Download” to install the system image in your computer, it would take about an hour to finish.

When ready, click Next :

Here, you can change the name of your device and decide whether the startup should be portrait or landscape. You can also show the Advanced Settings to change details on camera, network, performance, memory, device frame and keyboard.

However, for now, let’s just click “Finish”.

Finally, you have an AVD. Now close the window and you can see at the top :

It is showing that if you run your app right now, your app will be running on the AVD you just created.

Run the App

Now that you have an AVD ready, we can simply run the device :

Build output

Synchronization

Final output

So that’s all you need to do to run a Hello World in Android Studio XD.

Challenge : Change “Hello World” to other text

In order to take on this challenge, we need to know where is UI defined.

In side the app folder, you get these folders including :

• Manifests : In it, you will find a xml file called AndroidManifest.xml.

Every app project must have an AndroidManifest.xml file (with precisely that name) at the root of the project source set. The manifest file describes essential information about your app to the Android build tools, the Android operating system, and Google Play.

Inside AndroidManifest.xml, you will see the following :

AndroidManifest.xml

Here, you can change the icon, app display name, which activity should be launch when first launched and many more.

• java : contains the code for MainActivity, unit test and instrumented test.
• java (generated) : contains a generated code based on your build configuration.
• res : this is the Resource folder, it contains some subfolders in it :

— drawable :

drawable is a general concept for a graphic that can be drawn to the screen and which you can retrieve with APIs such as getDrawable(int) or apply to another XML resource with attributes such as android:drawable and android:icon.

if you wish to hold bitmap in it, drawable prefer png format, but can accept jpg and discourage using gif.

Inside drawable, you will find two xml files. These two files are used to generate the icon for the app.

— layout :

layout defines the architecture for the UI in an Activity or a component of a UI.

Inside, you will find :

activity_main.xml, is the xml that describes the layout of MainActivity :

If you wish to read as the XML file, simply click on the Text tap below :

— mipmap : a folder that is similar to drawable, but uses mipmap technique to generate images for various density. This is where you would put your app’s icon.

mipmap came from the Latin word multum in parvo, meaning much in a little. Mipmaps or MIP map or pyramid are pre-calculated, optimized sequences of images, each of which is a progressively lower resolution representation of the same image.

If your image is placed in mipmap, then Android would ignore the density and try to generate a larger image. The system will then scale the image to fit using mipmap technique, this will optimize the image and memory usage.

— values : here are the XML files that contain simple values, such as strings, integers, and colors.

In colors.xml you can see :

colors.xml

Similarly, with strings.xml and styles.xml :

strings.xml

styles.xml

• res(generated) : I believe this is just a res folder generated by Android Studio itself.

Change “Hello World” to “Hell O World”

Now that everything is a bit more clear, let’s go to the activity_main.xml :

Here, you can see that the xml is composed of different layer of structure.

• this is telling the compiler what version of xml and what encoding it is using. Typically, we just leave this alone.

• a ConstraintLayout is is a android.view.ViewGroup which allows you to position and size widgets in a flexible way.
• a ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. Some of the most common layouts are RelativeLayout, ConstraintLayout and LinearLayout.

Inside the arrow brackets, it stated the rules of this xml:

• xmlns : the namespace in XML. A namespace is nothing but an identifier. Here the identifier is for the URI “http://schemas.android.com/ apk/res/android". If you want, you can even change the name space to whatever you wish, just like this :

• android : this is the namespace used for all the default platform attributes.
• app : this is for the attributes declared in libraries, the attributes from support library are for backwards compatibility.
• tools : this is used for attributes that are visible in Design preview only.

tools enable design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources). When you build your app, the build tools remove these attributes so there is no effect on your APK size or runtime behavior.

• customization : you can even create your own namespace to direct to your library/framework

http://myhexaville.com/2017/07/26/android-xml-namespaces/

Now that you have some idea what the XML is showing, time to make the change :

All we need to do is to change the “Hello World” to “Hell O World”, and you should be able to see the preview :

Now that is done, you can simply run the app and this should show up as it is now.

Try out tool

However, before we are done, let’s test out what tool does by typing in tools:text = "Happy Halloween" :

Now you will see that the preview has changed from “Hell O World” to “Happy Halloween” :

If you run the app, you should still be able to see “Hell O World” instead :

Now we are done!!!!

Summary

Building an Android App requires us to understand the language (Kotlin) as well as how XML is involved in the customization of the UI and values.

In this article, I have omitted Gradle and how it plays a role in all of this. Hopefully, I will get a chance to talk about it in the future.

For people who enjoy my article and wish to follow along, please follow me and give me a clap ^^. Thx

If you have any comments or questions, please do leave me a message.