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.
Nội dung chính của bài viế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:
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.
Để chứng minh MainActivity có chạy hay không thì bạn có thể đặt Log. Ngoài ra, để Splash screen hiển thị một lúc trước khi vào màn hình login, bạn có thể thêm delay.
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
Hi Tuấn,
Tức là sao nhỉ? Mình sẽ show splash screen trước rồi mới vào màn hình đăng nhập?
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?
Chào bạn Danh,
Mình xin lỗi vì reply chậm trễ nhé.
Bạn có thể implement đoạn load dữ liệu trong SplashActivity, hàm oncreate(). Sau khi load xong dữ liệu thì bạn gọi startActivity(this, HomeActivity.class) để chuyển sang màn hình Home.