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.

ders_logomuz

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.

splash_bg

Böylelikle splash ekranımız şöyle bir görüntü almış olacak.

splash

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

tanıtım_gorsel

Peyam ile gündemi kolay, akıllı,
ücretsiz ve hızlı yoldan yakalayın.

Peyam Osmanlıcada Haber demektir bunu biliyor muydunuz?

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.

Şunlar da ilginizi çekebilir

1 Yorum

LEAVE A COMMENT