React-Native Android Uygulamasında Splash Screen Oluşturma.

Merhabalar,

Bu yazımızda React-Native android uygulaması için Splash Screen ekranı oluşturacağız.

Öncelikle Splash Screen nedir?

Splash screen, uygulamayı ilk başlattığımızda karşımıza gelen, genelde uygulama logosu, ismi vb. içeriğe sahip başlangıç (açılış) ekranıdır.

Yazımızdaki örnek projede;

  • React: 16.9.0
  • React-Native: 0.61.3

kullanılmıştır.

Öncelikle geliştirme yapmaya başlamadan önce bu ekranda kullanacağımız görsellerimizi hazırlamamız gerekiyor. Bu ekran için örnek bir görsel hazırladıktan sonra, bu görseli
https://apetools.webprofusion.com/#/tools/imagegorilla adresi aracılığıyla farklı çözünürlükteki cihazlar için boyutlandıracağız. Siz farklı siteler kullanarak da bu boyutlandırma işlemini yapabilirsiniz.

Boyutlandırma işlemini yaptıktan sonra;

Ekran Görüntüsü 1: Boyutlandırılmış görseller.

Klasör isimleriniz Ekran görüntüsü 1 deki gibi olmalı ve /root/android/app/src/main/res klasörü içerisinde yer almalıdır. Yukarıda örnek vermiş olduğum siteyi kullandığınız taktirde klasörleme ve isimlendirme konusunu sizin yerinize yapacaktır.

Görsellerimizi kopyaladıktan sonra işlemimize Android Studio üzerinden devam edeceğiz. Az önce kopyaladığımız görselleri Android Studio üzerinden görüntüleyebilmek için android/app/src/main/res/drawable klasörünü kontrol etmeniz yeterli olacaktır. Ekran görüntüsü aşağıdaki gibidir.

Ekran Görüntüsü 2: Oluşturulan görseller.

Android Studio üzerindeki işlemlerimize yeni bir drawable resources file oluşturarak başlayacağız. Bunun için drawable dosyasına sağ tıklıyoruz ve New -> Drawable File Resource diyoruz. Benim örnek uygulamam için kullandığım dosya ismi splash.xml. Yine oluşturmuş olduğum dosyanın ekran görüntüsü aşağıdaki gibidir.

Ekran Görüntüsü 3: Splash.xml dosyası.

Şimdiki adımda oluşturmuş olduğumuz splash.xml dosyasına yeni bir item tagi ekleyip onun da içerisine bir bitmap yazıyoruz. Bitmap için src ve gravity özelliklerini veriyoruz. Burada src ile kaynak olarak az önce görüntülediğimiz screen.png görselini kullanmasını, gravity özelliğinde ise bu görseli ekrana yerleştirmesini belirttik. Hazırlamış olduğum splash.xml örneği aşağıdaki gibidir.

Ekran Görüntüsü 4: Splash.xml detay.

Splash.xml dosyasındaki düzenlemelerimizi tamamladıktan sonra syles.xml dosyasında düzenleme yapacağız. Düzenleme yapacağımız dosya /root/app/res/values klasörü içerisinde bulunmaktadır. Ekran görüntüsü de aşağıdaki gibidir.

Ekran Görüntüsü 5: Styles.xml dosya konumu.

Styles.xml dosyası içerisine yeni bir style tagi ekliyoruz. Bu tag içerisine de name ve parent özelliklerini tanımlıyoruz. Style içerisine de az önce oluşturmuş olduğumuz splash.xml dosyası için bir item ekliyoruz. Bu item içerisinde de arka plan olarak, az önce oluşturduğumuz @drawable/splash dosyasını gösteriyoruz. Yine yapılan işlem için ekran görüntüsü aşağıdaki gibidir.

Ekran Görüntüsü 6: Styles.xml dosya detayı.

Değişikliklerimize AndroidManifest.xml dosyası ile devam ediyoruz. Öncelikle Activity tagi içerisinde bir kaç düzenleme yapacağız. İlk olarak .MainActivity yazan yeri .SplashActivity olarak güncelliyoruz. Güncelleme sonunda burada hata alacağız. Çünkü henüz böyle bir class oluşturmadık. O nedenle bu hatayı şimdilik göz ardı edebiliriz.

İlk değişikliğimizi yaptıktan sonra aynı activity içerisine yeni bir özellik ekliyoruz. android:theme=”@style/SplashTheme” Az önce styles.xml dosyası içerisinde oluşturmuş olduğumuz temayı buradaki activity içerisinde kullanıyoruz.

AndroidManifes.xml dosyası içerisinde bulunan mevcut Activity için düzenlemelerimizi yaptık. Bu dosya içerisinde son olarak güncellediğimiz activity altına yeni bir activity ekliyoruz. Dosya içerisinde yapılan tüm değişiklikleri aağıdaki ekran görüntüsünde görebilirsiniz.

Ekran Görüntüsü 7: AndroidManifest.xml dosyası detay.

Az önce düzenlemeleri yaparken SplashActivity için bir hatadan bahsetmiştik. Şimdiki yapacağımız düzenleme ile bu hata da ortadan kalkmış olacak. Yeni bir java class dosyası oluşturacağız. Bunun için app/src/main/java/uygulama_adi klasörüne sağ tıklayıp Yeni -> Java Class diyerek yeni bir class dosyası oluşturuyoruz ve adını SplashActivity yazıyoruz. SplashActivity yazıyoruz çünkü AndroidManifest.xml dosyasında bu şekilde kullandık. Oluşturduğumuz dosyanın ekran görüntüsü aşağıdaki gibidir.

Ekran Görüntüsü 8: SplashActivity.java class

Oluşturduğumuz yeni dosyaya OnCreate methodunu ekliyoruz. Bu method içerisinde ise yeni bir intent oluşturuyoruz. Uygulama açıldığında ilk olarak bizim oluşturduğumuz SplashActivity başlayacak ve bizim hazırlamış olduğumuz splash screen karşımıza gelecek, sonrasında ise oluşturduğumuz bu intent aracılığı ile MainActivity’i başlatacağız. SplashActivity.java dosyasının ekran görüntüsü aşağıdaki gibidir.

Ekran Görüntüsü 9: Splash Activity dosyası detay

Buradaki düzenlemeyi de tamamladıktan sonra artık yapmış olduğumuz değişiklikleri uygulama üzerinde görüntüleyebiliriz. Örnek uygulamayı kendi cihazımda çalıştırdığımda, ekran görüntüsü aşağıdaki gibidir.

Örnek projeyi Github üzerinden paylaştım. Erişim için aşağıdaki linki kullanabilirsiniz.

https://github.com/cinarrtolga/react-native-splash-screen-example

İyi çalışmalar.

Start the Discussion!

Your email address will not be published. Required fields are marked *