Contact
Search the Web:


Tanggal Upload 2018-08-01
Oleh R.M. Lukman Hakim, S.Kom


Belajar Android Menampilkan Gambar Animasi Gif


Pada Seri belajar android beberapa waktu yang lalu kita sudah berhasil menampilkan gambar dengan ImageView. Nah untuk gambar animasi gif ini tidak bisa langsung ditampilkan pada imageview perlu kerja extra untuk menampilkannya. Beberapa waktu lalu ada yang bertanya tentang hal ini cuma belum sempat buat tutorialnya.

Buat yang tertarik pada materi ini, mari kita ikuti langkah-langkah berikut ini.

1. Buat project dengan nama DisplayGifAnimation.

2. Cari gambar animasi gif diinternet karena sebentar lagi bulan ramadhan kita bisa ambil animasi gif bentarl lagi puasa http://www.bbmshare.net/2013/06/dp-bbm-animasi-sambut-bulan-ramadhan.html simpan file gif nya dengan nama bentarlagipuasa.gif taruh didirektori res/drawable

3. Buat class baru dengan nama GIFView.java lalu ketikkan kode berikut

01         package net.agusharyanto.displaygifanimation;

02        

03         /**

04         * Created by HP on 10/06/2015.

05         */

06         import android.content.Context;

07         import android.graphics.Canvas;

08         import android.graphics.Movie;

09         import android.util.AttributeSet;

10         import android.view.View;

11        

12         import java.io.InputStream;

13        

14         public class GIFView extends View {

15        

16             private InputStream gifInputStream;

17             private Movie gifMovie;

18             private int movieWidth, movieHeight;

19             private long movieDuration;

 

20             private long mMovieStart;

21        

22             public GIFView(Context context) {

23                 super(context);

24                 init(context);

25             }

26        

27             public GIFView(Context context, AttributeSet attrs) {

28                 super(context, attrs);

29                 init(context);

30             }

31        

32             public GIFView(Context context, AttributeSet attrs,

33                            int defStyleAttr) {

34                 super(context, attrs, defStyleAttr);

35                 init(context);

36             }

37        

38             private void init(Context context){

39                 setFocusable(true);

40                 gifInputStream = context.getResources().openRawResource(R.drawable.bentarlagipuasa);

41        

42                 gifMovie = Movie.decodeStream(gifInputStream);

43                 movieWidth = gifMovie.width();

44                 movieHeight = gifMovie.height();

45                 movieDuration = gifMovie.duration();

46             }

47 

48 @Override
49    protected void onMeasure(int widthMeasureSpec,
50                             int heightMeasureSpec) {
51        setMeasuredDimension(movieWidth, movieHeight);
52    }
53
54    public int getMovieWidth(){
55        return movieWidth;
56    }
57
58    public int getMovieHeight(){
59        return movieHeight;
60    }
61
62    public long getMovieDuration(){
63        return movieDuration;
64    }
65
66    @Override
67    protected void onDraw(Canvas canvas) {
68
69        long now = android.os.SystemClock.uptimeMillis();
70        if (mMovieStart == 0) {   // first time
71            mMovieStart = now;
72        }
73
74        if (gifMovie != null) {
75
76            int dur = gifMovie.duration();
77            if (dur == 0) {
78                dur = 1000;
79            }
80
81            int relTime = (int)((now - mMovieStart) % dur);
82
83            gifMovie.setTime(relTime);
84
85            gifMovie.draw(canvas, 0, 0);
86            invalidate();
87
88        }
89
90    }
91
92 }

Terlihat struktur direktorinya adalah seperti ini

4. edit activity_main.xml lalu ketikkan kode berikut

01 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
02     xmlns:tools="http://schemas.android.com/tools"
03     android:layout_width="match_parent"
04     android:layout_height="match_parent">
05  
06     <TextView
07         android:id="@+id/textView"
08         android:layout_width="wrap_content"
09         android:layout_height="wrap_content"
10         android:layout_centerHorizontal="true"
11         android:layout_gravity="center_horizontal"
12         android:text="Sebentar Lagi Puasa"
13         android:textStyle="bold" />
14     <net.agusharyanto.displaygifanimation.GIFView
15         android:id="@+id/gifview"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_alignLeft="@+id/textView"
19         android:layout_alignStart="@+id/textView"
20         android:layout_below="@+id/textView"
21         android:layout_gravity="center_horizontal" />
22     <TextView
23         android:id="@+id/textinfo"
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:layout_below="@+id/gifview"
27         android:layout_centerHorizontal="true"
28         android:text="" />
29  
30 RelativeLayout>

5. edit MainActivity.java lalu ketikkan kode berikut

01 package net.agusharyanto.displaygifanimation;
02  
03 import android.app.Activity;
04 import android.os.Bundle;
05 import android.view.Menu;
06 import android.view.MenuItem;
07 import android.widget.TextView;
08  
09 public class MainActivity extends Activity {
10  
11     TextView textViewInfo;
12     GIFView gifView;
13  
14     @Override
15     protected void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         setContentView(R.layout.activity_main);
18         gifView = (GIFView)findViewById(R.id.gifview);
19         textViewInfo = (TextView)findViewById(R.id.textinfo);
20  
21         String stringInfo = "";
22         stringInfo += "Duration: " + gifView.getMovieDuration() + " ";
23         stringInfo += "W x H: "
24                 + gifView.getMovieWidth() + " x "
25                 + gifView.getMovieHeight() + " ";
26  
27         textViewInfo.setText(stringInfo);
28  
29     }
30     @Override
31     public boolean onCreateOptionsMenu(Menu menu) {
32         // Inflate the menu; this adds items to the action bar if it is present.
33         getMenuInflater().inflate(R.menu.menu_main, menu);
34         return true;
35     }
36  
37     @Override
38     public boolean onOptionsItemSelected(MenuItem item) {
39         // Handle action bar item clicks here. The action bar will
40         // automatically handle clicks on the Home/Up button, so long
41         // as you specify a parent activity in AndroidManifest.xml.
42         int id = item.getItemId();
43  
44         //noinspection SimplifiableIfStatement
45         if (id == R.id.action_settings) {
46             return true;
47         }
48  
49         return super.onOptionsItemSelected(item);
50     }
51 }

6. Run Projectnya

Semoga Bermanfaat

Salam Hangat Developer Android

Agus Haryanto

Referensi

http://android-er.blogspot.com/