Belajar Android Animasi Ikan Cupang Jalan-jalan

Pada Seri Belajar Android sebelumnya kita sudah belajar tentang memperindah text dengan text effect dan text shadow. Kali ini saya akan coba mengingat kembali masa kecil saya yang suka bermain ikan cupang kalau yang suka nonton upin ipin disebut ikan laga-laga. Buat yang belum tahu ikan cupang bisa lihat videonya disini. Semoga bisa booming juga nih kayak batu akik.

Sesuai dengan judul dalam artikel android ini kita akan membuat project tentang animasi android yang hasilnya berupa ikan cupang-cupang jalan-jalan keliling screen handphone android kita. Yang tertarik mari ikuti langkah-langkah berikut ini.

1. Buat project baru dengan nama AnimasiIkanCupang, klik Next sampai Finish.

2. Pada directory res buat directory baru dengan nama anim.

3. pada directory anim buat file baru dengan nama sequential.xml lalu ketikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >

    <!-- Use startOffset to give delay between animations -->

    <!-- Move -->
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="300"
        android:toXDelta="75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="1100"
        android:toYDelta="70%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="1900"
        android:toXDelta="-75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="2700"
        android:toYDelta="-70%p" />

    <!-- Rotate 360 degrees -->
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/cycle_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="3800"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />

</set>

4. Cari gambar ikan cupang bisa cari di http://www.bibitikan.net/ lalu simpan dengan nama ikancupang.png dan letakan pada directory res/drawable sehingga struktur projectnya menjadi seperti ini.

5. Selanjutnya kita kebagian layoutnya, 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"  tools:context=".MainActivity" android:background="#ffffff">

    <ImageView android:id="@+id/imgIkanCupang"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ikancupang"
        android:layout_alignParentLeft="true"/>

    <Button android:id="@+id/buttonStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jalankan Ikan Cupang"
        android:layout_marginTop="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"/>

</RelativeLayout>

6. Sekarang kita kebagian otak dari aplikasi ini. Edit MainActivity.java lalu ketikkan kode berikut

package net.agusharyanto.animasiikancupang;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity implements Animation.AnimationListener {

    ImageView imageViewIkanCupang;
    Button btnStart;

    // Animation
    Animation animSequential;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageViewIkanCupang = (ImageView) findViewById(R.id.imgIkanCupang);
        btnStart = (Button) findViewById(R.id.buttonStart);

        // load the animation
        animSequential = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sequential);

        // set animation listener
        animSequential.setAnimationListener(this);

        // button click event
        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // start the animation
                imageViewIkanCupang.startAnimation(animSequential);
            }
        });

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // Take any action after completing the animation

        // check for zoom in animation
        if (animation == animSequential) {
        }

    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub

    }

}

7. Sekarang mari kita run projectnya.

Klik tombol JALANKAN IKAN CUPANG, maka ikan cupang akan bergerak mengelilingi screen handphone android kita.

Semoga Bermanfaat

Salam Hangat Developer Android

Agus Haryanto

Trainer, Praktisi Android

Pembicara Seminar IT

Referensi:

Android App Development Tutorials