Membuat Aplikasi Splash Screen di Android

post sampul6

Halo sahabat codenesia, kami akan membagikan tutorial mengenai bagaimana caranya membuat aplikasi splash screen di android. Bagi anda yang lagi ngoding membuat sebuah aplikasi android dan anda ingin menambahkan sentuhan splash screen di aplikasi anda, tetapi anda bingung bagaimana caranya membuat splash screen, maka disinilah anda bisa belajar tentang hal itu. Ada yg belum tau apa itu splash screen? . Kalau anda pernah gunain aplikasi chat line, pasti ketika pertama kali membuka aplikasi line, maka layar smartphone anda akan menampilkan logo line yang berlatarbelakang hijau, beberapa detik kemudian baru masuk ke aplikasi inti dari line. Nah itulah yg disebut splash screen. Sebenarnya membuat aplikasi splash screen tidaklah membutuhkan baris kode yang banyak, hanya beberapa puluh baris kode saja. Langsung saja kita mulai tutorialnya

Pertama kita buat android application project dulu, kalau ada yg lupa bagaimana membuatnya silahkan ikuti langkah di bawah ini :

  1. Buka software eclipse
  2. Pilih menu file kemudian klik new kemudian pilih android application project
  3. Isikan isiannya. Kemudian klik Next
  4. Kemudian klik Next
  5. Kemudian klik Next
  6. Lalu klik Next
  7. Kemudian klik Finish

Konsep dalam pembuatan aplikasi tutorial ini sebenarnya simple, hanya menggunakan CountDown dan menggunakan intent untuk pindah activity. Dalam tutorial aplikasi kali ini, kita membutuhkan 2 layout (file .xml) dan 2 class Java (file .java) . Ketika kita membuat android application android project, maka secara default telah ada 1 layout dan 1 class java, maka kita hanya perlu menambahkan 1 file layout dan 1 class java. Kemudian mari kita buat 1 buah file layout xml. Caranya cukup mudah yaitu :

  1. klik kanan folder layout
  2. pilih new
  3. lalu pilih android xml file
  4. kemudian ketik nama file “menu_utama”
  5. klik finish

Oke sekarang kita sudah mempunyai 2 layout yaitu activity_main.xml dan menu_utama.xml. Nah rencananya kita akan menaruh splash screen di activity_main.xml yang nantinya berisi imageview. Kemudian kita akan menjadikan menu_utama.xml sebagai tampilan menu utama pada aplikasi yang akan kita isi 4 buah button. Kemudian kita akan membuat class baru yang akan kita beri nama ‘MenuUtama’ (tanpa tanda petik ya). Caranya mudah yaitu double klik folder src, nah situ ada folder atau package yang berawalan dengan nama “com.”. Nah silahka klik kanan folder tersebut, lalu pilih new kemudian klik class. Kemudian isikan kolom name dengan kata ‘MenuUtama’ (tanpa tanda petik ya). Selanjutnya klik finish.

Eh jangan lupa ya, silahkan save gambar dibawah ini dan copas ke folder drawable-hdpi. Untuk melihat folder drawable-hdpi, silahkan double klik folder res

logo_splash

Kode activity_main.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"
    android:background="#53A4D0">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/logo_splash" />

</RelativeLayout>

 

Kode menu_utama.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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="121dp"
        android:text="Menu App 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:text="Menu App 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_centerVertical="true"
        android:text="Menu App 3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button3"
        android:layout_alignBottom="@+id/button3"
        android:layout_alignRight="@+id/button2"
        android:text="Menu App 4" />

</RelativeLayout>

 

Nah sekarang kita akan membahas logic programming nya (Java). Kita akan menaruh splash screen di MainActivity.java, di MainActivity.java kita akan menaruh code count down dan kode untuk pindah activity. Langkah pertama, kita akan membuat class CountDown yang mengextends CountDownTimer. Seperti ini kodenya

public class CountDown extends CountDownTimer {
        // TODO Auto-generated constructor stub<br />
        public CountDown(long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
     }
        @Override
    	public void onFinish() {
    		// TODO Auto-generated method stub
    	}
    	@Override
    	public void onTick(long millisUntilFinished) {
    		// TODO Auto-generated method stub
    	}
  }

 

Selanjutnya kita akan memanggil class CountDown ini dan dipanggil di class MainActivity. Taruhlah code di bawah ini tepat di bawah code setContentView(R.layout.activity_main);

CountDown count = new CountDown(3000, 1000);
       count.start();

