Android ve GIF

27 Kasım 2013
Android JAVA
3 Yorumlar

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

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/tmp0"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp1"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp3"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp4"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp5"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp6"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp7"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp8"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp9"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp10"
        android:duration="100"/>
    <item
        android:drawable="@drawable/tmp11"
        android:duration="100"/>

</animation-list>

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item

android:drawable="@drawable/tmp0"

android:duration="100"/>

<item

android:drawable="@drawable/tmp1"

android:duration="100"/>

<item

android:drawable="@drawable/tmp2"

android:duration="100"/>

<item

android:drawable="@drawable/tmp3"

android:duration="100"/>

<item

android:drawable="@drawable/tmp4"

android:duration="100"/>

<item

android:drawable="@drawable/tmp5"

android:duration="100"/>

<item

android:drawable="@drawable/tmp6"

android:duration="100"/>

<item

android:drawable="@drawable/tmp7"

android:duration="100"/>

<item

android:drawable="@drawable/tmp8"

android:duration="100"/>

<item

android:drawable="@drawable/tmp9"

android:duration="100"/>

<item

android:drawable="@drawable/tmp10"

android:duration="100"/>

<item

android:drawable="@drawable/tmp11"

android:duration="100"/>

</animation-list>

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

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView android:id="@id/loadingImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/loading" />

</RelativeLayout>

<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"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<ImageView android:id="@id/loadingImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/loading" />

</RelativeLayout>

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

package com.bahadirakin.gif;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		final ImageView imageView = (ImageView) findViewById(R.id.loadingImage);
		final AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();		
		animationDrawable.start();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

package com.bahadirakin.gif;

import android.app.Activity;

import android.graphics.drawable.AnimationDrawable;

import android.os.Bundle;

import android.view.Menu;

import android.widget.ImageView;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final ImageView imageView = (ImageView) findViewById(R.id.loadingImage);

final AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();

animationDrawable.start();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

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();