In this lab, you will learn how to use Android Studio to create simple Android applications. You will also learn:

1. The basics of Kotlin for Android
2. XML layouts
3. Event-driven programming with buttons and inputs.

By the end of the lab, you should be able to create interactive apps with user input and button interactions.

Prerequisites

• Android Studio installed on your machine.
• Basic understanding of programming (variables, functions) (Lab 1).

An android app, at it's core, is a project with a set of screens. Each screen has a

• Design (Layout)
• Functionality for the elements on the screen.

Each screen is called an Activity

The layout of each Activity is defined in either Java / Kotlin files, whereas the layouts are defined in XML files

Create a project

Let's create a project for this lab:

1. Open Android Studio and select "New project"

2. Create a project with an Empty Views Activity

3. Name this lab "Lab 2". you can leave the rest of the options as their defaults

Android studio is broken up into a number of sections.

The left is the file explorer pane. This is where you can navigate the files in the project.

The detail pane to the right is where you edit the code.

The android manifest

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 such as Activities, Services, Receivers etc.

You can think of this as a registry of all of the components of the app. If an Activity, Service, or Receiver isn't listed here, it will not be launched by the OS

Functionality Files

Each activity has a file to represent its functionality. This is usually a class that subclasses the Activity class and provides the functionality of that class. e.g.

• What to do when that activity is created.
• What file to use as its screen layout
• What to do when a button is pressed
• etc.

Layout Files

The layout files (usually written in XML) represent how an activity is laid out visually

Some popular layouts in android include.

Linear Layout

As its name suggests, this layout allows you to arrange children in a linear fashion (horizontally or vertically)

RelativeLayout

A Layout where the positions of the children can be described in relation to each other or to the parent.

Constraint Layout

ConstraintLayout lets you create large, complex layouts with a flat view hierarchy—no nested view groups. It's similar to RelativeLayout

Some popular UI elements are

• Buttons
• Image Views
• Text Views
• Edit Text
• Switch

Normally, you'd be accustomed to programming from a procedural standpoint. i.e. Your program launches, it runs a defined function, and it ends.

Android programming is more event-driven. i.e. it responds to events and can vary its functionality depending on parameters.

e.g. When sharing a TikTok video from your FYP to whatsapp, it opens up a specific activity compared to when launching whatsapp itself

e.g. When clicking an email address from another app, it will open your email app with a draft email, with the sender preset to the email you clicked

• The user interface is made up of Views
• Whenever you need to modify a view, give it an id

Exercise 1

Create an android app that has a text at the middle of the screen that says "Hello World, This is my first Android App"

Exercise 2

Add a button to the screen, under the text view that says "Press me"

Exercise 3

Add the functionality to change the text of the text view to "The button was pressed" when the button is pressed

The objective of this activity is to create a simple calculator app. Upon pressing a button with the text ``, the edit text displays the result of the calculation in a Calculatethe result of the calculation should beTextView`

The calculator app will have two EditText that can only accept numbers.

Hints:

1. The first editText should have an ID (e.g etNum1)
2. The second editText should have an ID (e.g etNum2)
3. The edit text should only accept numbers (Google)
4. A function calculate should be defined that fetches the numbers in the two Edit Texts, perform the calculations and show the result in a textView

__________________________________
|        My First Calculator     |
|                                |
|     ______           ______    |
|                                |
|                                |
|                                |
|            (Calculate)         |
|                                |
|                                |
|       Result = ?               |
__________________________________

MainActivity.kt

package com.example.livelab2

import android.os.Bundle
import android.view.View
import android.widget.EditText
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }

    fun calculate(view: View) {
        val et1: EditText = findViewById(R.id.etNum1)
        val et2: EditText = findViewById(R.id.etNum2)

        val value1 = et1.text.toString().toInt()
        val value2 = et2.text.toString().toInt()

        val result = value1*value2
        val tv: TextView = findViewById(R.id.textView3)
        tv.text = "Result = $result"

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My First Calculator"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etNum1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/etNum2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/etNum2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="97dp"
        android:layout_height="32dp"
        android:text="Calculate"
        android:onClick="calculate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etNum1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>