Home IT Android Studio Xây Dựng Intro Slider Cho Ứng Dụng Android

Xây Dựng Intro Slider Cho Ứng Dụng Android

36 min read
0
0
22

Việc thêm các màn hình Welcome/Intro vào trong ứng dụng của bạn là một cách tuyệt vời để giới thiệu những tính năng chính trong ứng dụng của bạn. Và việc đầu tiên bạn sẽ nghĩ ngay đến việc thêm màn hình Splash vào trong ứng của bạn. Tuy nhiên một màn hình Splash có lẽ là không đủ. Trong bài viết này tôi sẽ cùng các bạn xây dựng một sample nhỏ để thêm một Intro Slider tới ứng dụng của bạn nơi người dùng có thê swipe thông qua một vài slide để bắt đầu sử dụng app.

Tôi dự định sẽ tạo ra 1 ứng dụng nho nhỏ có chưa vài màn hình intro để người dùng có thể di chuyển qua mỗi màn hình intro với cử chỉ swipe hoặc sử dụng button next. Như hình bên dưới:

android-welcome-slider-animation-with-dots.gif

Vậy chúng ta hãy bắt đầu tạo 1 project mới.

Tạo project mới

  • Tạo một Project mới trong Android Studio : **File -> New Proejct ** Khi bạn được yêu cầu chọn Activity default thì hãy chọ Empty Activity và tiếp tục.
  • Download res.zip và thêm chúng vào trong project của bạn trong folder res. file zip này có chưa 1 vài drawable image dùng trong project của bạn.

Lựa chọn màu sắc

Trong design của tôi, tôi mỗi màn hình intro sẽ chứa một image ở center màn hình, một vài textview bên dưới. Tại bottom của màn hình có một vài dấu chấm, chỉ ra số lượng màn hình intro.

Bên dưới là 1 mẫu,tôi đã lựa chọn để làm thiết kế project của mình.

welcome-slider-color-pallete-1.png

  • Mở file colors.xml bên dưới res => value và thêm những giá trị màu bên dưới. Bạn có thể chú ý rằng ở đây tôi đã giữ chúng vào trong các array để tôi có thể dễ dàng load chúng trong Activity.
  • Mở strings.xml được đặt dưới res => values và thêm vào những giá trị như bên dưới. Ở đây tôi đang đề cập tới title và description cho mỗi màn hình intro.
  • Mở file dimens.xml bên dưới res => values và thêm những giá trị như bên dưới:
  • Tiếp theo trong file styles.xml bạn thêm như bên dưới:
  • Màn hình Welcome/Intro chỉ lên hiển thị duy nhất một lần khi bạn lần đầu tiên chạy ứng dụng, nếu người dùng khởi động app lần thứ 2 thì họ nên vào luôn màn hình Main của app. Để có được điều này tôi sử dụng **SharedPreferences ** dể lưu trữ một giá trị boolean để chỉ ra lần đầu tiên người dụng khởi động app. Tạo một class PrefManager.class với những thay đổi như bên dưới. isFirstTimeLaunch() trả về Truenếu app khởi động lần đầu tiên.

Tạo các màn hình Intro

Bây giờ là lúc chúng ta sẽ tạo các mành hình Intro cho ứng dụng của chúng ta. Tôi sẽ tạo 4 màn hình Intro . Do đó chúng ta sẽ cần 4 file layout tương ứng cho mỗi màn hình. Layout của mỗi màn hình có bố cục giống nhau chỉ khác nhau về image, text và color. Vậy chúng ta sẽ tạo nhanh 4 file Layout với tên tương ứng** welcome_side1.xml, welcome_side2.xml, welcome_side3.xml ** and welcome_side4.xml bên dưới res ⇒ layouts.

welcome_slide1.xml

**welcome_slide2.xml **

welcome_slide3.xml

welcome_slide4.xml

  • Một khi các file Layout đã sẵn sàng, tạo một Activity mới tên là WelcomeActivity.java
  • Mở activity_welcome.xml và chỉnh sửa code như bên dưới. Ở đây tôi thêm ViewPager cho màn hình intro, LinearLayout cho những dấu chấm(bottom dots) và 2 button Skip và Next.

  • Mở **WelcomeActivity.java ** và chỉnh sửa code như bên dưới. Ở đây chúng ta sẽ chú ý đển một số chi tiết.
  • Kiểm tra lần đầu tiên app khởi động bằng cách sử dụng phương thức **PrefManager.getInstance(this).isFirstTimeLaunch() **
  • Làm notification bar thành transparent để màu background có thể nhìn thấy
  • Tạo IntroViewPagerAdapter cho ViewPager và inflated các layout chúng ta đã tạo trước đây.
  • Add sự kiện clickListenner cho các button Next và Skip. Nều Button Next được click thì màn hinh InTro tiếp tiếp theo sẽ được hiển thị, con Button Skip được click thì sẽ vào thẳng trong màn hình Main của APP.