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

6
Dịch vụ dạy kèm gia sư lập trình

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:

Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng
Bài trướcXây dựng ứng dụng OCR sử dụng Machine Learning
Bài tiếp theoQuản lý State với React Hooks – Không cần Redux hay Context API
Sơn Dương
Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường chẳng xin được việc đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé !

6
Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Mới nhất Cũ nhất Nhiều voted nhất
Thông báo
Phan
Guest
Phan

Mình thiết kế Main Activity cho nó thành Splash screen luôn, xong nó ko chạy (hoặc chạy quá nhanh?) rồi qua màn hình đăng nhập luôn.

Tuan
Guest
Tuan

Bạn có thể làm 1 ví dụ về splash với màn hình đăng nhập và màn hình main ko bạn

Danh Tran
Member
Danh Tran

Hello, cho mình hỏi: Làm sao để có thể load dữ liệu từ Splash Screen vì spalsh sreen chạy xong thì nó mới vào onCreate() ? Với lại ứng dụng càng lớn thì splash screen càng lâu?