🟢 Getting Started · Lesson 03
First Android App (Hello World)
Step 1: New project
- 1File → New → New Project…
- 2Phone and Tablet → Empty Views Activity → Next
- 3Name: HelloApp · Package: com.example.helloapp
- 4Language: Kotlin · Minimum SDK: API 26 · Build configuration language: Kotlin DSL
- 5Finish and wait for "Gradle sync finished"
Step 2: The two important files
MainActivity.kt (logic)
- app/src/main/java/…/MainActivity.kt
- Kotlin code
- What happens on click, load data
activity_main.xml (design)
- app/src/main/res/layout/activity_main.xml
- XML tags = views
- What the screen looks like
Kotlin – MainActivity.kt (generated)
package com.example.helloapp
import android.os.Bundle
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) // show res/layout/activity_main.xml
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
}
}
}Step 3: Run the app
Select your emulator or phone in the toolbar and press the green ▶ Run button (Shift+F10). The first build takes a minute; later runs are quick.
Step 4: Design the screen
Open activity_main.xml, switch to Code view (top right) and replace it with:
XML – res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="24dp">
<TextView
android:id="@+id/tvMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp"
android:textStyle="bold" />
<Button
android:id="@+id/btnHello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Say Namaste" />
</LinearLayout>Step 5: Make the button work
Kotlin – MainActivity.kt
import android.widget.Button
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private var count = 0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)
// ... insets listener from the template ...
val tvMessage = findViewById<TextView>(R.id.tvMessage)
val btnHello = findViewById<Button>(R.id.btnHello)
btnHello.setOnClickListener {
count++
tvMessage.text = "Namaste! 🙏 You clicked $count times"
}
}
}findViewById finds a view by its android:id. In the View Binding lesson you will replace it with a safer, shorter method.
What happens when the app starts
Common mistakes
- Choosing "Empty Activity" → you get Compose code with no XML layout.
findViewByIdbeforesetContentView→ returns null and the app crashes.- Typo in the id (
R.id.btnhello) → "Unresolved reference" error. - Hard-coded text like "Hello World!" → fine for practice; real apps use
@string/(next lessons).
Summary
- New Project → Empty Views Activity → Kotlin.
- XML layout = design, Activity = logic; connected by
setContentView. setOnClickListener { }runs code on a tap.
✅ Practice
Add a second "Reset" button that sets the count back to 0, and change the text colour to green with android:textColor="#16A34A".
Frequently Asked Questions
Which template should I choose: Empty Activity or Empty Views Activity?
For this course choose Empty Views Activity — it uses XML layouts. "Empty Activity" creates a Jetpack Compose project.
What is R.layout.activity_main?
R is a class Android generates from your res folder. R.layout.activity_main is the ID of res/layout/activity_main.xml, so setContentView knows which screen to show.
What does enableEdgeToEdge() do?
It lets your app draw behind the status and navigation bars. The insets listener in the template adds padding so your content does not hide under them.
