Android uygulama geliştirmeye adım atarken yapılabilecek en iyi başlangıç, çalışan somut bir ilk proje üretmektir. Bu rehberde, bir Vücut Kitle İndeksi (VKİ) hesaplayıcı uygulaması geliştirerek Android dünyasına giriş yapıyoruz. Değişimi ve pratikliği daha iyi kavramak için, aynı projeyi önce geleneksel yaklaşım olan XML ve Java ile nasıl yapardık ona bakacak, ardından günümüz modern standardı olan Kotlin ve Jetpack Compose ile sıfırdan adım adım inşa edeceğiz.

VKİ (Vücut Kitle İndeksi) Nedir?

Vücut Kitle İndeksi, kişinin kilosunun boyuna göre normal olup olmadığını kabaca anlatan bir değerdir. Tek başına kesin bir sağlık ölçütü değildir ama yaygın olarak zayıflık, normallik, fazla kilo ve obezite aralıklarını belirlemek için kullanılır. Uygulamamız bu basit formülü uygulayacak:

VKİ = Kilo (kg) / Boy (m)²

Örnek: 70 kg ağırlığında ve 175 cm (1.75 m) boyunda bir kişi için:

• VKİ = 70 / (1.75 × 1.75) = 70 / 3.0625 ≈ 22.86 → "Normal Kilo"

Sonucu Nasıl Yorumluyoruz?

Hesaplanan VKİ değeri, aşağıdaki eşik değerlere göre bir durum etiketine dönüştürülür. Bu sınıflandırma, kodumuzda Kotlin'in güçlü when yapısıyla yapılacak:

1. Giriş: XML mi, Compose mu?

Android geliştirme dünyasında büyük bir devrim yaşandı. Bu değişimi anlamak, neden Compose ile uygulama geliştirdiğimizi kavramak açısından son derece önemlidir.

Aşağıdaki görselde, bu eğitimde Android telefonumuzda çalışan hâlini adım adım inşa edeceğimiz VKİ Hesaplayıcı uygulamasının arayüzü yer alıyor:

Peki bu ekranı geçmişte nasıl yapıyorduk, bugün Compose ile nasıl yapıyoruz? Birlikte bakalım.

Eski Yöntem: XML ve Java

Geleneksel Android geliştirmede arayüz tasarımı ile iş mantığı birbirinden tamamen ayrı iki dosyada yürütülürdü. Bu yöntemle yeni bir proje açarken:

• File > New > New Project adımlarını izleyin.
• Şablon listesinden Empty Views Activity seçin.
• Proje adını (Name) Vki Hesaplayici olarak girin.
• Proje dilini (Language) Java, Minimum SDK değerini API 24 ("Nougat"; Android 7.0) olarak belirleyin.
• Build configuration language seçeneğini varsayılan olarak gelen Kotlin DSL (build.gradle.kts) [Recommended] olarak bırakabilirsiniz.

Yukarıdaki arayüzü eski yöntemle oluşturmak isteseydik şu kodları yazmamız gerekirdi:

1. Arayüz Dosyası (activity_main.xml):

0
   
1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
    android:layout_width="match_parent"
3
    android:layout_height="match_parent"
4
    android:orientation="vertical"
5
    android:padding="16dp">
6
 
7
    <TextView
8
        android:layout_width="wrap_content"
9
        android:layout_height="wrap_content"
10
        android:text="VKİ Hesaplayıcı"
11
        android:textSize="20sp" />
12
 
13
    <TextView
14
        android:layout_width="wrap_content"
15
        android:layout_height="wrap_content"
16
        android:text="Boyunuz (cm)" />
17
 
18
    <EditText
19
        android:id="@+id/etBoy"
20
        android:layout_width="match_parent"
21
        android:layout_height="wrap_content"
22
        android:hint="Örn: 175"
23
        android:inputType="numberDecimal" />
24
 
25
    <TextView
26
        android:layout_width="wrap_content"
27
        android:layout_height="wrap_content"
28
        android:text="Kilonuz (kg)" />
29
 
30
    <EditText
31
        android:id="@+id/etKilo"
32
        android:layout_width="match_parent"
33
        android:layout_height="wrap_content"
34
        android:hint="Örn: 70"
35
        android:inputType="numberDecimal" />
36
 
37
    <Button
38
        android:id="@+id/btnHesapla"
39
        android:layout_width="match_parent"
40
        android:layout_height="wrap_content"
41
        android:text="VKİ Hesapla" />
42
 
43
    <TextView
44
        android:id="@+id/tvSonuc"
45
        android:layout_width="wrap_content"
