Xin chào tất cả mọi người. Chào mừng các bạn đến với workshop "Cải thiện trải nghiệm người dùng của ứng dụng Android". Tôi là Summers Pittman, Kỹ sư Quan hệ Nhà phát triển tại Google. Và tôi là Ash Nohe, cũng là Kỹ sư Quan hệ Nhà phát triển tại Google.

3 Điều Cần Cải Thiện Trải Nghiệm Ứng Dụng Android: Edge to Edge, Predictive Back, và Glance

Hôm nay, chúng tôi sẽ hướng dẫn bạn cách cải thiện trải nghiệm ứng dụng Android của mình bằng cách thêm thiết kế Edge to Edge, các hoạt ảnh Predictive Back và một widget được xây dựng bằng Jetpack Glance. Chúng tôi sẽ thêm tất cả các tính năng này vào ứng dụng Socialite, một trong nhiều ví dụ mã nguồn của chúng tôi trên GitHub.

Thiết kế Edge to Edge

Đầu tiên, chúng ta sẽ bắt đầu với thiết kế Edge to Edge trong Android 15. Ứng dụng Socialite ban đầu có giao diện không phải edge to edge, với thanh hệ thống ở trên và dưới không trong suốt. Khi hoàn thành, Socialite sẽ hiển thị edge to edge, các thanh hệ thống sẽ trở nên trong suốt và nền ứng dụng sẽ kéo dài từ cạnh này đến cạnh kia của màn hình.

Việc này được thực hiện vì một nghiên cứu nội bộ của Google cho thấy người dùng thích các màn hình edge to edge hơn vì chúng mang lại cảm giác cao cấp và hài lòng hơn. Để bắt đầu, bạn cần có thiết bị thử nghiệm Android 15 Beta 1 hoặc cao hơn và SDK. Sau đó, bạn sẽ tải mã nguồn khởi đầu từ GitHub và bắt đầu chạy Socialite.

Khi đã hoàn tất việc thực thi edge to edge bằng cách nhắm đến Android 15, bạn có thể gặp hai vấn đề. Vấn đề thứ nhất là thanh điều hướng ba nút sẽ trở nên mờ, không trong suốt trong chế độ Dark mode. Vấn đề thứ hai là thanh InputBar sẽ bị ẩn phía sau thanh điều hướng ba nút. Để khắc phục, chúng ta sẽ phải cấu hình lại cách ứng dụng xử lý insets.

Predictive Back

Tiếp theo, chúng ta sẽ thêm hoạt ảnh Predictive Back, cho phép hiển thị hoạt ảnh khi bạn vuốt trở lại. Khi bạn vuốt ngược lại từ màn hình Chat, hoạt ảnh crossfade sẽ từ từ xuất hiện nếu bạn vuốt chậm. Để làm được điều này, bạn cần cập nhật thư viện điều hướng Compose lên phiên bản mới nhất. Predictive Back giúp cải thiện trải nghiệm người dùng bằng cách thêm các chuyển động mượt mà khi điều hướng.

Widget Glance

Cuối cùng, chúng ta sẽ thêm một widget sử dụng Jetpack Glance. Glance là cách mới mà Google khuyến nghị để viết các widget mới, sử dụng API Compose để tạo các Remote views. Để tạo widget, bạn sẽ mở rộng lớp GlanceAppWidget và GlanceAppWidgetReceiver trong dự án của mình. Sau đó, bạn cần tạo tệp thông tin App Widget Provider XML để định cấu hình widget.

Glance cung cấp các composable giúp tạo giao diện widget dễ dàng hơn. Bạn có thể thêm các Scaffold composable để hiển thị UI widget, bao gồm cả thanh tiêu đề và padding cơ bản cho phần thân. Widget sẽ tự động điều chỉnh màu sắc theo chủ đề của bạn, giúp giao diện trở nên hài hòa với nền launcher của Home screen.

Khi đã hoàn tất, bạn sẽ có một widget có thể cập nhật trạng thái khi nhận thông tin mới từ ứng dụng. Ví dụ, khi có tin nhắn mới từ Socialite, widget sẽ tự động cập nhật để hiển thị thông báo đó.

Với ba cải tiến này, ứng dụng Android của bạn sẽ có giao diện đẹp hơn, hoạt ảnh mượt mà hơn và tích hợp widget tiện lợi hơn, nâng cao trải nghiệm người dùng tổng thể. Chúc bạn thành công!