About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

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

package net.agusharyanto.displaygifanimation;

/**
 * Created by HP on 10/06/2015.
 */
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.util.AttributeSet;
import android.view.View;

import java.io.InputStream;

public class GIFView extends View {

    private InputStream gifInputStream;
    private Movie gifMovie;
    private int movieWidth, movieHeight;
    private long movieDuration;
    private long mMovieStart;

    public GIFView(Context context) {
        super(context);
        init(context);
    }

    public GIFView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public GIFView(Context context, AttributeSet attrs,
                   int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context){
        setFocusable(true);
        gifInputStream = context.getResources().openRawResource(R.drawable.bentarlagipuasa);

        gifMovie = Movie.decodeStream(gifInputStream);
        movieWidth = gifMovie.width();
        movieHeight = gifMovie.height();
        movieDuration = gifMovie.duration();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec,
                             int heightMeasureSpec) {
        setMeasuredDimension(movieWidth, movieHeight);
    }

    public int getMovieWidth(){
        return movieWidth;
    }

    public int getMovieHeight(){
        return movieHeight;
    }

    public long getMovieDuration(){
        return movieDuration;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        long now = android.os.SystemClock.uptimeMillis();
        if (mMovieStart == 0) {   // first time
            mMovieStart = now;
        }

        if (gifMovie != null) {

            int dur = gifMovie.duration();
            if (dur == 0) {
                dur = 1000;
            }

            int relTime = (int)((now - mMovieStart) % dur);

            gifMovie.setTime(relTime);

            gifMovie.draw(canvas, 0, 0);
            invalidate();

        }

    }

}

Terlihat struktur direktorinya adalah seperti ini

4. edit activity_main.xml lalu ketikkan kode berikut

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:text="Sebentar Lagi Puasa"
        android:textStyle="bold" />
    <net.agusharyanto.displaygifanimation.GIFView
        android:id="@+id/gifview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView"
        android:layout_below="@+id/textView"
        android:layout_gravity="center_horizontal" />
    <TextView
        android:id="@+id/textinfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/gifview"
        android:layout_centerHorizontal="true"
        android:text="" />

</RelativeLayout>

5. edit MainActivity.java lalu ketikkan kode berikut

package net.agusharyanto.displaygifanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends Activity {

    TextView textViewInfo;
    GIFView gifView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gifView = (GIFView)findViewById(R.id.gifview);
        textViewInfo = (TextView)findViewById(R.id.textinfo);

        String stringInfo = "";
        stringInfo += "Duration: " + gifView.getMovieDuration() + "\n";
        stringInfo += "W x H: "
                + gifView.getMovieWidth() + " x "
                + gifView.getMovieHeight() + "\n";

        textViewInfo.setText(stringInfo);

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

6. edit AndroidManifest.xml set pada activity, android:hardwareAccelerated=“false”

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.agusharyanto.displaygifanimation" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" android:hardwareAccelerated="false"  >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

7. Run Projectnya

Semoga Bermanfaat

Salam Hangat Developer Android

Agus Haryanto

Referensi

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

Share

2 comments to Belajar Android Menampilkan Gambar Animasi Gif

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free