Tips Membuat SplashScreen Dengan Eclipse

7010 views

DroidMu dot com ~ Pada tulisan yang lalu, kita telah belajar membuat aplikasi webview (baca : Cara Mudah Membuat WebView). Tulisan kali ini kita akan belajar membuat SpashScreen. Untuk membuat SplashScreen cukup mudah dilakukan dengan eclipse. Tidak membutuhkan banyak source code untuk membuatnya. Berikut ini Tips Membuat SplashScreen Dengan Eclipse yang akan kita pelajari dan praktekkan bersama.

Tips Membuat SplashScreen Dengan Eclipse

Tips Membuat SplashScreen Dengan Eclipse

Tips Membuat SplashScreen Dengan Eclipse

Jika Anda pernah menginstall aplikasi populer semacam facebook, talking tom atau aplikasi dalam negeri gojek. Maka Anda pasti telah melihat SplashScreen. Apa yang dimaksud SplashScreen? SplashScreen biasa muncul pada bagian awal ketika aplikasi baru dibuka. Durasi dari SplashScreen biasanya pendek sekitar 3-5 detik (kalau lama kasihan yang download aplikasinya hehe..).

Menurut saya, fungsi SplashScreen yakni :

  • Untuk pengantar sebelum memasuki halaman utama;
  • Untuk memperkenalkan icon ataupun simbol dari perusahaan pembuat aplikasi (branding);
  • Sebagai pengalih perhatian, maksudnya ketika SplashScreen tersebut muncul maka dibalik itu akan mempersiapkan data yang akan dipanggil melalui koneksi internet;
  • dan terakhir, untuk gaya-gaya an hehe.. .

Nah tips membuat SplashScreen dengan eclipse kali ini bertujuan untuk belajar dan untuk gaya-gaya an biar aplikasinya terlihat keren. Untuk membuatnya, kita akan membuat SplashScreen dengan durasi 4 detik. Kalau dalam bahasa pemrograman java (eclipse), durasi 1 detik sama dengan 1000 (dikenal dengan satuan millisecond).

Langkah Pertama

Buat sebuah project aplikasi, misal saya beri nama DroidMu SplashScreen. Project ini memiliki beberapa komponen yaitu :

  • memiliki 2 buah activity, yakni MainActivity.java dan DroidMuSS.java;
  • memiliki 2 buah layout, yakni activity_main.xml dan activity_droidmuss.xml;
  • menambah file xml pada folder values dengan nama color.xml;
  • untuk icon, kita gunakan icon launcher.

Penjelasan :

Activity yang dipakai 2 buah sebab menyesuaikan dengan layout yang juga 2 buah. Pada waktu aplikasi dibuka maka akan memanggil activity DroidMuSS.java yang akan membuka layout activity_droidmuss.xml. Setelah 4 detik maka akan memanggil MainActivity.java dengan layout activity_main.xml.

Untuk tambahan file xml yakni color.xml digunakan untuk pengaturan warna background pada SplashScreen. Untuk warna background tersebut kita akan memakai warna cyan dengan kode warna #00FFFF (untuk kode warna bisa dilihat di sini). Sedangkan icon yang akan muncul kita panggil icon launcher default, yakni ic_launcher pada drawable.

Langkah Kedua

Komponen pada langkah pertama tersebut, kita buat color.xml terlebih dahulu. Buka folder res, klik kanan pada folder values pilih New - Android XML File.

langkah Membuat color.xml

langkah Membuat color.xml

Setelah itu isikan nama pada kolom File dengan "color" dan klik finish. Nah Anda telah mempunyai file color.xml pada folder values.

Langkah Membuat color.xml

Langkah Membuat color.xml

Kemudian isi atau ganti dengan kode berikut ini lalu simpan.

  • <?xml version="1.0" encoding="utf-8"?>
    <resources>
     <color name="bg_droidmuss">#00FFFF</color> 
    </resources>

Kode di atas maksudnya mendefinisikan nama bg_droidmuss dengan nilai  #00FFFF yang akan menghasilkan warna cyan.

Langkah Ketiga

Membuat layout activity_droidmuss.xml. Buka folder res, klik kanan pada folder layout dan pilih New - Android XML File sama seperti langkah membuat color.xml. Kemudian isikan nama activity_droidmuss pada kolom File dan klik finish.

Langkah Membuat activity_droidmuss.xml

Langkah Membuat activity_droidmuss.xml

Ubah source code pada activity_droidmuss.xml dengan kode berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_droidmuss" >

<ImageView
android:id="@+id/imgLogoDroidMuSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/ic_launcher" />

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textSize="16sp"
android:textColor="#000000"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:text="http://droidmu.com" />

</RelativeLayout>

Penjelasan :

Source code di atas secara garis besar kita melakukan pengaturan background atau latar belakang dengan warna cyan. Dapat kita lihat dengan kode ini yang memanggil file color.xml dengan nama bg_droidmuss.

android:background="@color/bg_droidmuss"

Pada activity_droidmuss.xml tersebut kita memiliki 2 buah komponen yakni ImageView dan TextView. Pada ImageView akan menampilkan gambar default launcher yang ditunjukkan dengan kode ini.

