+12

Cách tạo Splash Screen thế nào cho đúng và hiệu quả

Như chúng ta đã biết splash screen (màn hình khởi động ứng dụng) là trải nghiệm và là thứ đầu tiên người dùng nhìn thấy đối với mỗi ứng dụng. Nó thường được sử dụng để hiển thị có thể là Progress hay là một ảnh nền, hay là một icon nào đó. Theo như tài liệu thiết kế Google Material Design thì Splash Screen theo patter được biết đến với tên gọi là Launch Screen. Bạn có thể tìm hiểu thêm ở đây

Những lỗi chung thường gặp

Phần lớn các ứng dụng sử dụng splash screen để giới thiệu và logo thương hiệu hay là một ảnh nào đó trong một vài giây. Nó thực sự không phải là một ý kiến hay cho việc sử dụng splash screen , điều đó khiến lãng phí thời gian của người dùng. Điều đó nên tránh mắc phải. Cùng với hướng tiếp cận như trên bận cần phải làm chủ được vấn đề bị trắng màn hình khi màn hình splash screen xuất hiện.

Cách làm splash screen

Cách làm đúng và hiệu quả đối với splash screen có một chút khác biệt. Thay vì tạo layout với ảnh, logo thì bạn sẽ làm việc với chúng qua theme background

Khi bập bật màn hình nên bạn thường thấy màn hình trắng một lát trước khi ảnh được hiện lên là do layout của bạn chỉ được hiển thị sau khi ứng dụng đã khởi tạo xong . Vì vậy để tránh việc này thay vì bạn tạo một layout cho màn hình này thì bạn sẽ tạo theme cho riêng activity này, có background như là layout của splash screen

Các bước làm splash screen bằng theme

Để có thể làm splash screen bằng theme, đầu tiên bạn cần tạo một XML drawable splashbackground.xml bên 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 ta set splashbackground.xml cho hình nền của theme. Ta thêm SplashTheme cho splash activity như sau:

<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>

Sau đó ta cấu hình SplashTheme cho acitivity Splash screen trong AndroidManifest.xml

<?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>

Bước cuối cùng ta tạo một activity SplashActivity.java mà không cần setContentView cho nó

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();
  }
}

Bằng cách làm trên View sẽ hiển thị từ theme mà không cần khỏi tạo layout nên ứng dụng sẽ chạy nhanh hơn, và không bị hiện tượng màn hình trắng.

Mong rằng với chút thủ thuật trên sẽ mang lại cho các bạn cách làm một splash screen hiệu suất tốt và đem lại trải nghiệm người dùng tốt hơn. Các bạn có thể tham khảo thêm tại android.jlelse.eu hay Github


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.