46
        android:layout_height="wrap_content"
47
        android:text="Sonuç: -"
48
        android:textSize="18sp"
49
        android:textStyle="bold"
50
        android:layout_marginTop="16dp" />
51
 
52
</LinearLayout>

2. Mantık Dosyası (MainActivity.java):

0
   
1
package com.example.vkihesaplayici; // Kendi paket adınıza göre güncelleyebilirsiniz
2
 
3
import android.os.Bundle;
4
import android.view.View;
5
import android.widget.Button;
6
import android.widget.EditText;
7
import android.widget.TextView;
8
import android.widget.Toast;
9
import androidx.appcompat.app.AppCompatActivity;
10
 
11
public class MainActivity extends AppCompatActivity {
12
 
13
    private EditText etBoy;
14
    private EditText etKilo;
15
    private Button btnHesapla;
16
    private TextView tvSonuc;
17
 
18
    @Override
19
    protected void onCreate(Bundle savedInstanceState) {
20
        super.onCreate(savedInstanceState);
21
        setContentView(R.layout.activity_main);
22
 
23
        // XML'deki arayüz elemanlarını Java değişkenlerine bağlıyoruz
24
        etBoy = findViewById(R.id.etBoy);
25
        etKilo = findViewById(R.id.etKilo);
26
        btnHesapla = findViewById(R.id.btnHesapla);
27
        tvSonuc = findViewById(R.id.tvSonuc);
28
 
29
        // Butona tıklandığında hesaplama mantığı çalışır
30
        btnHesapla.setOnClickListener(new View.OnClickListener() {
31
            @Override
32
            public void onClick(View v) {
33
                String boyStr = etBoy.getText().toString().trim();
34
                String kiloStr = etKilo.getText().toString().trim();
35
 
36
                // Boş alan kontrolü
37
                if (boyStr.isEmpty() || kiloStr.isEmpty()) {
38
                    Toast.makeText(MainActivity.this, "Lütfen boy ve kilo değerlerini giriniz!", Toast.LENGTH_SHORT).show();
39
                    return;
40
                }
41
 
42
                try {
43
                    float boyCm = Float.parseFloat(boyStr);
44
                    float kilo = Float.parseFloat(kiloStr);
45
 
46
                    // cm'yi metreye çeviriyoruz: boy (m) = boy (cm) / 100
47
                    float boyMetre = boyCm / 100.0f;
48
                    float vki = kilo / (boyMetre * boyMetre);
49
 
50
                    tvSonuc.setText(String.format("VKİ Sonucunuz: %.2f", vki));
51
                } catch (NumberFormatException e) {
52
                    Toast.makeText(MainActivity.this, "Geçersiz bir sayı girdiniz!", Toast.LENGTH_SHORT).show();
53
                }
54
            }
55
        });
56
    }
57
}

Uygulamanın ekran görüntüsü:

Bu eski yöntemin zorlukları:

• İki Farklı Dil ve Dosya: Hem XML hem Java dosyasını eşzamanlı yönetmek zorundasınız.
• findViewById Hamallığı: Her arayüz elemanına ayrı bir ID verip onu tek tek koda bağlamak gerekir. Bir ID ismi değişirse uygulama çalışma anında çöker (NullPointerException).
• Şablon Kod Fazlalığı: Basit bir arayüz için dahi onlarca satır gereksiz kod yazılır.

Yeni ve Modern Yaklaşım: Jetpack Compose

Jetpack Compose ise bu karmaşayı tamamen ortadan kaldırdı. Artık XML dosyalarına hiç ihtiyaç kalmadı!

Compose ile arayüzü doğrudan sadece Kotlin kodları yazarak tasarlıyoruz. Buton, metin kutusu ve tüm sayfa düzeni tek bir Kotlin dosyasında fonksiyonlar hâlinde tanımlanıyor. Bir değer değiştiğinde ekranı elle güncellemeye gerek kalmıyor; Compose durumu (state) otomatik olarak fark edip ekranı kendisi yeniden çiziyor.

Kısacası:

Bu eğitimde Compose kullanacağız çünkü modern Android geliştirmenin geleceği ve Google'ın resmî olarak önerdiği standart yol Compose'dur.

2. Kotlin + Jetpack Compose ile İlk Composable Fonksiyonumuz

Jetpack Compose ile yeni bir projeye başlarken:

• File > New > New Project adımlarını izleyin.
• Şablon listesinden bu kez Empty Activity seçeneğini seçin.

