Ứng dụng Android đầu tiên

1. Tạo Project mới

1. Mở Android Studio
2. Click New Project
3. Chọn Empty Activity (với Compose)
4. Cấu hình project:

Name: HelloWorld
Package name: com.example.helloworld
Save location: [Thư mục của bạn]
Language: Kotlin
Minimum SDK: API 24 (Android 7.0)
Build configuration: Kotlin DSL

5. Click Finish

2. Cấu trúc Project

HelloWorld/
├── app/
│   ├── src/main/
│   │   ├── java/com/example/helloworld/
│   │   │   └── MainActivity.kt
│   │   ├── res/
│   │   │   ├── drawable/
│   │   │   ├── values/
│   │   │   └── ...
│   │   └── AndroidManifest.xml
│   └── build.gradle.kts
├── gradle/
└── build.gradle.kts

3. MainActivity.kt

package com.example.helloworld

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Android")
}

4. Giải thích code

ComponentActivity

class MainActivity : ComponentActivity()

• Activity chính của ứng dụng
• Kế thừa từ ComponentActivity (support Compose)

onCreate

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent { ... }
}

• Được gọi khi Activity được tạo
• setContent đặt UI bằng Compose

@Composable

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

• Function đánh dấu @Composable là UI component
• Có thể nhận parameters và render UI

@Preview

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Android")
}

• Preview trong Android Studio
• Không chạy trên device thật

5. Chạy ứng dụng

Trên Emulator

1. Chọn emulator từ dropdown
2. Click ▶️ Run
3. Đợi app build và cài đặt

Trên thiết bị thật

1. Bật Developer Options trên điện thoại
2. Bật USB Debugging
3. Kết nối USB
4. Chọn thiết bị trong dropdown
5. Click ▶️ Run

6. Thay đổi UI

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Hello $name!",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
        Text(
            text = "Chào mừng đến với Android",
            fontSize = 16.sp,
            color = Color.Gray
        )
    }
}

Cần import thêm:

import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

7. Hot Reload với Live Edit

1. Bật Live Edit trong Settings
2. Thay đổi code trong @Preview
3. UI tự động cập nhật

8. Debug

import android.util.Log

Log.d("MainActivity", "Debug message")
Log.i("MainActivity", "Info message")
Log.e("MainActivity", "Error message")

Xem logs trong Logcat panel.

---

📝 Tóm tắt

• Tạo project với Empty Activity (Compose)
• MainActivity là điểm bắt đầu của app
• @Composable functions định nghĩa UI
• setContent đặt UI vào Activity
• Run trên Emulator hoặc thiết bị thật
• Logcat để debug