Android Zar Atma Uygulaması — Kotlin

Ahmet Giray Uçar
Google Developer Student Clubs
5 min readJan 9, 2021

Herkese selamlar, Kotlin programlama dili ile yapılabilecek basit ve eğlenceli bir resimli zar atma uygulaması yapacağım. Uygulamayı yazarken aynı zamanda Android Studio’nun özelliklerinden ve sağladığı kolaylıklardan bahsedeceğim. Yazının sonunda buna benzer bir uygulama kodlamış olacağım.

Burada yazacağım uygulama, Android’in kendi sitesinde bulunmaktadır. Yazının en altına inerek bu siteye bakabilirsiniz. Fakat ben bu sitede yazan uygulamayı birazcık daha geliştirip, resimli bir uygulama haline getirdim. ”Dışarıdan projeye görsel ekleme” konusunu da anlatıyor olacağım.

Açılış Ekranı Resmi
Açılış Ekranı
Zarı attıktan sonra gelen resim
Zar atılınca gelecek olan ekran

Uygulama açılış ekranı.

Zarı At butonuna bastıktan sonra gelecek olan ekran.

Uygulamayı 2 yazıya bölüyorum. İlk yazımda projeyi oluşturmaktan, resim ekleme kısmına kadar geleceğim. İkinci yazımda ise uygulamaya resim ekleyeceğim.

Başlayalım.

Daha kolay anlaşılması için ilk yazıyı da kendi içinde bölümlere ayırdım.

1. Android Studio ve Proje Oluşturma

2. Ekrana View Ekleme

3. View ve Kod Arasındaki Bağlantıyı Kurma

4. Zar Atma Fonksiyonunu Yazma

5. SON

1. Android Studio ve Proje Oluşturma

A- Eskiden oluşturduğunuz Android Studio projeleri yer almaktadır. Benim “example_project” adlı, eskiden oluşturduğum bir proje yer almakta. Yukarıdaki yazı, projenin ismini, alttaki yazı ise projenin olduğu Path’i yani projenin bilgisayarınızda nerede olduğunu göstermekte.

B-Yeni proje oluşturmak için buraya tıklamak yeterli olacaktır.

Şablon Seçim Ekranı

Bizim için önceden hazırlanmış şablonlar var. Oluşturmak istediğimiz projenin tipine göre bu hazır şablonlardan biri seçerek fazla kod yazmaktan kurtulabiliriz. Benim projeme en yakın olan şablon Empty Activity olduğu için bunu seçiyorum.

C- Projeme vermek istediğim ismi buradan ayarlıyorum.

D- Package name , uygulamaların TC kimlik no. su gibi düşünülebilir. Bu proje sadece örnek bir proje olacağı için package name önemli değil.

E- Projeyi nereye kaydetmek istediğimi belirtiyorum.

F- Projeyi kodlarken hangi dili kullanmak istediğimi soruyor. Bunu Kotlin seçiyorum eğer Java seçili kalırsa, bu yazıda yazdığım kodlar çalışmayacaktır.

G- SDK seviyesini seçmemi istiyor. Your app will run on approximately x.x% of devices yazan yerde, seçtiğim SDK’in, dünya üzerindeki tüm android cihazların, yaklaşık olarak yüzde kaçında çalışabileceğini belirtiyor. SDK seviyesini ne kadar yüksek tutarsam o kadar yeni özelliklere sahip olurum fakat bir o kadar da, bu uygulamayı çalıştırabilecek cihaz sayısını azaltmış olurum.

2. Ekrana View Ekleme

Mobil geliştirmeyi kısaca 2 parça halinde düşünebilirsiniz. İlki kullanıcının gördüğü kısım, ikincisi ise kullanıcın görmediği , arka planda çalışan işlemler. Kullanıcının gördüğü kısmı activity_main.xml dosyasından, arka planda çalışan işlemleri ise MainActivity.kt dosyasında yazıyor olacağım.

A- Bu kısım palet olarak geçiyor. Paletten herhangi bir view’ ı seçip 2 numaralı bölgenin içine bırakmam yeterli olacaktır. Böylelikle ekrana yazı, resim, tuş vb. bir sürü şey ekleyebileceğim.