• Proje adını (Name) Vki Hesaplayici olarak girin (dil otomatik olarak Kotlin gelir), Minimum SDK değerini API 24 olarak belirleyin.
• Build configuration language kısmını varsayılan Kotlin DSL (build.gradle.kts) olarak bırakıp projeyi oluşturun.

Projeniz açıldığında Android Studio otomatik olarak MainActivity.kt dosyasını karşınıza getirir.

MainActivity.kt:

0
   
1
package com.example.vkihesaplayici
2
 
3
import android.os.Bundle
4
import androidx.activity.ComponentActivity
5
import androidx.activity.compose.setContent
6
import androidx.activity.enableEdgeToEdge
7
import androidx.compose.foundation.layout.fillMaxSize
8
import androidx.compose.foundation.layout.padding
9
import androidx.compose.material3.Scaffold
10
import androidx.compose.material3.Text
11
import androidx.compose.runtime.Composable
12
import androidx.compose.ui.Modifier
13
import androidx.compose.ui.tooling.preview.Preview
14
import com.example.vkihesaplayici.ui.theme.VkiHesaplayiciTheme
15
 
16
// Uygulamanın ana kapısıdır, ekran açıldığında ilk çalışan yerdir
17
class MainActivity : ComponentActivity() {
18
    override fun onCreate(savedInstanceState: Bundle?) {
19
        super.onCreate(savedInstanceState)
20
        
21
        // Ekranın bildirim çubuğu dahil uçtan uca kaplanmasını sağlar
22
        enableEdgeToEdge()
23
        
24
        // Arayüzün Compose ile çizileceğini belirtir (XML'deki setContentView yerine geçer)
25
        setContent {
26
            // Projenin tema ve renk ayarlarını uygular
27
            VkiHesaplayiciTheme {
28
                // Sayfanın temel iskeletini oluşturur
29
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
30
                    // Varsayılan örnek metin fonksiyonunu çağırır
31
                    Greeting(
32
                        name = "Android",
33
                        modifier = Modifier.padding(innerPadding)
34
                    )
35
                }
36
            }
37
        }
38
    }
39
}
40
 
41
// Android Studio'nun örnek olarak sunduğu Composable arayüz fonksiyonu
42
@Composable
43
fun Greeting(name: String, modifier: Modifier = Modifier) {
44
    Text(
45
        text = "Hello $name!",
46
        modifier = modifier
47
    )
48
}
49
 
50
// Kodu cihaza yüklemeden yan panelde canlı önizleme yapmayı sağlar
51
@Preview(showBackground = true)
52
@Composable
53
fun GreetingPreview() {
54
    VkiHesaplayiciTheme {
55
        Greeting("Android")
56
    }
57
}

Projeyle Birlikte Gelen Greeting Fonksiyonu Nasıl Çalışır?

Proje ilk açıldığında Android Studio bize hazır bir örnek olarak Greeting fonksiyonunu sunar:

0
   
1
@Composable
2
fun Greeting(name: String, modifier: Modifier = Modifier) {
3
    Text(
4
        text = "Hello $name!",
5
        modifier = modifier
6
    )
7
}

Bu kod parçasının çalışma mantığı şöyledir:

• @Composable: Fonksiyonun arayüz çizen bir bileşen olduğunu belirtir.
• name: String: Fonksiyona dışarıdan bir metin ("Android") parametresi gönderilir.
• modifier: Modifier = Modifier: Bileşenin dışarıdan boyut, dolgu (padding) veya konum gibi özellikler alabilmesini sağlar. Eğer çağıran yer bir modifier vermezse varsayılan boş Modifier kullanılır.
• Text(...): Compose'un ekrana yazı basmak için kullandığı temel arayüz elemanıdır (XML'deki TextView'ın karşılığıdır). Gönderilen name değerini alıp ekrana "Hello Android!" yazısını basar.

MainActivity içerisindeki setContent bloğu bu fonksiyonu çağırır, en alttaki @Preview fonksiyonu ise Android Studio'nun sağ panelinde (Split/Design modunda) emülatörü başlatmaya gerek kalmadan bu yazının nasıl göründüğünü anlık olarak gösterir.

İlk Composable Fonksiyonumuzu Ekleyelim

Şimdi varsayılan olarak gelen Greeting fonksiyonunu temizleyip yerine kendi @Composable fonksiyonumuzu, setContent çağrımızı ve yan panelde canlı önizleme yapmamızı sağlayan @Preview fonksiyonumuzu ekliyoruz:

MainActivity.kt (İlk Composable Kodumuz Eklenmiş Hâli):

0
   
1
package com.example.vkihesaplayici
2
 
