Tạo Splash Screen trong Android chuẩn mực nhất

Splash screen là trải nghiệm đầu tiên khi người dùng mở ứng dụng của bạn. Nó thường được dùng để hiển thị tiến trình nạp dữ liệu hoặc đơn giản là quảng cáo những tính năng nổi bật nhất.

Splash Screen là gì?

Như chúng ta biết, Splash screen là màn hình đầu tiên mà người dùng thấy khi sử dụng ứng dụng. Nếu trải nghiệm đầu tiên này mà kém, nó sẽ ảnh hưởng rất lớn đến sự tin tưởng của người dùng.

Thông thường, màn hình này sẽ tự động thiết lập một số cài đặt mặc định trước khi vào trong ứng dụng.

Theo hướng dẫn của Google, màn hình Splash áp dụng một design pattern gọi là Launch Screen. Bạn có thể đọc thêm ở đây.

Tuy nhiên, không phải nhà phát triển nào cũng tạo Splash screen chuẩn như hướng dẫn. Rất nhiều bạn khi phát triển ứng dụng lại lạm dụng màn hình này. Điều đó vô tình làm giảm trải nghiệm người dùng, gây ấn tượng xấu.

Những sai lầm phổ biến

Theo như thống kê, sai lầm phổ biến nhất mà nhiều bạn hay làm đó là sử dụng màn hình Splash chỉ để hiển thị logo ứng dụng hay ảnh thương hiệu trong một vài giây mà không làm gì cả.

Tuy nhiên, như các bạn thấy, với góc nhìn của người sử dụng, điều này chỉ làm mất thời gian mà thôi. Vì người dùng đâu có quan tâm đến mấy logo hay ảnh thương hiệu. Họ chỉ quan tâm đến việc ứng dụng có giải quyết được vấn đề của họ không mà thôi.

Vì vậy, các bạn nên hạn chế cách làm màn hình Splash kiểu này nhé!

Cách tạo splash screen đúng chuẩn

Cách thiết kế đúng cho màn hình Splash có một số khác biệt nhỏ so với cách làm trên. Cách tiếp cận mới đó là không sử dụng layout như các Activity thông thường.

Thay vào đó sẽ sử dụng theme background để tạo hình nền hay layout cho màn hình Splash.

💦 Dành cho bạn đang làm React Native: [React Native] Tạo Splash screen chuyên nghiệp

Cách thực hiện tạo splash

Đầu tiên, chúng ta sẽ tạo một file xml drawable có tên là splash_background.xml trong thư mục res/drawable.

<?xml version=”1.0" encoding=”utf-8"?>
 <layer-list xmlns:android=”http://schemas.android.com/apk/res/android">
 <item android:drawable=”@color/colorPrimary” />
 <item>
 <bitmap
 android:gravity=”center”
 android:src=”@mipmap/ic_launcher” />
 </item>
</layer-list>

Bước tiếp theo, chúng ta sử dụng xml trên làm background của theme ứng dụng. Các bạn sửa trong style.xml nhé.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <!-- Splash Screen theme. -->
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
    </style>
</resources>

Kế tiếp, cấu hình lại file AndroidManifest.xml và thêm style mà chúng ta đã sửa ở trên vào thẻ SplashActivity.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidjavapoint.splashscreen">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".HomeActivity" />
    </application>
</manifest>

Cuối cùng, chúng ta tạo SplashActivity.java mà không cần layout. Activity này đơn giản chỉ redirect thẳng đến HomeActivity.

package com.androidjavapoint.splashscreen;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Start home activity
        startActivity(new Intent(SplashActivity.this, HomeActivity.class));
        // close splash activity
        finish();
    }
}

Mình lưu ý là với cách tiếp cận này chúng ta không sử dụng hàm setContentView() để nhồi layout cho Activity.  Thay vào đó, layout của Splash Activity sẽ hiển thị từ theme mà chúng ta đã cấu hình ở trên. Do đó, cách này sẽ nhanh hơn là tạo một layout.

💦 Gợi ý: Tìm hiểu kỹ hơn về cách thiết kế layout trong Android

Nếu bạn để ý, thời gian hiển thị màn hình Splash sẽ chính xác với thời gian ứng dụng thực hiện công việc.

#Tạm kết

Mình hi vọng bài viết này sẽ giúp bạn thiết kế màn hình splash với trải nghiệm tốt nhất cho người dùng.

Nếu có bất kỳ lỗi hoặc có vấn đề gì trong quá trình làm, hãy comment bên dưới nhé!

Các bạn tải source code bài hướng dẫn ở đây nhé GitHub.

Bạn đã từng tạo splash screen cho ứng dụng bao giờ chưa? Nếu có thì comment ý kiến của bạn bên dưới nhé.

💦 Đọc thêm bài viết hướng dẫn Android:

• Sử dụng Data Binding trong Android hiệu quả
• 8 kỹ thuật tối ưu hóa mã nguồn Java khi lập trình Android
• SQLite trong Android – Làm sao để sử dụng hiệu quả nhất

​Đăng kí nhận sách ​dạy ​kiếm tiền từ ứng dụng di động

​Bạn đã bao giờ tự hỏi Hà Đông kiếm tiền tỷ từ ​Flappy Bird như nào không? ​Bạn biết cách lập trình nhưng lại không biết làm sao để kiếm được tiền từ nó?

Hiện cuốn sách đang bán rất chạy trên Amazon với giá 9.99$. Bạn có muốn nhận cuốn sách này để học kiếm tiền không? ​Đăng kí để nhận miễn phí nhé

DOWNLOAD