Android ve GIF

Android yazmaya ilk başladığım zamanlarda, bir projemde tasarımcının yaptığı yükleniyor GIF’ını oynatmam gerekiyordu. İlk düşündüğümde, bişey yok ya demiştim hallederiz hemen. Alt tarafı bir ImageView koyup kaynak dosyası olarak GIF kaynağımı gösterecektim. Ne de olsa web projesi geliştirirken tek yapmam gereken buydu. Tabi sonucu hayal kırıklığı oldu. Bu yazımda benim o zamandan beri kullandığım tekniği anlatacağım. Internette biraz araştırma yaptım insanlar GIF için ayrı View’ler yazma yoluna falan da gitmiş. Hala en basit yolun bu olduğnu düşünüyorum.

Benim ilk karşılaştığım örneği yapacağım, bir “loading.gif” dosyasını android cihazda hareket ettireceğiz. Bunun için ihtiyacımız olan ilk şey tabi ki de Loading.gif dosyası. Bunun için benim kullandığım ilk loading.gif dosyasını bulmaya çalıştım fakat bulamadım. Bu sebepten google’da yaptığım bir aramanın sonucunu kullanacağım. GIF dosyasını hemen sağ tarafınızda görebilirsiniz.

GIF Dosyasının Hazırlanması

Sağ taraftaki gif dosyanızı bilgisayarınıza indirin. Şimdi yapmamız gereken bu GIF dosyasını oluşturan FRAME’leri çıkarmak. Bunun için Photoshop ya da benzeri bir program kullanabilirsiniz. Ben Photoshop’a lisans ücreti vermeye gerek görmüyorum. Hatta çoğunluka o büyüklükte bir resim işleme programına dahi ihtiyacım olmuyor. Böyle ihtiyacım olan ender durumlarda ise pixlr editor kullanıyorum.

Hemen hemen tüm işlemlerde pixlr editor beni tatmin etse de GIF dosyasını FRAME’lere ayırma işleminde sınıfta kalıyor. Bu sebepten bende başka bir site üzerinden GIF dosyasını FRAME’lerine ayırıyorum. Fakat gelin görün ki bu site de her bir FRAME’i yine GIF formatında dönüyor. Benim ihtiyacım olan PNG ya da JPG formatında resimler. Bunun için oturup tüm frame’leri tek tek PNG formatına çeviriyorum.

Eğer tüm bu işlemlerden kaçınmak ve bu tutorial’a devam etmek istiyorsanız FRAME’lerin PNG formatındaki hallerine buradan ulaşabilirsiniz.

Projenin Olusturulması

Tahmin edeceğiniz üzere bu örneğimizi yine Eclipse üzerinden yapıyoruz.

Eclipse üzerinden Android Application Project yaratıyoruz. Yaratırken aşağıdaki değerleri kullanıyorum.

  • Application Name: AndroidLoading
  • Project Name:   AndroidLoading
  • Package Name:  com.bahadirakin.gif
  • Minimum Required SDK: API 8
  • Target SDK: API 18
  • Compile With: API 18
  • Theme: None

Projemiz yaratılırken Eclipse bize boş bir activity’de yaratıyor. Projemiz içerisinde sadece loading hareketli resmini göstereceğimizi düşünecek olursak, bu bize yeter de artar bile.

Projenizi oluşturduktan sonra kendinizin oluşturduğu ya da benim linkini verdiğim RAR dosyasından çıkan tüm FRAME’leri (ki toplam 12 tane olması örnek GIF dosyasıyla ilgilidir) res/drawable-mdpi klasörüne atıyoruz. Bu örneğimiz içerisinde Drawable klasörlerinden birine atmanız yeterli olacaktır.

Hareketlendirme

Şimdi FRAME’lerimizi eklediğimize göre hareketlendirmeye ve ImageView’imizi eklemeye başlayabiliriz. Bunun için yine drawable-mdpi klasörünün altına bir tane “Android Animation List” xml dosyası oluşturuyoruz. Bunun için New -> Other -> Android XML File seçeneğini seçtikten sonra gelen ekranı aşağıdaki gibi dolduruyoruz.

 

Burdan sonra finish dediğimizde bize boş bir animation dosyası oluşturacak. Bizim yapacağımız ise her bir FRAME’imizi bu dosyanın içine tanımlayıp, süreler vermek olacak. Eğer linkte’ki RAR dosyasının içerisindeki FRAME’lerden devam ediyorsanız son durumda aşağıdaki gibi bir loading.xml dosyası elde edeceksiniz.

loading.xml

Loading animasyonumuzu oluşturduğumuza göre şimdi bunu bir ImageView’e bağlayalım. Bunun için activity_main.xml dosyasını aşağıdaki gibi güncelliyoruz.

activity_main.xml

Artık tek yapmamız gereken kod tarafında animasyonu başlatmak. Bunun için MainActivity sınıfı içerisini aşağıdaki gibi güncelliyoruz.

MainActivity.java

 Son

Uygulamanızı bir emulatorde ya da telefonda başlattığınızda GIF’inizin hareketlendiğini göreceksiniz.

End Of Line

 

  • Burak SEÇER

    Çok güzel bir yazı olmuş gerçekten. Projemde kullandım, tebrik ederim.

  • eyaz

    https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

    sevgili kardeşim çok güzel anlatmısın ama bir yerde buyuk bir sonu geride bırak mısın bu Düzelme adına
    loading.xml file in res/drawable/ folder:

    bu resımler ve lıst aynı yerde olacak sekilde ayaralandıgında çok güzel calısıyor eline saglık olsun kardesim ……

  • eyaz

    Bu Codunda yanlıslık var dogru asagda veriyorum onun bir göncelle
    Error: code
    final ImageView imageView = (ImageView) findViewById(R.id.loadingImageView);
    final AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
    animationDrawable.start();

    True . Code

    ImageView img = (ImageView) findViewById(R.id.loadingImageView);
    img.setBackgroundResource(R.drawable.loading_animation);
    AnimationDrawable frameAnimation =(AnimationDrawable) img.getBackground();
    frameAnimation.start();