This repository contains resources for the hands-on workshop at DevFest HCMC 2024

Slide

Overview

Trong phần thực hành này, bạn sẽ thực hiện một layout mô phỏng màn hình Home entry của Spotify Thông qua việc phân tích các chuyển động xoay ngang, xoay dọc, resize window trên các thiết bị lớn để tìm hiểu cơ chế adaptive layouts phụ thuộc vào những yêu tố gì. Những composable pattern hiện có nào đang đáp ứng được yêu cầu adaptive layout?

Scenario

Như hầu hết các ứng dụng Android cần thể hiện UI tốt trên các kích thước màn hình khác nhau nhằm mục đích cải thiện trải nghiệm người dùng, tăng rating. Với việc ngày càng nhiều các thiết bị lớn như foldable phone, tablet, chromebook đòi hỏi các ứng dụng cần thể hiện tốt hơn sự đa năng trong việc hiển thị.

Target

• Build Adaptive Navigation trên các dạng màn hình Compact, Medium, Expanded

• Chuyển đổi cách bố trí layout màn hình Home trên các màn hình Compact, Medium, Expanded

• Đảm bảo ứng dụng liên tục khi resize, change settings

Timeline

• Navigation Adaptive
• Applying List-detail layout
• Integrating Spotify API
• Migrating to KMM

References

• Layout Spotify app on Phone, Tablet, Chromebook

• Json Data: Spotify web api

• Figma tham khảo: Spotify - Mobile UI Kit

Prerequisites

• JDK >= 11
• Android Studio Koala or latest
• Gradle >= 8.5.2
• Kotlin >= 1.8

Jetpack Compose in Project

• Using Compose BOM 2024.09.03

implementation(platform("androidx.compose:compose-bom:2024.09.03"))`

• Compose extension options:

 composeOptions {
        kotlinCompilerExtensionVersion = "1.4.7"
    }

• Material 3

Code overview

git checkout feat/dev-fest-starter

The starter code chứa các màn hình sau đây:

Instructions

Step 1: Sử dụng WindowSizeClass để quyết định hiển thị UI trên các loại thiết bị khác nhau

implementation("androidx.compose.material3:material3")
implementation("androidx.compose.material3:material3-window-size-class")

• Sử dụng WindowSizeClass

Step 2: Navigation

• Sử dụng NavigationSuiteScafford để thiết lập các bố trí các dạng Navigation khác nhau mà ko cần quan tâm đến WindowSizeClass (follow Material 3)

• Nếu có các custom đặc biệt về UI sử dụng Navigation compose + WindowSizeClass

• Sử dụng NavController để handle back stack trong nested navigation

implementation("androidx.navigation:navigation-compose:{latest-version}")

Step 3: Handle layout with List-Detail composable support by Material3 composable

• ListDetailPaneScaffold

Step 4: State management và App continually

App Architecture

• UI layer: The role of the UI layer, or presentation layer, is to display the application data on the screen. Whenever the data changes due to a user interaction, such as pressing a button, the UI should update to reflect the changes. The UI layer is made up of the following components:

  • UI elements: components that render the data on the screen. You build these elements using Jetpack Compose.
  • State holders: components that hold the data, expose it to the UI, and handle the app logic. An example state holder is ViewModel.

• ViewModel: component holds and exposes the state the UI consumes.

• UI State: The UI is what the user sees, and the UI state is what the app says they should see. The UI is the visual representation of the UI state. Any changes to the UI state immediately are reflected in the UI.

Conclusion

By completing the exercise, you have demonstrated your ability to configure and utilize the Adaptive layout on Large Screens in Jetpack Compose.