Mebuat Program Animasi dengan XML di Android Part 1

Membuat animasi untuk antarmuka aplikasi Anda akan memberikan nuansa berkualitas tinggi untuk aplikasi android. Animasi dapat dilakukan melalui XML atau kode android. Dalam tutorial ini akan menjelaskan bagaimana melakukan animasi menggunakan notasi XML. Animasi yang dibuat adalah animasi dasar android seperti fade in, fade out, skala, memutar, geser ke atas, geser ke bawah dll.

Pada latihan ini, kita akan coba membuat program Animasi Sederhana. Buat Project Baru ( Ikut langkah seperti di artikel  ( Membuat Project Pertama di Android ) Konfigurasinya adalah sebagai berikut :

• Application Name   : MembuatAnimasi
• Project Name         : MembuatAnimasi
• Package Name       : com.amrid.membuatanimasi
• Minimum SDK       : API 19 (Android 4.4)
• Target SDK           : API 19 (Android 4.4)
• Compile with          : API 19 (Android 4.4)
• Theme                    : none
• Activity Name        : ActivityMain
• Layout Name         : activity_main

Setelah terbentuk project MembuatAnimasi. Selanjutnya, kita akan bermain dengan sebuah layout (activity_main.xml) yang berada di folder res/layout.

Pertama Ketikan/Salin Kode Berikut (jangan hiraukan dulu bila ada tanda kode yang salah):

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnFadeIn"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Fade In" />
            <Button
                android:id="@+id/btnFadeOut"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Fade Out" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnCrossFade"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Cross Fade" />
            <Button
                android:id="@+id/btnBlink"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Blink" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnZoomIn"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Zoom In" />
            <Button
                android:id="@+id/btnZoomOut"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Zoom Out" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnRotate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Rotate" />
            <Button
                android:id="@+id/btnMove"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Move" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >        
            <Button
                android:id="@+id/btnSlideUp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Slide Up" />
            <Button
                android:id="@+id/btnSlideDown"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Slide Down" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnBounce"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Bounce" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnSequential"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Sequential Animation" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <Button
                android:id="@+id/btnTogether"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="Together Animation" />
        </TableRow>
    </TableLayout>
</ScrollView>

Kedua buka file MainActivity.java yang ada di folder src/com.amrid.membuatanimasi dan ketik/salin kode berikut :

package com.amrid.membuatanimasi;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends Activity {
Button btnFadeIn, btnFadeOut, btnCrossFade, btnBlink, btnZoomIn,
btnZoomOut, btnRotate, btnMove, btnSlideUp, btnSlideDown,
btnBounce, btnSequential, btnTogether;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnFadeIn = (Button) findViewById(R.id.btnFadeIn);
btnFadeOut = (Button) findViewById(R.id.btnFadeOut);
btnCrossFade = (Button) findViewById(R.id.btnCrossFade);
btnBlink = (Button) findViewById(R.id.btnBlink);
btnZoomIn = (Button) findViewById(R.id.btnZoomIn);
btnZoomOut = (Button) findViewById(R.id.btnZoomOut);
btnRotate = (Button) findViewById(R.id.btnRotate);
btnMove = (Button) findViewById(R.id.btnMove);
btnSlideUp = (Button) findViewById(R.id.btnSlideUp);
btnSlideDown = (Button) findViewById(R.id.btnSlideDown);
btnBounce = (Button) findViewById(R.id.btnBounce);
btnSequential = (Button) findViewById(R.id.btnSequential);
btnTogether = (Button) findViewById(R.id.btnTogether);
/*
* Buttons click events
*/
// fade in
btnFadeIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, FadeInActivity.class);
startActivity(i);
}
});
// fade out
btnFadeOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, FadeOutActivity.class);
startActivity(i);
}
});
// cross fade
btnCrossFade.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this,
CrossfadeActivity.class);
startActivity(i);
}
});
// blink
btnBlink.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, BlinkActivity.class);
startActivity(i);
}
});
// Zoom In
btnZoomIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, ZoomInActivity.class);
startActivity(i);
}
});
// Zoom Out
btnZoomOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, ZoomOutActivity.class);
startActivity(i);
}
});
// Rotate
btnRotate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, RotateActivity.class);
startActivity(i);
}
});
// Move
btnMove.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, MoveActivity.class);
startActivity(i);
}
});
// Slide Up
btnSlideUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, SlideUpActivity.class);
startActivity(i);
}
});
// Slide Down
btnSlideDown.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this,
SlideDownActivity.class);
startActivity(i);
}
});
// Slide Down
btnBounce.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, BounceActivity.class);
startActivity(i);
}
});
// Sequential
btnSequential.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this,
SequentialActivity.class);
startActivity(i);
}
});

// Together
btnTogether.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this,
TogetherActivity.class);
startActivity(i);
}
});
}
}

Ketiga buka file AndroidManifest.xml yang ada di luar folder ketik/salin kode berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amrid.membuatanimasi"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="19"
        android:targetSdkVersion="19" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amrid.membuatanimasi.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.amrid.membuatanimasi.FadeInActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.FadeOutActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.CrossfadeActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.BlinkActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.ZoomInActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.ZoomOutActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.RotateActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.MoveActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.SlideUpActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.SlideDownActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.BounceActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.SequentialActivity"
            android:label="@string/app_name" />
        <activity
            android:name="com.amrid.membuatanimasi.TogetherActivity"
            android:label="@string/app_name" />
    </application>
</manifest>

Bersambung ke Mebuat Program Animasi dengan XML di Android Part 2