Tạo intro slide cho ứng dụng android của bạn

Khi tạo ứng dụng android, bạn muốn có màn hình giới thiệu về ứng dụng của bạn trước khi bắt đầu vào ứng dụng, thông thường bạn nghĩ đây đến việc thêm vào màn hình Splash vào trong ứng dụng, tuy nhiên splash nó chỉ là 1 màn hình nhiều khi không đủ để giới thiệu hết thông tin về ứng dụng của bạn. Trong bài viết này tôi sẽ giới thiệu thư viện nhỏ để thêm vào Intro slide cho ứng dụng của bạn

1. Thư viện sẽ sử dụng là AppIntro

https://github.com/apl-devs/AppIntro Thư viện sẽ giúp bạn xây dựng intro slide 1 cách dễ dàng, nếu muốn giữ nguyên như mặc định thì bạn chỉ cần thay ảnh là xong

2. Tạo project mới

2.1 Tạo một Project mới trong Android Studio 2.2 Thêm repositories trong file build.gradle

allprojects {
    repositories {
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

2.3 Thêm dependency

dependencies {
    ....
    compile 'com.github.apl-devs:appintro:v4.2.0'
}

2.4 Tạo activity AppIntroActivity

package july.appintro.fg.fgappintro;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;

import com.github.paolorotolo.appintro.AppIntro;
import com.github.paolorotolo.appintro.AppIntroFragment;

/**
 * Created by FRAMGIA\ngo.dinh.ngoc on 25/06/2017.
 */

public class AppIntroActivity extends AppIntro {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Note here that we DO NOT use setContentView();

        // Add your slide fragments here.
        // AppIntro will automatically generate the dots indicator and buttons.
        addSlide(AppIntroFragment.newInstance(getString(R.string.email), getString(R.string.email_hint), R.drawable.email, ContextCompat.getColor(getApplicationContext(), R.color.light_green)));
        addSlide(AppIntroFragment.newInstance(getString(R.string.calender), getString(R.string.calender_hint), R.drawable.calendar, ContextCompat.getColor(getApplicationContext(), R.color.light_purple)));
        addSlide(AppIntroFragment.newInstance(getString(R.string.shopping), getString(R.string.shopping_hint), R.drawable.shopping, ContextCompat.getColor(getApplicationContext(), R.color.light_orange)));
        addSlide(AppIntroFragment.newInstance(getString(R.string.social_network), getString(R.string.social_network_hint), R.drawable.socialnetwork, ContextCompat.getColor(getApplicationContext(), R.color.light_cyan)));

        // Hide Skip/Done button.
        showSkipButton(true);
        setProgressButtonEnabled(true);

        // Turn vibration on and set intensity.
        // NOTE: you will probably need to ask VIBRATE permission in Manifest.
        setVibrate(true);
        setVibrateIntensity(30);
    }

    @Override
    public void onSkipPressed(Fragment currentFragment) {
        super.onSkipPressed(currentFragment);
        // Do something when users tap on Skip button.
    }

    @Override
    public void onDonePressed(Fragment currentFragment) {
        super.onDonePressed(currentFragment);
        startActivity(new Intent(AppIntroActivity.this, MainActivity.class));
        this.finish();
    }

    @Override
    public void onSlideChanged(@Nullable Fragment oldFragment, @Nullable Fragment newFragment) {
        super.onSlideChanged(oldFragment, newFragment);
    }
}

Thêm AppIntroActivity vào làm activity main sẽ chạy khi bắt đầu ứng dụng, trên là ví dụ rất cơ bản của thư viện này.

3. Tổng kết

Bên trong thư viện còn rất nhiều nhưng options về image và animation để các bạn có thể chọn lựa cho phù hợp với ứng dụng của mình, Với thư viện này bạn chỉ cần tạo image giới thiệu về app của mình và cho vào là xong, bạn cũng có thể custom lại giao diện hoặc thêm vào các Fragment mà mình tạo ra

Toàn bộ source code example mình để ở đây. https://github.com/ngodinhngoc/fg_app_intro