Jetpack Compose'da İlk Ekran — Adım Adım

Kısaca: Jetpack Compose'a başlamak için Gradle'da Compose'u etkinleştirin, Activity içinde setContent { … } çağrısını yapın ve UI'ı @Composable anotasyonu ile işaretlenmiş fonksiyonlarla tanımlayın. Aşağıda minimum kurulum ve projeye ekleyip çalıştırabileceğiniz TopAppBar, LazyColumn ve FloatingActionButton içeren çalışan bir ekran örneği yer almaktadır.

Proje Oluşturma ve Temel Kurulum

1. Android Studio'da bir proje oluşturun (Kotlin, Empty Activity).
2. app modülünde android { buildFeatures { compose true } } içinde Compose'u etkinleştirin ve Compose BOM kullanın. Bağımlılık örneği (Groovy):

plugins { id 'com.android.application'; id 'org.jetbrains.kotlin.android' }

android {
    compileSdk 34
    defaultConfig { minSdk 21; targetSdk 34 }
    buildFeatures { compose true }
    composeOptions { kotlinCompilerExtensionVersion = "1.5.15" }
}

dependencies {
    def composeBom = platform("androidx.compose:compose-bom:2026.01.01")
    implementation composeBom
    implementation "androidx.compose.material3:material3"
    implementation "androidx.activity:activity-compose"
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose"
}

Örnek: Tam Ekran (AppBar + Liste + FAB)

Activity içinde setContent { FirstScreen() } kullanın. Aşağıda compact bir composable ve basit bir ViewModel (StateFlow) örneği yer almaktadır.

// MainActivity.kt (onCreate içinde)
setContent { FirstScreen() }

// FirstScreen.kt
@Composable
fun FirstScreen(viewModel: MainViewModel = viewModel()) {
    val items by viewModel.items.collectAsState()

    Scaffold(
        topBar = { SmallTopAppBar(title = { Text("Benim Ekranım") }) },
        floatingActionButton = {
            FloatingActionButton(onClick = { viewModel.addItem() }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentPadding = PaddingValues(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { it ->
                Card(modifier = Modifier.fillMaxWidth().clickable { /* navigasyon */ }) {
                    Column(Modifier.padding(16.dp)) {
                        Text(it.title, style = MaterialTheme.typography.titleMedium)
                        Spacer(Modifier.height(4.dp))
                        Text(it.subtitle, style = MaterialTheme.typography.bodyMedium)
                    }
                }
            }
        }
    }
}

Basit ViewModel:

class MainViewModel : ViewModel() {
    private val _items = MutableStateFlow<List<ListItem>>(listOf(
        ListItem(1,"Öğe 1","Alt Başlık 1")
    ))
    val items = _items.asStateFlow()

    fun addItem() {
        val id = (_items.value.maxOfOrNull { it.id } ?: 0) + 1
        _items.value = _items.value + ListItem(id, "Öğe $id", "Alt Başlık $id")
    }
}

Açıklama: Durumu ViewModel'de (StateFlow) saklayın, composable verileri collectAsState() aracılığıyla alır — liste değiştiğinde Compose UI'ı otomatik olarak yeniden çizer.

Temel Kavramlar ve Sonraki Adımlar

• @Composable: UI çizen fonksiyonlar; durum değiştiğinde recomposition tetiklenir.
• State & remember: Yerel durum için remember/rememberSaveable, uzun ömürlü durum için ViewModel + StateFlow/LiveData kullanın.
• Modifier: padding, fillMaxWidth, clickable vb. özellikleri birleştirin.
• Navigation: Çok ekranlı uygulamalar için navigation-compose ile NavHost ve ayrı navigasyon mantığı kullanın.
• Theme: Tutarlı stiller için MaterialTheme'i yapılandırın (Material3 önerilir).

Sık Karşılaşılan Hatalar

• Yanlış kütüphane sürümleri — BOM kullanın.
• Kaydırma sırasında durumun "kaybolması" — durumu yukarı taşıyın (ViewModel) veya uygun yerde rememberSaveable kullanın.
• Preview görüntülenmiyor — importları kontrol edin ve Android Studio'yu yeniden başlatın.

SSS

• XML bilmek gerekiyor mu? Hayır: Compose, UI için XML'in yerini alır ancak eski altyapı hakkındaki bilgiler faydalıdır.
• UI nasıl test edilir? Hızlı hata ayıklama için @Preview ve otomatik testler için ui-test-junit4 kullanın.
• Ekran döndürme sırasında ekran durumu nasıl korunur? ViewModel, yapılandırma değişikliklerinde durumu korur; küçük değerler için rememberSaveable kullanışlıdır.

Sonuç — Compose'u etkinleştirin, UI'ı @Composable içinde tanımlayın, durumu ViewModel'de tutun ve basit bir Scaffold + LazyColumn ile başlayın. İstek üzerine build.gradle, Activity, ViewModel ve tema dosyalarını içeren hazır bir proje oluşturabilirim.