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

0
60

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

Splash Screen là gì?

Như chúng ta biết thì Splash screen là màn hình đầu tiên mà người dùng sẽ thấy khi sử dụng ứng dụng. Nếu trải nghiệm đầu tiên này mà kém thì sẽ ảnh hưởng rất lớn đến sự tin tưởng của người dùng. Thông thường thì 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 như hướng dẫn chuẩn của Google thì màn hình Splash sẽ ứng dụng một pattern gọi là Launch Screen. Bạn có thể tham khảo ở đâ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 rất dễ lạm dụng màn hình này hoặc thực hiện chưa đúng, điều đó vô tình làm giảm trải nghiệm người dùng , gây ấn tượng nhiều khi còn kém hơn việc không làm màn hình này.

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

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

Tuy nhiên, như các bạn thấy, với góc nhìn của người sử dụng thì điều này chỉ làm mất thời gian 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.

Cách thực hiện

Đầ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 thì chúng ta sử dụng file xml trên  làm background của theme như bên dưới. 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 theme 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 một SplashActivity.java mà không có xml layout. Activity này đơn giản là 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 đó, lúc này 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ẽ làm nhanh hơn là tạo một layout.

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ấu hình.
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 bạn có bất kể lỗi hoặc có vấn đề gì trong quá trình làm thì comment bên dưới nhé!
Các bạn download source code bài hướng dẫn ở đây nhé GitHub.

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

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo