by Unknown 21.01 0 komentar Android

Android | Menbuat Splash Screen Dengan Animasi

Setelah kemarin kita telah belajar membuat aplikasi pertama hello world + pindah Activity, kali ini kita sharing cara membuat Splash screen + Animation,
Kurang lebih beginilah tampilannya :

Nah untuk gambar bisa ambil yang ini saja:

Pasti sudah bisa kan caranya membuat project baru android? kan udah di bahas di post sebelumnya? kalo belum bisa di lihat lagi di sini.

Nah kita mulai, Pertama kita buat Project Baru dulu dengan Nama SplashAnimationmin SDK 2.3 target dan compile android 2.3.3 saja, dan untuk Layout dan Class kita kasih nama Splash, nah untuk lebih jelasnya apa saja yang perlu di tambahkan liat gambar:

Kita buat layoutnya dulu saja. di sini hanya ada 2 layout yaitu untuk splash dan layout Target.
untuk Layout splash.xml dulu, Oh iya jangan lupa masukan gambar yang mau di tampilkan ke folder Drawable ya?
splash.xml

<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=".Splash" >

    <FrameLayout
        android:id="@+id/FrameLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <ImageView
            android:id="@+id/splashimg"
            android:layout_width="match_parent"
            android:layout_height="106dp"
            android:layout_gravity="center"
            android:layout_marginBottom="50dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/logocoretan" />

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

    </FrameLayout>

</RelativeLayout>

layout main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logocoretan" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome To Menu"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Kalo masih ada eror coba cek di and android:src="@drawable/logocoretan" logocoretan adalah nama image di folder drawable yang kita tambahkan tadi.

Sekarang kita buat folder anime, caranya klik kanan pada folder res kemudian new-->folder kemudian kasih nama anim nah di folder anim kita buat 2 xml kita beri nama alhpa.xml dan translate.xml. untuk script bisa di lihat di sini :
alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="3100" />

translate.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android">
 
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="0%"
    android:fromYDelta="200%"
    android:toYDelta="0%"
    android:duration="2000"
    android:zAdjustment="top" />
</set>

alpha di sini untuk animasi seperti fade in, sedangkan translate adalah muncul dari bawah ke atas.

Untuk selanjutnya kita buat classnya, cukup Class Splash.java dan Main.java
Splash.java

package fai.coretan.splashanimation;


import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ProgressBar;

public class Splash extends Activity {

 protected boolean _active = true;
    protected int _splashTime = 3000;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.splash);
  StartAnimations();//Menjalankan Method Start Animasi
  
  Thread splashThread = new Thread() {
   //Timer Splash
   public void run() {
    try{
     int waited = 0;
      while(_active && (waited < _splashTime)) {
                         sleep(100);
                         if(_active) {
                             waited += 100;
                         }
                     }
                 } catch(InterruptedException e) {
                     // do nothing
                 } finally {
                     finish();
                     Intent newIntent=new Intent(Splash.this, Main.class);//pindah Activity Main
               startActivityForResult(newIntent,0);
                 }
             }
         };
         splashThread.start();
     }
  
     @Override
     public boolean onTouchEvent(MotionEvent event) {
         if (event.getAction() == MotionEvent.ACTION_DOWN) {
             _active = false;
         }
         return true;
     }
 



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


 //Disini Deklarasi Animasinya(StartAnimation)
 private void StartAnimations() {
  // TODO Auto-generated method stub
  //Animasi untuk Frame Layout mengunakan alpha.xml
  Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);
        anim.reset();
        FrameLayout l=(FrameLayout) findViewById(R.id.FrameLayout1);
        l.clearAnimation();
        l.startAnimation(anim);
        
      //Animasi untuk ProgressBar1 mengunakan alpha.xml
        Animation anim1 = AnimationUtils.loadAnimation(this, R.anim.alpha);
        anim1.reset();
        ProgressBar l1=(ProgressBar) findViewById(R.id.progressBar1);
        l1.clearAnimation();
        l1.startAnimation(anim);
        
      //Animasi untuk Gambar mengunakan Translate.xml
        anim = AnimationUtils.loadAnimation(this, R.anim.translate);
        anim.reset();
        ImageView iv = (ImageView) findViewById(R.id.splashimg);
        iv.clearAnimation();
        iv.startAnimation(anim);
 }
    

}

Main.java

package fai.coretan.splashanimation;

import android.app.Activity;
import android.os.Bundle;

public class Main extends Activity {
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 }
}

Jangan lupa Update di AndroidManifest.xml
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="fai.coretan.splashanimation"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="10" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="fai.coretan.splashanimation.Splash"
            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="Main"></activity>
    </application>

</manifest> 

Kalo sudah selesai coba di jalankan ya..

• Download Source