android:src="@drawable/ic_launcher"

Sedangkan pada TextView akan menampilkan tulisan http://droidmu.com dengan pengaturan ukuran huruf 16, warna hitam (#000000), posisi rata tengah dan ditempatkan pada bagian bawah.

android:textSize="16sp"
android:textColor="#000000"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:text="http://droidmu.com"

Langkah Keempat

Buka activity_main.xml dan ubah kode nya seperti di bawah ini.

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

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:gravity="center_horizontal"
android:text="Contoh SplashScreen \n oleh \n DroidMu dot com" />

</RelativeLayout>

Penjelasan :

Pada layout activity_main.xml di atas kita menyisipkan satu buah komponen yakni TextView dengan spesifikasi ukuran huruf 16, posisi rata tengah dengan isi text Contoh SplashScreen \n oleh \n DroidMu dot com. Fungsi karakter "\n" pada text tersebut yakni seperti kita menekan enter atau new line.

Langkah Kelima

Setelah melakukan pengaturan pada layout, langkah kelima ini melakukan pengaturan pada Activity (class). Buat class activity baru dengan buka folder src dan klik kanan package dan pilih New - Class. Dalam hal ini package yang saya buat memiliki nama com.droidmu.droidmusplashscreen.

Langkah Membuat Activity Class

Langkah Membuat Activity Class

Isi pada kolom name dengan DroidMuSS lalu tekan finish

Langkah Membuat Activity Class

Langkah Membuat Activity Class

Setelah itu isi atau ganti source code dengan kode berikut ini


package com.droidmu.droidmusplashscreen;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class DroidMuSS extends Activity {

private static int Durasi = 4000;

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

new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent i = new Intent(DroidMuSS.this, MainActivity.class);
startActivity(i);
finish();
}
}, Durasi);
}

}

Penjelasan :

private static int Durasi = 4000;

Kita mendefinisikan terlebih dahulu Durasi, dalam hal ini ditentukan sebesar 4 detik yang dalam millisecond bernilai 4000. Durasi ini memiliki tipe data integer.

setContentView(R.layout.activity_droidmuss);

Tentukan juga ContentView, yang mengarah pada layout activity_droidmuss.xml

public void run() {
Intent i = new Intent(DroidMuSS.this, MainActivity.class);
startActivity(i);
finish();
}

Kode di atas akan dijalankan ketika durasi timer sudah nol (habis), yang memanggil activity MainActivity.java dengan perintah intent. Sedangkan activity yang sedang berjalan DroidMuSS.java ditutup dengan perintah finish();

Langkah Keenam

Buka activity MainActivity.java dan ganti dengan kode di bawah ini.


package com.droidmu.droidmusplashscreen;

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

public class MainActivity extends Activity {

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

}

Source code untuk MainActivity.java di atas dibuat seringkas mungkin. Dengan hanya memberi perintah setContentView untuk menampilkan layout activity_main.xml.

Langkah Ketujuh

Seperti biasa langkah ini adalah langkah terakhir. Yakni dengan melakukan pengaturan pada AndroidManifest.xml. SplashScreen pada dasarnya memiliki tampilan fullscreen, jadi tidak ada title ba pada bagian atas. Selain itu kita panggil terlebih dahulu activity DroidMuSS.java sebab tampilan layout SplashScreen berada pada activity_droidmuss.xml.

Ubah kode pada AndroidManifest.xml menjadi seperti di bawah ini.


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

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

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.droidmu.droidmusplashscreen.DroidMuSS"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.NoTitleBar" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- Main activity -->
<activity
android:name="com.droidmu.droidmusplashscreen.MainActivity"
android:label="@string/app_name" >
</activity>
</application>

</manifest>

Penjelasan :

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

Kode di atas untuk menghilangkan title bar pada bagian atas layout activity_droidmuss.xml

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

Kode di atas untuk memanggil activity DroidMuSS.java ketika aplikasi pertama kali dijalankan. Hal tersebut dapat diketahui bahwa perintah intent-filter masih dalam lingkup activity DroidMuSS.

<activity
android:name="com.droidmu.droidmusplashscreen.MainActivity"
android:label="@string/app_name" >
</activity>

Kode di atas digunakan untuk melakukan register activity MainActivity.java ke dalam AndroidManifest.xml. Hal ini agar MainActivity.java dapat dijalankan.

Simpan terlebih dahulu project kemudian jalankan maka akan muncul SplashScreen selama 4 detik dan kemudian menampilkan activity_main.xml. Cukup mudah bukan tips membuat SplashScreen dengan eclipse ini. Anda dapat mengkombinasikan dengan tutorial membuat webview sehingga sebelum webview tampil terlebih dahulu ada SplashScreen nya.

Demikian tulisan Tips Membuat SplashScreen Dengan Eclipse kali ini. Silahkan langsung dipraktekkan ya, jadi aplikasi yang Anda buat akan terlihat lebih keren karena ada SplashScreen nya.

 

Leave a reply "Tips Membuat SplashScreen Dengan Eclipse"

Author: 
    author