Android View System: Thực Hành Giao Diện Ứng Dụng Spotify

Xây dựng UI của Spotify

Đây là một ứng dụng mình đã xây dựng sẵn. Trong blog này mình sẽ chỉ ra những điểm mấu chốt, và phân tích cụ thể vì sao lại thực hiện code như vậy.

Kiến thức cần có: https://danhtran.dev/android-mastery-android-view-system-kien-thuc-co-ban/

Link Git Repository: https://github.com/dantech0xff/SpotifyKt

MainActivity

Ứng dụng Spotify được cấu tạo chính từ 2 thành phần là Bottom Navigation Bar và Feature Content

Trong Android để sử dụng Bottom Navigation Bar ta sẽ dùng com.google.android.material.bottomnavigation.BottomNavigationView trong XML layout. Ngoài ra để dễ dàng Navigation giữa các Fragment bên trong App. Ta cần kết hợp với Jetpack Navigation chi tiết bạn có thể tham khảo project.

HomeFragment

Phân tích HomeFragment của app Spotify trước khi thực hiện xây dựng

• HomeFragment của Spotify là một ScrollView theo chiều dọc.
• Trong ScrollView này chứa nhiều Element con. Mỗi Element có những điểm tương đồng: Title, Square Cells, Scrollable, Action Button …
• Mỗi Square Cell có những Element tương đương nhau: Image, Title, Sub Title, ..

Dựa vào 3 phân tích trên ta có thể xây dựng Layout của HomeFragment. Bạn hãy tham khảo file HomeFragment.kt và fragment_home.xml trong dự án nhé

FAQ

1. Tại sao lại dùng NestedScrollView cho HomeFragment mà không dùng RecyclerView?
2. Tại sao mỗi Element bên trong HomeFragment lại dùng RecyclerView mà không dùng ScrollView?
3. Tại sao lại inject IDeeplinkHandler vào trong MusicListAdapter ?

SearchFragment

Phân tích SearchFragment của ứng dụng Spotify trước khi tiến hành xây dựng

• SearchFragment của ứng dụng Spotify là một Scrollable View theo chiều dọc. Gồm Title, Search Bar và một list những chủ đề có sẵn.
• List chủ đề có sẵn được Scroll theo chiều dọc, được chia thành 2 cột mỗi hàng
• SearchResultFragment là một Scrollable View theo chiều dọc. Chứa nhiều loại View khác nhau thể hiện kết quả Search.

Dựa vào 3 phân tích trên mời bạn hãy tham khảo qua file SearchFragment.kt, SearchResultFragment.kt, search_result_fragment.xml, search_fragment.xml

FAQ:

1. Tại sao lại dùng RecyclerView cho danh sách các topic search?
2. Tại sao lại Navigate sang màn hình SearchResultFragment mà không cập nhật trực tiếp trên màn SearchFragment?
3. Trong màn hình SearchResultFragment tại sao lại dùng RecyclerView để hiển thị.

FavoriteFragment

Phân tích FavoriteFragment của Spotify Android trước khi xây dựng giao diện

• FavoriteFragment được chia thành nhiều Tab: Playlists, Artists, Albums, Podcasts
• Trong mỗi Tab có một danh sách Scrollable theo chiều dọc
• Các danh sách này có sự tương đồng về cách xử lý và hiển thị.

Dựa vào 3 phân tích trên mời bạn tham khảo qua implementation trong các file FavoriteFragment.kt, favorite_fragment.xml

FAQ:

1. Tại sao mỗi Tab trong FavoriteFragment đại diện cho các data khác nhau nhưng lại chỉ code 1 lần duy nhất trong ListFavAdapter . Có ưu nhược điểm gì trong cách code này.

Hướng phát triển tiếp theo

Example trên đây mình đã implement giao diện của ứng dụng Spotify Android. Tuy nhiên vẫn còn rất nhiều space để các bạn có thể fork và phát triển theo ý riêng. Dưới đây là 1 số ý tưởng.

• Hoàn thiện các màn hình trong Setting để làm case study cho bản thân.
• Tiếp tục phát triển màn hình PlayerFragment và tích hợp tính năng nghe nhạc Offline trong ứng dụng.
• Tùy biến hệ thống Deep-Link Navigation trong app theo ý của bạn

Chúc các bạn thành công. Nếu cảm thấy việc tự học quá tốn thời gian hãy thử tham khảo qua khóa học Lập trình ứng dụng Android của mình nhé!!