Kode diatas yaitu kode untuk mendeklarasikan sebuah variabel count yang disetting dengan timer waktu coundown 3000 ms (mili second) atau 3 s (3 sekon atau 3 detik). Jadi nantinya splash screen akan tampil selama 3 detik, kemudian berpindah ke activity menu utama dan tampil menu utama dari aplikasi yang telah kita buat. Kode count.start(); digunakan untuk memulai menjalankan Count Down Timer. Jika kode count.start(); dihapus maka Count Down Timer tidak akan berjalan. Selanjutnya kita akan membuat sebuah fungsi yang kita beri nama pindahActivity yang berfungsi untuk berpindah ke activity menu utama dari aplikasi yang telah kita buat. Copas kode dibawah ini dan taruh kode nya dibawah class MainActivity atau di atas class CountDown

private void pindahActivity(){
   	 Intent intent=new Intent(this, MenuUtama.class);
   	  startActivity(intent);
   }

Kemudian kita akan memanggil fungsi pindahActivity di fungsi onFinish di class CountDown. Berikut ini kode lengkap class CountDown setelah kita ubah atau kita tambahi dengan memanggil fungsi pindahActivity

public class CountDown extends CountDownTimer {
        // TODO Auto-generated constructor stub<br />
        public CountDown(long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
     }
        @Override
    	public void onFinish() {
    		// TODO Auto-generated method stub
      	  pindahActivity();	  
    	}
        
    	@Override
    	public void onTick(long millisUntilFinished) {
    		// TODO Auto-generated method stub
    	}
  }

 

Berikut ini kode lengkap dari MainActivity.java

package com.codenesia.splashscreen;

import android.os.Bundle;
import android.os.CountDownTimer;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CountDown count = new CountDown(3000, 1000);
       count.start();
    }
    
    private void pindahActivity(){
   	 Intent intent=new Intent(this, MenuUtama.class);
   	  startActivity(intent);
   }
    
    public class CountDown extends CountDownTimer {
        // TODO Auto-generated constructor stub<br />
        public CountDown(long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
     }
        @Override
    	public void onFinish() {
    		// TODO Auto-generated method stub
      	  pindahActivity();	  
    	}
        
    	@Override
    	public void onTick(long millisUntilFinished) {
    		// TODO Auto-generated method stub
    	}
  }

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

 

Owh iya lupa, tadi kita sudah membuat class MenuUtama.java, nah sekarang kita ubah kode MenuUtama.java seperti kode dibawah ini

package com.codenesia.splashscreen;

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

public class MenuUtama extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu_utama);
    }
    
}

Perlu diingat ya sahabat codenesia, jika terjadi error pada kode package com.codenesia.splashscreen; maka kalian jangan bingung, ubahlah kode tersebut sesuai nama package dari project aplikasi anda, gimana cara mengetahuinya? Silahkan anda double klik folder src, disitu anda akan menemukan folder yang berawalan dengan nama “com.” . Nah folder dengan nama com.bla bla bla itulah nama package anda, misalnya nama package project aplikasi anda adalah com.example.splashscreen, maka ubahlah kode package com.codenesia.splashscreen; menjadi package com.example.splashscreen;

Selanjutnya, supaya fungsi untuk berpindah activity bisa berjalan dan tidak error, maka tambahkan kode dibawah ini di file AndroidManifest.xml, silahkan anda buka AndroidManifest.xml, kemudian lihat dibagian bawah ada menu Application, Instrumentation,  Permisions dan AndroidManifest.xml, silahkan anda klik AndroidManifest.xml, maka anda akan melihat kode xml, taruhlah kode dibawah ini tepat di bawah kode </activity> dan diatas kode </application>

<activity android:name=".MenuUtama">
        </activity>

 

Masih di AndroidManifest.xml, kita akan menjadikan fullscreen pada MainActivity, caranya tambah kode dibawah ini dan letakkan dibawah kode android:name=”nama_package_anda.MainActivity”, misal saja nama package projek aplikasi anda adalah com.example.splashscreen, maka kodenya seperti ini android:name=”com.example.splashscreen.MainActivity”. Nah karena nama package projek kami beri nama com.codenesia.splashscreen, maka kodenya seperti ini android:name=”com.codenesia.splashscreen.MainActivity”. Sudah paham kan? Kemudian taruhlah kode dibawah ini tepat dibawah kode android:name=”com.codenesia.splashscreen.MainActivity”

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

 

Jika anda masih bingung di AndroidManifest.xml, berikut ini kode lengkapnya supaya anda tidak bingung lagi dengan peletakan kodenya

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.codenesia.splashscreen.MainActivity"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
            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=".MenuUtama">
        </activity>
    </application>

</manifest>

 

Nah selesai sudah tutorial kali ini yang membahas mengenai bagaimana caranya membuat aplikasi splash screen di android. Berikut ini screenshoot hasil aplikasinya

Screenshot_2015-06-22-06-07-26

Screenshot_2015-06-22-06-07-35

 

3 thoughts on “Membuat Aplikasi Splash Screen di Android

Leave a Reply

Your email address will not be published. Required fields are marked *