Home
Xây dựng Intro Slider cho ứng dụng Android

Xây dựng Intro Slider cho ứng dụng Android

Android 0 10/11/2023

Xây dựng Intro Slider trong ứng dụng Android là một cách tuyệt vời để giới thiệu các tính năng nổi bật của ứng dụng. Trong bài viết này chúng ta sẽ cùng nhau xây dựng Intro Slider cho ứng dụng Android để giúp cho ứng dụng Android của bạn mang lại hiệu quả hơn đối với người dùng.

Xây dựng Intro Slider cho ứng dụng Android

Nếu như việc thêm một màn hình tĩnh (Splash Screen) vào ứng dụng Android có vẻ trông khá nhàm chán thì tại sao bạn không thử thêm thanh trượt giới thiệu vào ứng dụng nơi mà người dùng có thể vuốt qua một vài trang trình bày trước khi vào ứng dụng.

Điểm qua một vài ứng dụng xây dựng Intro Slider cho ứng dụng Android chẳng hạn như Tra cứu trị trường, Zing MP3, My Viettel…

Xây dựng Intro Slider cho ứng dụng Android

Bước 1: Bạn tạo một Activity mới như mình sẽ đặt tên là IntroActivity.java và đây sẽ là Activity khởi chạy đầu tiên khi mở ứng dụng, vậy bạn cũng cần mở tập tin AndroidManifest.xml và cấu hình lại như sau

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.teamvietdev.android.introslider">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".IntroActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar"></activity>
    </application>

</manifest>

Mở tập tin activity_intro.xml và sửa đổi mã như dưới đây để thêm thanh trượt, nút nhấn…

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".IntroActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp"
        android:gravity="center"
        android:orientation="horizontal"/>

    <View
        android:layout_above="@id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha=".5"
        android:background="@android:color/white" />

    <Button
        android:id="@+id/btnSkip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="5dp"
        android:background="@null"
        android:text="Bỏ qua"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="5dp"
        android:background="@null"
        android:text="Tiếp tục"
        android:textColor="@android:color/white" />

</RelativeLayout>

Với mỗi trang giới thiệu chúng ta sẽ tạo một màn hình hiển thị riêng, như mình muốn tạo một thanh trượt bao gồm 3 màn hình giới thiệu vậy nên mình sẽ tạo 3 tập tin lần lượt layout_intro1.xml, layout_intro2.xml và layout_intro3.xml

Tập tin layout_intro1.xml như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#f64c73">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:src="@drawable/icon_intro1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chung tay bảo vệ môi trường"
            android:layout_marginTop="25dp"
            android:textColor="@android:color/white"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="Bảo vệ môi trường là trách nhiệm của mỗi cá nhân..."
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="18dp" />

    </LinearLayout>

</LinearLayout>

Tập tin layout_intro2.xml như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#20d2bb">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:src="@drawable/icon_intro2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Những hành động thiết thực"
            android:layout_marginTop="25dp"
            android:textColor="@android:color/white"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="Hãy bắt đầu bằng những hành động đơn giản..."
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="18dp" />

    </LinearLayout>

</LinearLayout>

Tập tin layout_intro3.xml như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#3395ff">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:src="@drawable/icon_intro3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cùng nhau bảo vệ môi trường"
            android:layout_marginTop="25dp"
            android:textColor="@android:color/white"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="Cùng kêu gọi mọi người chung tay bảo vệ môi trường..."
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="18dp" />

    </LinearLayout>

</LinearLayout>

Giao diện hiển thị màn hình giới thiệu chúng ta vừa thiết kế lần lượt như sau:

Xây dựng Intro Slider cho ứng dụng Android

Bước 2: Tạo một lớp có tên PrefManager.java nhằm mục đích khi ứng dụng khởi động chúng ta sẽ kiểm tra nếu ứng dụng được khởi chạy lần đầu tiên thì mới hiển thị màn hình giới thiệu, ngược lại thì sẽ mở màn hình chính.

package com.teamvietdev.android.introslider;

import android.content.Context;
import android.content.SharedPreferences;

public class PrefManager {

    private SharedPreferences pref;
    private SharedPreferences.Editor editor;
    private Context context;

    private int PRIVATE_MODE = 0;

    private static final String PREF_NAME = "config";

    private static final String IS_FIRST_TIME_LAUNCH = "isFirstTime";

    public PrefManager(Context context) {
        this.context = context;
        pref = context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setFirstTimeLaunch(boolean isFirstTime) {
        editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
        editor.commit();
    }

    public boolean isFirstTimeLaunch() {
        return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
    }

}

SharedPreferences có thể thực hiện lưu trữ và truy xuất dữ liệu trong ứng dụng Android

Bước 3: Tiếp tục bạn mở tập tin IntroActivity.java và sửa đổi mã như dưới đây để thực hiện xây dựng Intro Slider cho ứng dụng Android.

package com.teamvietdev.android.introslider;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class IntroActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;
    private PrefManager prefManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_intro);

        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

        prefManager = new PrefManager(this);
        if (!prefManager.isFirstTimeLaunch()) {
            launchHomeScreen();
            finish();
        }

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        btnSkip = (Button) findViewById(R.id.btnSkip);
        btnNext = (Button) findViewById(R.id.btnNext);

        layouts = new int[]{
                R.layout.layout_intro1,
                R.layout.layout_intro2,
                R.layout.layout_intro3};

        addBottomDots(0);

        changeStatusBarColor();

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                launchHomeScreen();
            }
        });

        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int current = getItem(+1);
                if (current < layouts.length) {
                    viewPager.setCurrentItem(current);
                } else {
                    launchHomeScreen();
                }
            }
        });

    }

    private void addBottomDots(int currentPage) {
        dots = new TextView[layouts.length];

        int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
        int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(colorsInactive[currentPage]);
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    }

    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }

    private void launchHomeScreen() {
        prefManager.setFirstTimeLaunch(false);
        startActivity(new Intent(IntroActivity.this, MainActivity.class));
        finish();
    }

    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);
            if (position == layouts.length - 1) {
                btnNext.setText("Hoàn tất");
                btnSkip.setVisibility(View.GONE);
            } else {
                btnNext.setText("Tiếp tục");
                btnSkip.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

    };

    private void changeStatusBarColor() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }

    public class MyViewPagerAdapter extends PagerAdapter {

        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(layouts[position], container, false);
            container.addView(view);

            return view;
        }

        @Override
        public int getCount() {
            return layouts.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }

    }

}

Bạn tạo tập tin array.xml trong thư mục res > value và thêm đoạn mã sau vào:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="array_dot_active">
        <item>#d1395c</item>
        <item>#14a895</item>
        <item>#2278d4</item>
    </array>
    <array name="array_dot_inactive">
        <item>#f98da5</item>
        <item>#8cf9eb</item>
        <item>#93c6fd</item>
    </array>
</resources>

Cuối cùng hãy chạy trương trình trên để kiểm tra xem kết quả thực hiện như thế nào.

Lời kết: Như vậy việc xây dựng Intro Slider cho ứng dụng Android tuy đơn giản nhưng giúp cho ứng dụng Android của bạn mang lại hiệu quả lớn tới người dùng. Ngoài ra bạn có thể xem thêm nhiều bài viết khác trong chủ đề lập trình Android tại Team Việt Dev.

(Tác giả: Team Việt Dev)

Post Views: 3.148

Nội dung liên quan

Tác giả

admin Email

Team Việt Dev là một blog chuyên về hướng dẫn, tài liệu, thủ thuật, lập trình Java, Android, PHP, WordPress và một số ngôn ngữ khác. Email: teamvietdev@gmail.com

Bình luận