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