3
import android.os.Bundle
4
import androidx.activity.ComponentActivity
5
import androidx.activity.compose.setContent
6
import androidx.activity.enableEdgeToEdge
7
import androidx.compose.foundation.layout.fillMaxSize
8
import androidx.compose.foundation.layout.padding
9
import androidx.compose.material3.Scaffold
10
import androidx.compose.material3.Text
11
import androidx.compose.runtime.Composable
12
import androidx.compose.ui.Modifier
13
import androidx.compose.ui.tooling.preview.Preview
14
import com.example.vkihesaplayici.ui.theme.VkiHesaplayiciTheme
15
 
16
class MainActivity : ComponentActivity() {
17
    override fun onCreate(savedInstanceState: Bundle?) {
18
        super.onCreate(savedInstanceState)
19
        enableEdgeToEdge()
20
        setContent {
21
            VkiHesaplayiciTheme {
22
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
23
                    VkiHesaplayiciEkrani(modifier = Modifier.padding(innerPadding))
24
                }
25
            }
26
        }
27
    }
28
}
29
 
30
@Composable
31
fun VkiHesaplayiciEkrani(modifier: Modifier = Modifier) {
32
    // Buraya kodlar yazılacak
33
}
34
 
35
@Preview(showBackground = true)
36
@Composable
37
fun VkiHesaplayiciEkraniPreview() {
38
    VkiHesaplayiciTheme {
39
        VkiHesaplayiciEkrani()
40
    }
41
}

Modifier Nedir ve Neden modifier: Modifier = Modifier Yazıyoruz?
Compose dünyasında Modifier (Değiştirici), arayüz bileşenlerinin boyutunu, dış/iç boşluklarını (padding), arka plan rengini, tıklama davranışını veya hizalamasını belirleyen en temel yapıdır. CSS veya XML'deki layout_width, margin, padding gibi niteliklerin tek bir çatı altında toplanmış modern hâlidir.

• Neden parametre olarak veriyoruz? (modifier: Modifier = Modifier)
  Compose'da en iyi pratik (best practice), yazdığınız her @Composable fonksiyonuna bir modifier parametresi tanımlamaktır. Böylece o fonksiyonu dışarıdan çağıran üst bileşen (örneğin Scaffold), fonksiyona dışarıdan istediği boşluğu veya boyutu giydirebilir. = Modifier yazarak varsayılan (boş) bir değer atarız; bu sayede @Preview içinde olduğu gibi istersek hiç parametre vermeden de çağırabiliriz.

• innerPadding Hatası Neydi?
  Scaffold bileşeni; telefonun çentik, saat/pil durum çubuğu ve alt navigasyon tuşları gibi sistem alanlarının içeriğin üzerine taşmaması için bize otomatik bir innerPadding (güvenli boşluk) hesaplar. Eğer innerPadding'i içeriye iletmezsek Android Studio "innerPadding is not used" uyarısı verir. Bu yüzden VkiHesaplayiciEkrani(modifier = Modifier.padding(innerPadding)) diyerek bu güvenli alanı fonksiyonumuza aktarıyoruz.

Peki @Composable etiketi (annotation) nedir?

@Composable yazıp fonksiyonun hemen üstüne koyduğumuzda, Compose'a "Bu fonksiyon bir arayüz parçası çizecek, sen bununla ilgilen" demiş oluyoruz. Bunu fonksiyonunuza zarif bir rozet takmak gibi düşünebilirsiniz. Bu rozet sayesinde, içerisine yazacağımız buton, metin gibi arayüz elemanları ekranda görünebilir hâle gelir.

Şimdilik fonksiyonumuz boş. Ekranımız da boş. Birazdan içerisini boy, kilo ve hesaplama elemanlarıyla canlandıracağız!

3. Column (Sütun) Yapısı

Uygulamamızda metin kutuları, etiketler ve bir buton olacak. Bunların ekranda alt alta durmasını istiyoruz: önce başlık, altında boy kutusu; onun altında kilo kutusu; en altta da hesapla butonu.

İşte tam burada Column devreye girer.

Column nedir?

Column, adından da anlaşılacağı gibi bir sütun yapısıdır. İçine koyduğun tüm elemanları dikey, yani alt alta dizer. Marketten alışveriş listesini düşün; her madde bir satırdır ve aşağı doğru sıralanır. Column tam olarak bunu yapar.

Kodumuza Column'u şöyle ekliyoruz:

0
   
1
@Composable
2
fun VkiHesaplayiciEkrani(modifier: Modifier = Modifier) {
3
    Column(
4
        modifier = modifier
5
            .fillMaxSize()
6
            .padding(16.dp)
7
    ) {
8
        // Arayüz elemanlarımız buraya gelecek
9
    }
10
}