B- Bu kısımda kullanıcın gördüğü ekran yer almakta.

C- Eğer projede hata varsa bu bölgede o hata gözükür. Ünlem kırmızı ise bir hatayı, sarı ise bir uyarıyı ifade eder. Kırmızılar projenin çalışmasını engellerken sarılar sadece uyarıdır ve projenin çalışmasını etkilemezler.

D- Attributes yani özellikler kısmı, view’ larımızın özelliklerini ve ekranda durdukları yerleri değiştirebildiğimiz kısımdır.

Benim projem için bir TextView ve bir tane Button yeterli olacaktır. Proje ile birlikte oluşturulan Hello World adlı TextView’ ı silerek başlıyorum.

Paletteki TextView’e tıkladıktan sonra ekrana sürükleyip bırakıyorum. Aynı işlemi Button içinde yapıyorum.

Bunu yaptığımda 3 numaralı kısımda bir hata beliriyor. Bu hatayı gidermek için Attributes adlı kısımdan yani 4. bölgeden Constraint verilmesi gerekmekte. 4. Bölgeye gelip, mavi arka planlı “+” lara tıklayarak bu hatayı gideriyorum.

Son ama en önemli işleme geldim. 2 numaralı kısıma sürükleyip bıraktığım TextView’ a ve Button’ a bir ID vermem gerek.

Neden ID bu kadar önemli?

View’lara verdiğim ID ler sayesinde bu view’ lara kod kısmından erişebileceğim.

ID nasıl verilir?

2 numaralı bölgeye yerleştirdiğim view’ lara tıkladıktan sonra 4 numaralı kısımda en üstte çıkan ID özelliğini değiştiriyorum. ID’yi değiştirmeseniz bile Android Studio o view’ a default bir ID atıyor.

Şimdi ID leri kullanma vakti!

3. View ve Kod Arasındaki Bağlantıyı Kurma

val numberTextView : TextView = findViewById(R.id.textView1)

Bu kod satırı ile, numberTextView adında, TextView’ ın referansını tutan bir değer oluşturdum. Bu değerin TextView olduğunu belirtmem lazım, eğer belirtmez isem hata alırım. Tip belirtmeyi iki nokta koyarak yapıyorum. findViewById fonksiyonu ise adından da anlaşılabileceği üzere, parantezlerin içine yazdığım ID’ye sahip view’ ı bulur ve bana geri döndürür. Bu durumda benim TextView’ ıma atadığım ID “textView1".

4. Zar Atma Fonksiyonunu Yazma

Maalesef Kotlinde hali hazır bir zar atma fonksiyonu yok. Bunu kendim yazmam gerekecek.

Burada şu konuya dikkat çekmek istiyorum. Eğer TextView’ ın içinde yazan yazıyı değiştirmek istiyorsam, direkt TextView’ ın kendisini değiştirmeye çalışmak yerine TextView’ ın text özelliğini değiştirmem gerekiyor.

// Yanlış kullanım
numberTextView = "${randomNumber} geldi."
// Doğru Kullanım
numberTextView.text = "${randomNumber} geldi."

5. SON

onCreate metodu özel bir metoddur. Ekran oluşturulmadan önce bir kere çağrılır ve bir daha çağrılmaz. Bu yüzden Button‘ uma setOnClickListener fonksiyonunu bu metod içerisinde verdim (15. Satır). Bu metodun içine yazılan her satır kod, butona tıklanıldığında çalıştırılır. Ben de rastgele sayı üretme fonksiyonumu, bu butona tıklanıldığında çalışmasını istediğim için, setOnClickListener’ ın içine yazıyorum.

Umarım anlaşılır ve güzel bir yazı olmuştur. Bir sonraki yazımda uygulamamıza nasıl resimler ekleyerek güzelleştirebileceğimizi anlatacağım. Herkese iyi çalışmalar.

Çalışmanın resimli ve son halini görmek için buraya tıklayınız.

--

--