# Android'de ilk uygulamanı yaz: Kotlin + Jetpack Compose ile sayaç uygulaması (satır satır açıklamalı)

**URL:** <https://sibernobet.com/t/androidde-ilk-uygulamani-yaz-kotlin-jetpack-compose-ile-sayac-uygulamasi-satir-satir-aciklamali/75>\
**Category:** Telefon · Mobil\
**Tags:** android, mobil, ders, kotlin\
**Created:** [Ekim 4, 2026, 3:06öö UTC](https://sibernobet.com/t/androidde-ilk-uygulamani-yaz-kotlin-jetpack-compose-ile-sayac-uygulamasi-satir-satir-aciklamali/75 "2026-10-04T03:06:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![KodAlbay](https://sibernobet.com/user_avatar/sibernobet.com/kodalbay/32/64_2.png) [@KodAlbay](https://sibernobet.com/u/KodAlbay)\
**Post date:** [Ekim 4, 2026, 3:06öö UTC](https://sibernobet.com/t/androidde-ilk-uygulamani-yaz-kotlin-jetpack-compose-ile-sayac-uygulamasi-satir-satir-aciklamali/75/1 "2026-10-04T03:06:25Z")

</div>

Bu derste ekrana basıldıkça artan bir **sayaç uygulaması** yapıyoruz. Küçük görünüyor ama bir Android uygulamasının en temel üç parçasını öğretiyor: **ekran çizmek, kullanıcı dokunuşunu yakalamak ve durumu (state) güncellemek.**

### Hazırlık

1. **Android Studio** ’yu resmi siteden ([developer.android.com](http://developer.android.com)) indir ve kur.
2. _New Project → Empty Activity_ şablonunu seç. Dil olarak **Kotlin** seçili olsun.
3. Telefonunu USB ile bağla ve telefonda **Geliştirici seçenekleri → USB hata ayıklama** ’yı aç. Ya da Android Studio’daki sanal telefonu (emülatör) kullan.

### Kod: `MainActivity.kt`

Şablonun oluşturduğu dosyanın içeriğini şununla değiştir:

```kotlin
package com.ornek.sayac // 1

import android.os.Bundle // 2
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() { // 3
    override fun onCreate(savedInstanceState: Bundle?) { // 4
        super.onCreate(savedInstanceState)
        setContent { // 5
            MaterialTheme { // 6
                SayacEkrani()
            }
        }
    }
}

@Composable // 7
fun SayacEkrani() {
    var sayi by remember { mutableIntStateOf(0) } // 8

    Column( // 9
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "$sayi", fontSize = 64.sp) // 10
        Spacer(Modifier.height(24.dp))
        Row {
            Button(onClick = { sayi++ }) { // 11
                Text("Artır")
            }
            Spacer(Modifier.width(12.dp))
            OutlinedButton(onClick = { sayi = 0 }) { // 12
                Text("Sıfırla")
            }
        }
    }
}

```

### Bu kod ne yapıyor? Satır satır

1. **package** : Uygulamanın kimliği gibi düşün. Mağazada da bu adla tanınır, herkesinki farklı olmalı.
2. **import** satırları: Kullanacağımız hazır parçaları (buton, yazı, düzen) projeye çağırır.
3. **MainActivity** : Uygulama açıldığında ilk çalışan ekran. Android’de her ekran bir "Activity"dir.
4. **onCreate** : Ekran oluşturulduğunda Android’in otomatik çağırdığı fonksiyon. Başlangıç işleri buraya yazılır.
5. **setContent** : “Bu ekranın içeriği şudur” der. İçine yazdığımız şey ekrana çizilir.
6. **MaterialTheme** : Google’ın hazır tasarım dili. Renkler ve yazı tipleri otomatik düzgün gelir.
7. **@Composable** : Bu fonksiyonun bir arayüz parçası çizdiğini belirtir. Compose’da ekranlar bu tür fonksiyonlardan oluşur.
8. **`var sayi by remember { mutableIntStateOf(0) }`**: Uygulamanın en önemli satırı. `sayi` adında, 0’dan başlayan bir değişken açar. `remember` ekran yeniden çizilse bile değeri unutmamasını sağlar. `mutableIntStateOf` ise değer değişince **ekranın otomatik yenilenmesini** sağlar.
9. **Column** : İçindekileri alt alta dizer. `fillMaxSize` tüm ekranı kaplar, `padding` kenarlardan boşluk bırakır, `Center` her şeyi ortalar.
10. **Text** : Sayıyı büyük puntoyla gösterir. `"$sayi"` değişkenin değerini yazıya çevirir.
11. **Button / onClick** : Butona dokunulunca süslü parantezin içi çalışır. `sayi++` sayıyı 1 artırır, ekran kendiliğinden güncellenir.
12. **OutlinedButton** : Çerçeveli ikinci buton. Sayıyı 0’a döndürür.

### Çalıştır

Android Studio’da yeşil ▶ (Run) butonuna bas. Birkaç saniye sonra uygulama telefonunda ya da emülatörde açılır.

### Kendini dene (ödev)

- **“Azalt”** butonu ekle, ama sayı 0’ın altına düşmesin. İpucu: `if (sayi > 0) sayi--`
- Sayı 10’a ulaşınca yazının rengi değişsin. İpucu: `Text(..., color = if (sayi >= 10) Color.Red else Color.Unspecified)` (bunun için `androidx.compose.ui.graphics.Color` import etmen gerekir)

Takıldığın yerin ekran görüntüsünü bu konuya at, birlikte çözelim.