CI/CD with GitHub Actions in Android Kotlin - UI Render Trace

Component - CI/CD with GitHub Actions

This UI component shows a simple Android app screen with a button that triggers a build and deploy process using GitHub Actions for continuous integration and continuous delivery (CI/CD).

Widget Tree

Scaffold
├─ AppBar
│  └─ Text("CI/CD Demo")
└─ Column
   ├─ Text("Welcome to CI/CD with GitHub Actions")
   └─ Button("Start Build")

The Scaffold provides the basic app structure with an AppBar at the top showing the title. Below, a Column arranges a welcome Text and a Button vertically in the center of the screen.

Render Trace - 5 Steps

Step 1: Scaffold

Step 2: AppBar

Step 3: Column

Step 4: Text

Step 5: Button

State Change - Re-render

Trigger:User taps the 'Start Build' button

Before

Button enabled, no build running

→

After

Button disabled, build status shown as 'Building...'

Re-renders:Button and status Text inside Column re-render to show build progress

UI Quiz - 3 Questions

What widget shows the app title at the top of the screen?

A AppBar

B Column

C Button

D Text

Key Insight

In mobile apps, clear layout with a Scaffold and Column helps organize content simply. Buttons trigger actions like CI/CD builds, and state changes update the UI to keep users informed about progress.

Practice

1. What is the main purpose of using GitHub Actions in an Android Kotlin project?

easy

A. To automate building and testing the app on code changes

B. To write Kotlin code faster

C. To manually deploy the app to users

D. To edit the AndroidManifest.xml file

Solution

1. Step 1: Understand GitHub Actions role

   GitHub Actions automates tasks like building and testing when code changes.

2. Step 2: Identify the main benefit

   This automation helps keep the app healthy without manual work.

3. Final Answer:

   To automate building and testing the app on code changes -> Option A

4. Quick Check:

   Automation = building and testing [OK]

Hint: GitHub Actions automates tasks on code changes [OK]

Common Mistakes:

• Thinking it writes code automatically
• Confusing manual deployment with automation
• Assuming it edits app files directly

2. Which of the following is the correct way to specify a job that runs on Ubuntu in a GitHub Actions workflow YAML file?

easy

A. runs-on: ubuntu-latest

B. runs: ubuntu-latest

C. run-on: ubuntu-latest

D. runs_on: ubuntu-latest

Solution

1. Step 1: Recall GitHub Actions syntax for runner

   The correct key is runs-on with a hyphen.

2. Step 2: Match the correct option

   runs-on: ubuntu-latest uses runs-on: ubuntu-latest, which is valid syntax.

3. Final Answer:

   runs-on: ubuntu-latest -> Option A

4. Quick Check:

   Key is runs-on with hyphen [OK]

Hint: Remember: 'runs-on' uses a hyphen, not underscore or other [OK]

Common Mistakes:

• Using underscore instead of hyphen
• Using 'runs' or 'run-on' keys incorrectly
• Confusing key names with similar words

3. Given this GitHub Actions step in a workflow:

steps:
  - name: Build Debug APK
    run: ./gradlew assembleDebug

What will this step do when the workflow runs?

medium

A. It deploys the app to the Google Play Store

B. It runs unit tests only

C. It cleans the project without building

D. It runs the Gradle command to build the debug version of the app

Solution

1. Step 1: Understand the Gradle command

   ./gradlew assembleDebug builds the debug APK of the app.

2. Step 2: Identify the step action

   The step runs this command, so it builds the debug version.

3. Final Answer:

   It runs the Gradle command to build the debug version of the app -> Option D

4. Quick Check:

   assembleDebug = build debug APK [OK]

Hint: assembleDebug builds debug APK, not tests or deploys [OK]

Common Mistakes:

• Confusing assembleDebug with deploy commands
• Thinking it runs tests only
• Assuming it cleans the project

4. You wrote this GitHub Actions workflow snippet:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Build APK
        run: gradlew assembleDebug

Why might this workflow fail during the build step?

medium

A. Because 'actions/checkout@v2' is an invalid action

B. Because the command should be './gradlew assembleDebug' with './' prefix

C. Because 'runs-on' should be 'runs_on'

D. Because the job name 'build' is not allowed

Solution

1. Step 1: Check the build command syntax

   The Gradle wrapper command needs './gradlew' to run the local script.

2. Step 2: Identify the error cause

   Missing './' causes 'gradlew' not found error, failing the build step.

3. Final Answer:

   Because the command should be './gradlew assembleDebug' with './' prefix -> Option B

4. Quick Check:

   Use './gradlew' to run Gradle wrapper [OK]

Hint: Always prefix Gradle wrapper with './' in Linux runners [OK]

Common Mistakes:

• Omitting './' before gradlew
• Thinking action version is invalid
• Misnaming 'runs-on' key
• Assuming job names are restricted

5. You want your GitHub Actions workflow to run tests only when Kotlin source files change. Which trigger configuration correctly achieves this?

hard

A. on:
schedule:
- cron: '0 0 * * *'

B. on:
push:
branches:
- main

C. on:
push:
paths:
- '**/*.kt'

D. on:
pull_request:
paths-ignore:
- '**/*.kt'

Solution

1. Step 1: Understand GitHub Actions triggers

   The paths filter runs workflow only if matching files change.

2. Step 2: Match trigger to Kotlin files

   on: push: paths: - '**/*.kt' triggers on push when any .kt file changes, which is correct.

3. Final Answer:

   on: push: paths: - '**/*.kt' -> Option C

4. Quick Check:

   Use 'paths' to trigger on specific file changes [OK]

Hint: Use 'paths' filter to run workflow on specific file changes [OK]

Common Mistakes:

• Using 'paths-ignore' instead of 'paths'
• Triggering on branch only, not file changes
• Using schedule trigger for file changes