Burada gördüğün Modifier kısmı "düzenleyici" demektir. fillMaxSize() sütunun tüm ekranı kaplamasını, padding(16.dp) ise kenarlardan 16 dp boşluk bırakılmasını sağlar. Böylece elemanlar ekranın kenarına yapışmaz, ferah bir görünüm olur.

Şimdi sıra geldi en eğlenceli kısma: arayüzü gerçek elemanlarla doldurmaya!

4. İlk Temel Arayüzün Oluşturulması

Kullanıcıdan boy ve kilo bilgilerini almak için OutlinedTextField (metin kutusu), başlıklar için Text (metin), hesaplamayı tetiklemek için de Button (buton) kullanacağız.

Şimdilik değişken tanımlamalarına veya hesaplama işlemlerine girmeden doğrudan arayüzün iskeletini kuralım:

0
   
1
@Composable
2
fun VkiHesaplayiciEkrani(modifier: Modifier = Modifier) {
3
    Column(
4
        modifier = modifier
5
            .fillMaxSize()
6
            .padding(16.dp)
7
    ) {
8
        Text(text = "VKİ Hesaplayıcı")
9
 
10
        Text(text = "Boyunuz (cm)")
11
        OutlinedTextField(
12
            value = "",
13
            onValueChange = { },
14
            label = { Text("Örn: 175") }
15
        )
16
 
17
        Text(text = "Kilonuz (kg)")
18
        OutlinedTextField(
19
            value = "",
20
            onValueChange = { },
21
            label = { Text("Örn: 70") }
22
        )
23
 
24
        Button(
25
            onClick = {
26
                // Hesaplama daha sonra yapılacak
27
            }
28
        ) {
29
            Text(text = "VKİ Hesapla")
30
        }
31
    }
32
}

Bileşenlerin ne anlama geldiğine birlikte bakalım:

• Text(...) — Ekrana yazı yazar. Başlığı ve alan etiketlerini bununla koyduk.
• OutlinedTextField(...) — Kullanıcının yazı yazabileceği çerçeveli bir metin kutusudur:
  • value: Kutuya o an yazılı olan metin.
  • onValueChange: Kullanıcı her tuşa bastığında çalışan fonksiyon bloğu.
  • label: Kutunun içinde "Örn: 175" gibi soluk bir ipucu gösterir.
• Button(onClick = { ... }) — Tıklanabilir bir buton oluşturur. İçindeki boş kısım, ilerleyen adımlarda hesaplama mantığını ekleyeceğimiz yerdir.

5. Arayüzü Canlı Önizleme (Design/Split) ve Emülatör (AVD) ile Test Etme

Tasarımımızın ekranda nasıl durduğunu görmek için iki harika seçeneğimiz var:

1. Android Studio Design (Split) Modu:
   Kod editörünün sağ üst köşesinde yer alan Split veya Design butonuna tıklayarak @Preview fonksiyonumuz sayesinde emülatör başlatmadan arayüzün anlık önizlemesini görebilirsiniz. Kodda yaptığınız stil değişiklikleri burada anında güncellenir.

2. Android Sanal Cihazı (AVD / Emulator) ile Çalıştırma:
   Uygulamayı gerçek bir telefon ortamında test etmek için üst araç çubuğundaki yeşil Run ('app') (Shift + F10) butonuna basarak sanal cihazda çalıştırabilirsiniz.

Uygulamamızın Emülatördeki İlk Hâli:

6. Arayüz Tasarımını Geliştirme ve İyileştirmeler

İlk tasarımımız çalışıyordu ancak elemanlar ekranın en üstüne sıkışmıştı, butonumuz küçüktü ve kullanıcı metin kutusuna dokunduğunda normal harf klavyesi açılıyordu. Gerçek ve modern bir kullanıcı deneyimi için tasarımımıza harika dokunuşlar ekliyoruz!

İşte iyileştirilmiş yeni ekran kodumuz:

0
   
