Ứng dụng Android đầu tiên
1. Tạo Project mới
- Mở Android Studio
- Click New Project
- Chọn Empty Activity (với Compose)
- 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- 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.kts3. 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
@Composablelà 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
- Chọn emulator từ dropdown
- Click ▶️ Run
- Đợi app build và cài đặt
Trên thiết bị thật
- Bật Developer Options trên điện thoại
- Bật USB Debugging
- Kết nối USB
- Chọn thiết bị trong dropdown
- 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.sp7. Hot Reload với Live Edit
- Bật Live Edit trong Settings
- Thay đổi code trong @Preview
- 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
@Composablefunctions định nghĩa UIsetContentđặt UI vào Activity- Run trên Emulator hoặc thiết bị thật
- Logcat để debug
Last updated on