Android : How to create splash screen
Splash Screen หรือ Splash page คือ หน้าจอที่เรามักใช้ในการแสดงรูปภาพ LOGO, Version, Promote Content หรือทำเป็นหน้า Loading เป็นต้น ก่อนเข้าสู่โปรแกรมจริงๆ
มีขั้นตอนการสร้างง่ายๆดังนี้
1. เตรียมรูป Splash Screen
ปกติจะเป็นรูปเต็มหน้าจอของอุปกรณ์ เพราะฉะนั้นถ้าจะให้รองรับกับอุปกรณ์มือถือที่มี resolution แตกต่างกัน เราสามารถเตรียมรูปหลายๆขนาดใส่ใน drawable/ ( รายละเอียดอ่านได้จาก Android : Drawable resolution ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi )
ในตัวอย่างเตรียมรูปชื่อ “splash.png” เอาไปวางไว้ที่
- res/drawable/mdpi
- res/drawable/hdpi
- res/drawable/xhdpi
- res/drawable/xxhdpi
2. Modify “AndroidManifest.xml”
เพิ่ม Activity “SplashActivity” แล้วกำหนดให้เป็น Activity แรกที่ทำงานโดยการย้าย <intent-filter>…</intent-filter> จาก “MainActivity” เดิมมาอยู่ใน “SplashActivity” แทน ดังตัวอย่าง
<application … <activity <activity … |
3. สร้าง SplashActivity.java
เข้าไปที่เมนู Java -> Right Click -> New -> Java Class แล้วสร้าง SplashActivity.java ขึ้นมา โดยในไฟล์ใส่โค้ดนี้เลยครับ
package com.example.freeway.bannerads;
import android.app.Activity; public class SplashActivity extends Activity { /** Duration of wait **/ @Override /* New Handler to start the Menu-Activity } } |
จากตัวอย่าง เราต้องแก้ชื่อ Package Name ด้วยครับ โดยในโค้ดจะมีการหน่วงเวลาของ Splash Screen ไว้ที่ 10 sec. ถ้าต้องการปรับเปลี่ยนเวลาใหม่แก้ที่ SPLASH_DISPLAY_LENGTH = … ; และในโค้ดจะไปเรียก Layout “activity_splash” จากคำสั่งบรรทัดนี้
setContentView(R.layout.activity_splash); |
4. สร้าง layout “activity_splash.xml”
จากเมนู res -> layout -> right click -> New -> Layout resource file สร้าง LinearLayout activity_splash
โดยใส่โค้ดดังนี้
<?xml version=”1.0″ encoding=”utf-8″?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent”><ImageView android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:id=”@+id/imageView” android:scaleType=”centerCrop” android:src=”@drawable/splash” /> </LinearLayout> |
เพียงเท่านี้เราก็ลองรัน application test ได้เลยครับ Splash Screen งามๆ จะถูกนำเสนอขึ้นมาเพิ่มสีสันและลูกเล่นก่อนเข้าสู่แอปปลิเคชันของเราครับ