1
@Composable
2
fun VkiHesaplayiciEkrani(modifier: Modifier = Modifier) {
3
    // Elemanları alt alta dizmek için Column kullanıyoruz
4
    Column(
5
        modifier = modifier
6
            .fillMaxSize()
7
            .padding(16.dp),
8
        horizontalAlignment = Alignment.CenterHorizontally,
9
        verticalArrangement = Arrangement.Center
10
    ) {
11
        Text(
12
            text = "VKİ Hesaplayıcı",
13
            fontSize = 24.sp,
14
            modifier = Modifier.padding(bottom = 32.dp)
15
        )
16
 
17
        // Boy girişi için metin kutusu
18
        OutlinedTextField(
19
            value = "",
20
            onValueChange = { },
21
            label = { Text("Boy (cm) (örn: 175)") },
22
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
23
            modifier = Modifier.fillMaxWidth()
24
        )
25
 
26
        Spacer(modifier = Modifier.height(16.dp))
27
 
28
        // Kilo girişi için metin kutusu
29
        OutlinedTextField(
30
            value = "",
31
            onValueChange = { },
32
            label = { Text("Kilo (örn: 70)") },
33
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
34
            modifier = Modifier.fillMaxWidth()
35
        )
36
 
37
        Spacer(modifier = Modifier.height(32.dp))
38
 
39
        // Hesapla Butonu
40
        Button(
41
            onClick = {
42
                // Şimdilik burası boş
43
            },
44
            modifier = Modifier.fillMaxWidth().height(50.dp)
45
        ) {
46
            Text(text = "Hesapla", fontSize = 18.sp)
47
        }
48
    }
49
}

Neleri Farklı Yaptık? (İyileştirme Noktaları)

1. Ekranı Ortaya Hizalama (Alignment ve Arrangement):

   • horizontalAlignment = Alignment.CenterHorizontally: İçindeki tüm bileşenleri yatay eksende tam ortaya hizaladı.
   • verticalArrangement = Arrangement.Center: Tüm içeriği ekranın en üstüne yapışmaktan kurtarıp telefon ekranının tam ortasına topladı.

2. Daha Büyük Başlık ve Alt Boşluk:

   • Başlığımıza fontSize = 24.sp vererek daha belirgin hâle getirdik ve altındaki kutulara yapışmaması için padding(bottom = 32.dp) ekledik.

3. Sayısal Klavye Desteği (KeyboardOptions):

   • keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) ekleyerek kullanıcı kutuya tıkladığında harf klavyesi yerine doğrudan sayısal klavyenin açılmasını sağladık. Böylece kullanıcı harf girmeye çalışamaz, daha hızlı ve hatasız giriş yapar.

4. Kutuların Genişletilmesi (fillMaxWidth):

   • modifier = Modifier.fillMaxWidth() sayesinde metin kutularının ekran genişliğini zarif bir şekilde doldurmasını sağladık.

5. Aralara Boşluk Bırakma (Spacer):

   • Elemanların üst üste binmemesi için aralara görünmez ayırıcılar olan Spacer(modifier = Modifier.height(...)) bileşenleri koyduk. Bu sayede kutular ve buton arasında nefes alan, düzenli bir boşluk oluştu.

6. Geniş ve Belirgin Buton:

   • Butonumuza fillMaxWidth() ve height(50.dp) vererek tek elle kolayca basılabilecek, modern ve şık bir buton tasarımı elde ettik.

7. State (Durum) Yönetimi ve Değişkenler

Arayüzümüz artık tam istediğimiz gibi görünüyor! Ancak kutulara yazı yazmaya çalıştığınızda henüz hiçbir şey değişmediğini fark edeceksiniz. Neden? Çünkü Compose'da ekrandaki her şey bir duruma (state) bağlıdır.

Kullanıcının boyunu, kilosunu ve hesaplanan sonucu saklayacak değişkenleri tanımlamamız gerekir. İşte burada state (durum) kavramı devreye girer.

Fonksiyonumuzun başına şu kodları ekliyoruz:

0
   
