1. App Creation With Android Studio

This worksheet introduces you to the basic workflow for app development in Android Studio. It focuses on how you use Android Studio to design the layout of a simple app, rather than its functionality; for the latter, you will need a lot more experience with Kotlin - which you will get from later worksheets.

A thorough introduction to this topic is provided in Google’s Build your first app developer guide, so this worksheet simply directs you to the appropriate sections of that material.

Note

You should do this worksheet as preparation for Coursework 1.

Although we assume the use of Android Studio, it should also be possible to do this using IntelliJ IDEA, with the Android plugin enabled.

1.1. Running Android Studio

You can download Android Studio and use it on your own PC. Note that you will need a machine with a decent specification for this: a minimum of 8 GB RAM and at least 10 GB of free disk space (for the IDE, Android SDK, virtual devices and projects).

Studio is available already on SoC Linux PCs. To access it, open a terminal window and enter 

module add android-studio/3.1.3

You can then run Studio with the command android-studio.

1.2. Creating a “Hello World” App

  1. Run Studio, then open the Create an Android project section of the ‘Build your first app’ guide in a new browser tab. This will take you through the steps of creating a simple Android app project using the IDE.

    Note

    On the first page of the project creation wizard, make sure that you select the option to Include Kotlin Support.

    Also, be prepared for a significant delay after clicking Finish. The IDE does a lot of work to create, configure and do an initial build of the project.

  2. When the IDE has built the project and finished indexing its contents, move on to the Run your app section of the guide.

    Ignore the ‘Run on a real device’ subsection for now (unless you have your own Android device and wish to experiment with it). We will be providing you with Android devices for use in the group project later in the module, but you should focus initially on using the emulator.

  3. Examine the Kotlin code for this app’s single activity. You’ll find this in a file named MainActivity.kt. The contents should look like this (ignoring the package declaration at the start of the file): 

    import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
  }
}

    Notice that the activity takes the form of a class, inheriting from a specific superclass in the Android API. The class overrides a particular method, onCreate, to specify what happens when the activity is launched.

    Note also the invocation of setContentView to define the content of the screen that this activity class controls. The argument to this method call, R.layout.activity_main is a reference to a resource file, activity_main.xml, located in the res/layout folder of the project.

  4. Open activity_main.xml. Click on the Text tab at the foot of the editor pane to view the contents as raw XML. It should look something like this: 

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

    This represents an incredibly simple UI, consisting of a static piece of text within a constraint-based layout that centres the text on the screen. Notice that the UI is defined declaratively. We don’t have to do this. It is possible to define this UI entirely in Kotlin by writing code in the onCreate method of the MainActivity class. But the declarative approach is more flexible and better supports a visual ‘drag-and-drop’ approach to designing the UI.

1.3. Visual Design of an Android UI

For this exercise, work through the Build a simple interface section of the ‘Build your first app’ guide. This will show you the basic principles of using the Layout Editor to create the UI for an activity.

1.4. Linking Activities Together

For this exercise, work through the Start another activity section of the ‘Build your first app’ guide. This will show you how one activity can be made to trigger, and pass data to, another.

Use the Kotlin code provided by the guide, rather than the Java code. This code won’t make a lot of sense right now, but you will gain a full understanding of what it means in due course…