• Khi xây dựng một ứng dụng Android, trải nghiệm người dùng là điều rất quan trọng. Các chuyển động giúp người dùng thích tương tác với ứng dụng nhiều hơn . Vì vậy, trong bài viết này, mình sẽ chia sẻ cách thực hiện animation khi chuyển đổi giữa 2 screen.

Tổng quan

• Mặc định, khi chúng ta chuyển tiếp giữa các Activity hoặc Fragment hiệu ứng đơn thuần là ẩn các Activity/Fragment cũ đi và hiển thị giao diện mới lên (Fade, Slide...)
• Tuy nhiên, trong một số trường hợp một phần View nào đó được xuất hiện trên cả 2 giao diện cũ và mới, việc sử dụng Share Element Transitions khi chuyển tiếp sẽ tạo cho người dùng cảm giác chuyển tiếp mượt mà và liền mạch hơn.
• Trong Android có hỗ trợ các shared elements transitions:

  • changeBounds 
    

  • changeClipBounds
    

  • changeTransform
    

  • changeImageTransform
    

• Hiểu sâu thêm về Transition: tại đây

Thực hành

• Một lưu ý quan trọng là Shared Element Transition chỉ hoạt động với các thiết bị từ Android 5.0 (API level 21, LOLLIPOP) trở lên. Vì vậy, khi sử dụng chúng ta phải check version trước

Shared Elements Transition với Activity

Step 1: Add Window Content Transitions và file styles.xml

Step 2: Specify custom transitions

• Bạn có thể tạo transitions dưới dạng file XML resource, sau đó cấu hình trong file styles.xml

  • Transition

  • styles.xml

• Bạn cũng có thể tạo transitions trong code:

Step 3: Sử dụng thuộc tính android:transitionName để gán chung một Transition Name cho các elements cần share giữa 2 screen.

• Ví dụ ở MainActivity.xml:

• Và ở DetailActivity:

Step 4: Start an activity with a shared element

• Bạn có start activity với một hoặc nhiều shared element. Để share nhiều element sử dụng đối tượng Pair.

Kết quả

Shared Elements Transition với Fragment

• Sử dụng Shared Elements Transition với Fragment cũng tương tự như với Activity.

Step 1: Gán chung thuộc tính android:transitionName

• Ở fragment thứ nhất:

• Ở fragment thứ hai:

Step 2: Tạo transition

Step 3: Tạo hiệu ứng chuyển tiếp giữa các fragment trong FragmentTransaction

Tổng kết

• Như vậy mình đã giới thiệu tới các bạn thêm hiệu ứng khi chuyển Activity/Fragment. Thật đơn giản phải không nào. Các bạn có thể tham khảo source code mình để ở dưới nhé.

Nguồn

• Source code: https://github.com/hoangbn-1772/AnimateAndTransition
• Tham khảo: https://developer.android.com/training/transitions/start-activity#custom-trans