1
@Composable
2
fun VkiHesaplayiciEkrani(modifier: Modifier = Modifier) {
3
 
4
    var boy by remember { mutableStateOf("") }
5
    var kilo by remember { mutableStateOf("") }
6
    var sonuc by remember { mutableStateOf("") }
7
 
8
    // Kodların devamı ...

Şimdi bu üç anahtar yapıyı tek tek inceleyelim:

mutableStateOf — Değiştirilebilir Durum:
Kutunun içindeki değerin değişebileceğini belirtir. Kullanıcı "175" yazdığında bu değer güncellenir. Değer her değiştiğinde Compose bunu otomatik olarak fark eder ve ekranı yeniden çizer (Recomposition).

remember — Değeri Hafızada Tut:
Compose ekranı yeniden çizerken değişkenleri sıfırlayabilir. remember, "bu kutunun içindeki değeri ekran her yenilendiğinde hafızada sakla, unutma" der.

by — Yetki Devri (Delegation):
Normalde remember { mutableStateOf("") } yazdığımızda değere erişmek için .value yazmak gerekir. Başına by koyduğumuzda Kotlin bu yetkiyi devreder ve doğrudan boy yazarak değeri okuyup değiştirebilmemizi sağlar. Kodumuzu çok daha temiz ve kısa hâle getirir.

8. Hesaplama Mantığı ve Sonucun Ekranda Gösterilmesi

Değişkenlerimizi tanımladığımıza göre artık metin kutularını bu değişkenlere bağlayabilir, butona tıklandığında boy ve kilo değerlerini alarak hesaplamayı yapabiliriz.

1. Metin Kutularını State Değişkenlerine Bağlama

Önceki tasarımımızda metin kutularımızın değerlerini sabit (value = "") ve boş (onValueChange = { }) bırakmıştık. Tanımladığımız boy ve kilo değişkenlerinin arayüzle etkileşime girebilmesi için OutlinedTextField bileşenlerinin value ve onValueChange değerlerini bu değişkenlerle değiştiriyoruz:

• value = boy (ve kilo): Kutunun ekranda kullanıcının girdiği güncel değişken değerini göstermesini sağlar.
• onValueChange = { boy = it } (ve kilo = it): Kullanıcı klavyeden her karakter girdiğinde veya sildiğinde (it), bu yeni değeri değişkene atayarak durumun (State) anında güncellenmesini sağlar.

0
   
1
// önceki kodlar
2
 
3
        // Boy girişi
4
        OutlinedTextField(
5
            value = boy,
6
            onValueChange = { boy = it },
7
            label = { Text("Boy (cm) (örn: 175)") },
8
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
9
            modifier = Modifier.fillMaxWidth()
10
        )
11
 
12
        Spacer(modifier = Modifier.height(16.dp))
13
 
14
        // Kilo girişi
15
        OutlinedTextField(
16
            value = kilo,
17
            onValueChange = { kilo = it },
18
            label = { Text("Kilo (örn: 70)") },
19
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
20
            modifier = Modifier.fillMaxWidth()
21
        )
22
 
23
// sonraki kodlar

2. Formül ve Matematiksel İşlem

Vücut Kitle İndeksi standart formülü:

VKİ = Kilo (kg) / Boy (m)²

Burada dikkat etmemiz gereken iki önemli nokta vardır:

• Kullanıcı boyunu santimetre cinsinden (örn: 175) gireceği için formüle koymadan önce metreye çeviriyoruz: val boyMetre = boyCm / 100f
• Eğer kullanıcı kutuları boş bırakırsa veya geçersiz bir değer yazarsa uygulamanın çökmesini engellemek için toFloatOrNull() ile güvenli sayı dönüşümü ve kontrol ekliyoruz.

3. Butonun onClick Olayı

Butona tıklandığında çalışacak hesaplama bloğu:

0
   
1
val boyCm = boy.toFloatOrNull()
2
val kiloSayi = kilo.toFloatOrNull()
3
 
4
if (boyCm != null && kiloSayi != null && boyCm > 0f) {
5
    val boyMetre = boyCm / 100f
6
    val vki = kiloSayi / (boyMetre * boyMetre)
7
    
8
    val durum = when {
9
        vki < 18.5f -> "Zayıf"
10
        vki < 25f -> "Normal Kilolu"
11
        vki < 30f -> "Fazla Kilolu"
12
        else -> "Obez"
13
    }
14
    
15
    sonuc = String.format("VKİ: %.2f (%s)", vki, durum)
16
} else {
17
    sonuc = "Lütfen geçerli değerler giriniz!"
18
}

4. Sonucun Ekranda Gösterilmesi

Hesaplama sonucunu sonuc değişkenine aktardık; ancak bu sonucu ekranda kullanıcının görebilmesi için bir alana ihtiyacımız vardır. Butonumuzun hemen altına, yalnızca sonuç boş olmadığında (sonuc.isNotEmpty()) ekranda belirecek şu Text alanını ekliyoruz:

0
   
1
        // Sonucun gösterileceği alan
2
        if (sonuc.isNotEmpty()) {
3
            Spacer(modifier = Modifier.height(24.dp))
4
            Text(
5
                text = sonuc,
6
                fontSize = 20.sp,
7
                fontWeight = FontWeight.Bold
8
            )
9
        }

9. Ekrana Görsel Ekleme

Uygulamamız artık tam anlamıyla çalışıyor; ancak tasarımımızı daha profesyonel ve estetik kılmak için "VKİ Hesaplayıcı" başlığının hemen üzerine bir logo görseli ekleyebiliriz.

1. Görseli Projeye Dahil Etme

Kullanacağımız logo görselimiz:

1. Yukarıdaki logonun üzerine sağ tıklayıp Resmi Kopyala deyin.
2. Android Studio'da sol taraftaki Project görünümünde app > res > drawable klasörüne tıklayıp Ctrl + V ile yapıştırın.
3. Görsel varsayılan olarak img.png adıyla gelecektir; görselin üzerine sağ tıklayıp Refactor > Rename (veya Shift + F6) diyerek adını vki_logo.png olarak değiştirin.

2. Image Bileşeni ile Logoyu Gösterme

Jetpack Compose'da görsel göstermek için Image bileşeninden yararlanırız.

Column içeriğimizin en başına, Text("VKİ Hesaplayıcı") başlığının hemen üstüne logomuzu ekliyoruz:

0
   
1
// Logo Görseli
2
Image(
3
    painter = painterResource(id = R.drawable.vki_logo),
4
    contentDescription = "VKİ Logo",
5
    modifier = Modifier.size(120.dp)
6
)
7
 
8
Spacer(modifier = Modifier.height(16.dp))
9
 
10
Text(
11
    text = "VKİ Hesaplayıcı",
12
    fontSize = 24.sp,
13
    modifier = Modifier.padding(bottom = 32.dp)
14
)

• painter = painterResource(id = R.drawable.vki_logo): drawable klasörümüzdeki görsel kaynağını yükler.
• contentDescription = "VKİ Logo": Ekran okuyucular (TalkBack) için görselin ne olduğunu ifade eden erişilebilirlik açıklamasıdır.
• modifier = Modifier.size(120.dp): Logonun ekrandaki genişlik ve yüksekliğini 120 dp olarak sınırlar.

0
   
1
import androidx.compose.foundation.Image
2
import androidx.compose.ui.res.painterResource

10. Uygulama İkonunu (App Icon) Ayarlama

Uygulamamız çalıştığında telefonun ana ekranında ve uygulama çekmecesinde varsayılan olarak Android'in standart yeşil robot simgesi yer alır. Uygulamamıza profesyonel ve özgün bir görünüm kazandırmak için vki_logo.png görselimizi uygulamanın başlatıcı ikonu (Launcher Icon) olarak ayarlayacağız.

Android Studio, farklı ekran çözünürlükleri için tüm ikon boyutlarını otomatik üreten harika bir Image Asset aracına sahiptir.

Adım Adım Uygulama İkonu Oluşturma:

1. Image Asset Aracını Açın:
   Android Studio'da sol tarafta bulunan Project görünümünde app veya res klasörüne sağ tıklayın. Menüden New > Image Asset seçeneğine tıklayın.

2. İkon Tipini Belirleyin:

   • Icon Type: Launcher Icons (Adaptive and Legacy) (Varsayılan seçim olarak bırakın).
   • Name: ic_launcher (Varsayılan ismini değiştirmeyin; böylece mevcut simgelerin üzerine otomatik yazılır).

3. Ön Katmanı (Foreground Layer) Ayarlayın:

   • Üstteki sekmelerden Foreground Layer sekmesine geçin.
   • Source Asset altındaki Asset Type seçeneğini Image olarak işaretleyin.
   • Path kısmındaki klasör simgesine tıklayarak bilgisayarınızdaki vki_logo.png görselini seçin.
   • Resize (Boyutlandırma): Logonun yuvarlak veya kare çerçevelerden dışarı taşmaması için alttaki Resize kaydıracını yaklaşık %60 seviyesine getirin. Sağdaki önizleme kutularında logonun kılavuz çizgilerinin içinde kaldığından emin olun.

4. Arka Plan Katmanını (Background Layer) Ayarlayın:

   • Üstteki sekmelerden Background Layer sekmesine geçin.
   • Asset Type seçeneğini Color olarak seçin.
   • Logonuzun arkasında durmasını istediğiniz rengi (örneğin beyaz #FFFFFF veya logonuzla uyumlu bir renk) belirleyin.

5. İkonları Projeye Kaydedin:

   • Sağ alttaki Next butonuna basın.
   • Çıkan onay ekranında Finish butonuna tıklayarak işlemi tamamlayın.

Uygulamayı emülatörde veya gerçek cihazınızda yeniden çalıştırdığınızda (Shift + F10), ana ekranda artık uygulamanızın kendi özel logosuyla yer aldığını görebilirsiniz.

Tebrikler! Jetpack Compose ile modern, reaktif ve hatasız çalışan ilk Android uygulamanızı başarıyla tamamladınız. Artık kullanıcı değerleri girip Hesapla butonuna bastığında sonuç anında ve şık bir biçimde ekranda belirecektir.

Uygulamamızın Tamamlanmış Hâli: