Ken Burns Animasyonlu Splash Ekranı
Bu dersimde Ken Burns Animasyonuna sahip bir Splash Ekranı hazırlayacağız. Umarım öğrenmeye meraklı herkese faydalı olur.
Ken Burns Animasyonu(efekti) Nedir?
Ken Burns efekti video uretiminde kullanılan kaydırma ve yakınlaştırma tiplerinden bir tanesidir. Adını Amerikan belgeselci Ken Burns ten almıştır. Daha detaylı bilgilere wikipedia veya google dan ulaşabilirsiniz.
Tasarım
Splash ekranımız bir arkaplan görselinden ve ekranın ortasına oturtulmuş bir logodan oluşacak.
Öncelikle basit bir logo tasarlayalım.
Logomuz
Görselde gördüğünüz basit logomuzu Gimp programını kullanarak oluşturdum. Temelde basit bir text/yazı ve gölge efektinden oluşuyor. İsteyenler .xcf dosyasını da şuradan indirip inceleyebilir veya kullanabilir.
Arkaplan Görseli
İnternetten hızlıca telif hakkı problemi olmayan yüksek çözünürlükte bir görsel ayarlayalım. Pixabay ücretsiz kaliteli görsellerin bulunduğu bir sitedir. Oradan şunu seçerek devam edelim.
Böylelikle splash ekranımız şöyle bir görüntü almış olacak.
Yine isteyenler hazırladığım .xcf(gimp dosyası) dosyasını şuradan indirip istedikleri gibi kullanabilirler.
KenBurnsView Kütüphanesi
Ken Burns animasyonuna sahip ekranımızı hazırlarken KenBurnsView kütüphanesini kullanacağız. Kütüphane ile alakalı daha detaylı bilgilere github sayfasından ulaşabilirsiniz.
Hazırlığımızı yaptık artık uygulama örneğini yazmaya başlayalım!
Uygulama Örneği
Uygulama örneği yazılırken Android Studio 1.5.1 surumu kullanılmıştır.
1. Android Studio yu açın. Start a new Android Studio project
seçeneği ile yeni bir projeye başlayın.
2. Uygulama adı, paket adı için aşağıdaki değerleri kullandım. Siz keyfinize göre başka şeyler kullanabilirsiniz.
Uygulama Adı : AnimatedSplashScreen
Paket Adı : com.androidevreni.splashscreen
3. Next
diyerek ilerleyin sonraki ekranda Telefon ve Tabletler kısmına MinSDK için 14 ü seçin. Next
ile ilerleyin.
4. Empty Activity
i seçin Next
> Finish
ile bitirin. Bu noktada ide nin projeyi oluşturmasını bekleyin.
5. Öncelikle activity nin full ekran
olması için MainActivity.java
yı açın ve şu satırı setContentView(R.layout.activity_main)
satırından öncesine ekleyin.
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
Daha sonra res/values/styles.xml
dosyasını açıp style tagında gorduğunuz parent
i Theme.AppCompat.Light.DarkActionBar
–> Theme.AppCompat.Light.NoActionBar
olarak değiştirin. Bu adım ile actionbar i kaldırmış olduk. Böylelikle activity artık full ekran.
6. build.gradle (Module : app) dosyanızı açıp dependencies kısmına şu satır ile KenBurnsView kutuphanesini ekleyin.
compile ‘com.flaviofaria:kenburnsview:1.0.6’`
Ekledikten sonra Sync Gradle
ile proje dosyalarını gradle ile senkronize edin.
7. res/layout klasöru altına bulunan activity_main.xml dosyasını açın ve içeriğini şununla değiştirin :
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.androidevreni.animatedsplashscreen.MainActivity"> <com.flaviofaria.kenburnsview.KenBurnsView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/splash_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/logomuz" /> </RelativeLayout>
Bu adımda Android Studio splash_bg ve logomuz drawable görsellerini bulamadığı için o satırlarda hata gösterecektir. Bir sonraki adımda görsellerimizi projemize ekleyeceğiz.
8. res
klasörü altına drawable dosyaları için drawable-nodpi
ve drawable-xhdpi
adında iki klasör oluşturun.
Arkaplan için seçtiğimiz görselin genişliği 1400 px civarında olacak şekilde yeniden boyutlandırıp adını splash_bg.jpg
yaptıktan sonra drawable-nodpi
klasörüne kopyalayın.
Logomuz için hazırladığımız basit görseli logomuz.png
adında arkaplanı transparan olarak drawable-xhdpi
klasörüne kopyalayın. Transparan ve orjinal boyutundaki halini şuradan indirebilirsiniz. Veya kendiniz bunun yerine yeni bir logo kullanabilirsiniz.
Şimdi activity_main.xml
dosyasında gösterilen hatalar giderilmiş olmalıdır.
9. Uygulamayı çalıştırın ve bir emulatör veya gerçek cihazda test edin. Sonuç videomuzu aşağıdan izleyebilirsiniz:
Peyam – Gazeteler
Kaynak Kod
Bunun gibi birçok ders hazırlayıp yayınlamak istiyoruz ancak bunun için gerçekten ciddi desteğe ihtiyacımız var arkadaşlar. Lütfen 1 dakikanızı ayırıp bu dersi facebook veya twitter hesabınız üzerinden paylaşarak bize destek olun.
Yeni bir derste görüşmek uzere,
İyi Çalışmalar.
Ellerine sağlık hocam bunuda ekledim uygulamaya çok şık durdu