Pages

Thursday, December 1, 2016

Tutorial Membuat Splash Screen Animasi dengan Android

Assalamualaikum... Selamat malam, pada postingan kali ini, saya ingin berbagi sedikit ilmu tentang membuat splash screen pada saat membuka aplikasi android yang telah anda buat. Biasanya splash screen tampil sejenak kira-kira 3 detik saja dan berisi nama aplikasi, logo aplikasi atau pun info dari aplikasi itu sendiri.

  

Pada folder res/layout, tambah layout baru dengan nama splash.xml, pastekan koding dibawah ini.
splash.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#7b0800" >
 
    <RelativeLayout
        android:id="@+id/rl"
        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_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="160dp"
            android:src="@drawable/ic_launcher" />
 
        <TextView
            android:id="@+id/textV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/splashimg"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal|top"
            android:height="40dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Blog Codingers Berbagi Tutorial Pemograman Android"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#fff"
            android:textSize="14sp"
            android:textStyle="bold"
            android:typeface="normal" />
 
        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textV"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
 
</RelativeLayout>

Pada folder src/namapackage, tambah class baru dengan nama Splash.java, kemudian pastekan koding berikut.
Splash.java
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
package com.example.splash;
 
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
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;
import android.widget.RelativeLayout;
import android.widget.TextView;
 
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,
       MainActivity.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;
 }
 
 // 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();
  RelativeLayout l = (RelativeLayout) findViewById(R.id.rl);
  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);
 
  anim = AnimationUtils.loadAnimation(this, R.anim.textt);
  anim.reset();
  TextView nm = (TextView) findViewById(R.id.textV);
  nm.clearAnimation();
  nm.startAnimation(anim);
 }
 
}

Pada folder res buat folder baru dengan nama anim, kemudian buat 3 buat file didalamnya. Adapun 3 buah file tersebut seperti dibawah ini.
alpha.xml
?
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3100"
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />
textt.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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:duration="2000"
        android:fromXDelta="0%"
        android:fromYDelta="200%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:zAdjustment="bottom" />
 
</set>
translate.xml
?
1
2
3
4
5
<set xmlns:android="http://schemas.android.com/apk/res/android">
 
    <translate android:duration="2000" android:fromxdelta="0%" android:fromydelta="200%" android:toxdelta="0%" android:toydelta="0%" android:zadjustment="top" xmlns:android="http://schemas.android.com/apk/res/android">
 
</translate></set>

Jalankan aplikasi, maka hasilnya seperti dibawah ini.



Demikianlah sedikit ilmu yang dapat saya sampaikan. Semoga postingan ini membantu.
Posted by at
Labels:
Location: Indonesia

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)