# 🎨 KẾ HOẠCH TÁI CẤU TRÚC UX/UI: TỐI GIẢN & TƯƠNG TÁC ĐỘNG

Mục tiêu: Chuyển đổi giao diện sang phong cách tối giản (không viền, không nền), sử dụng màu sắc để biểu thị trạng thái (Trắng ➔ Cam) và tối ưu hóa không gian hiển thị bằng cách gộp timeline của Frame và Presets.

---

## 📐 1. Cập Nhật Cấu Trúc Giao Diện (XML Layout)

Chúng ta sẽ điều chỉnh file `activity_main.xml` để loại bỏ các khối nền thừa và cấu trúc lại các cụm nút dựa theo `image_29a4a7.png`.

### 🔹 1.1. Top Bar (Các Icon Trạng Thái)

Thay thế các `Button` có text thành `ImageButton` chỉ chứa icon (Tia sét, Đồng hồ, Vòng xoay camera).

* **Style:** Không nền (`android:background="@null"`), không bo viền.
* **Màu sắc:** Sử dụng `app:tint="@color/white"` làm mặc định.

```xml
<LinearLayout
    android:id="@+id/topBar" ...>
    
    <ImageButton
        android:id="@+id/btnFlash"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@null"
        android:src="@drawable/ic_flash"
        app:tint="@color/white" />
        
    <!-- Tương tự cho btnTimer (ic_timer) và btnSwitchCamera (ic_flip_camera) -->
</LinearLayout>

```

### 🔹 1.2. Nút Frame và Nút Presets (Toggle Buttons)

Đây là hai nút chính nằm trên cụm Zoom. Cần thiết kế dưới dạng `ImageView` (hoặc `CardView` có bo góc nhẹ nếu muốn chứa ảnh mượt hơn) để có thể thay đổi ảnh đại diện (thumbnail) khi người dùng chọn.

```xml
<LinearLayout
    android:id="@+id/toggleModeContainer" ...>
    
    <!-- Nút Frame -->
    <ImageView
        android:id="@+id/btnModeFrame"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_default_frame_thumbnail" />

    <!-- Nút Presets -->
    <ImageView
        android:id="@+id/btnModePreset"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_default_preset_thumbnail" />
</LinearLayout>

<!-- Khung Timeline dùng chung (sẽ thay đổi Adapter tùy thuộc vào nút nào được bấm) -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvSharedTimeline"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone" />

```

### 🔹 1.3. Cụm Zoom (0.5x, 1x, 3x)

Thay thế các nút nền xám hiện tại thành `TextView` văn bản thuần túy.

* **Style:** Chữ đậm, không nền (`android:background="@null"`).
* **Trạng thái màu:** Mặc định màu trắng (`#FFFFFF`), khi chọn đổi sang màu cam (`#FF9800`).

### 🔹 1.4. Bottom Panel (Thêm nút Play/Review)

Dựa theo vị trí khoanh đỏ ở góc dưới bên trái của `image_29a4a7.png`, thêm nút xem lại ảnh.

```xml
<RelativeLayout
    android:id="@+id/controlPanel" ...>

    <!-- Nút Play (Xem lại ảnh) -->
    <ImageButton
        android:id="@+id/btnReviewGallery"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="24dp"
        android:background="@null"
        android:src="@drawable/ic_play_gallery" />

    <!-- Nút Chụp (Ở giữa) -->
    <!-- ... -->
</RelativeLayout>

```

---

## 💻 2. Kịch Bản Logic & Quản Lý Trạng Thái (Kotlin)

### 🔹 2.1. Logic Đổi Màu Icon Top Bar và Zoom (Trắng ➔ Cam)

Tạo các hàm helper để xử lý đổi màu nhanh gọn bằng `ColorStateList` hoặc set `tint` trực tiếp:

```kotlin
// Ví dụ đổi màu icon Flash
fun updateFlashIconState(isActive: Boolean) {
    val color = if (isActive) Color.parseColor("#FF9800") else Color.WHITE
    binding.btnFlash.imageTintList = ColorStateList.valueOf(color)
}

// Ví dụ đổi màu text Zoom
fun updateZoomTextState(selectedZoom: TextView) {
    // Reset tất cả về trắng
    binding.tvZoom05.setTextColor(Color.WHITE)
    binding.tvZoom1.setTextColor(Color.WHITE)
    binding.tvZoom3.setTextColor(Color.WHITE)
    
    // Set màu cam cho mức zoom được chọn
    selectedZoom.setTextColor(Color.parseColor("#FF9800"))
}

```

### 🔹 2.2. Logic Toggle Giữa Frame và Presets

Để đáp ứng yêu cầu: Bấm Frame thì ẩn Presets (và ngược lại), chúng ta quản lý trạng thái hiển thị bằng `View.VISIBLE` và `View.GONE`.

1. **Khi nhấn nút Frame:** Mở Timeline Frame.
Ẩn nút Presets (`btnModePreset.visibility = View.GONE`).
Hiển thị `rvSharedTimeline`. Set Adapter của RecyclerView thành danh sách các Frames.
*(Lưu ý: Bạn nên cấu hình để khi nhấn nút Frame lần nữa, Timeline sẽ đóng lại và nút Presets hiện ra lại để người dùng có thể chuyển đổi).*


2. **Khi nhấn nút Presets:** Mở Timeline Presets.
Ẩn nút Frame (`btnModeFrame.visibility = View.GONE`).
Hiển thị `rvSharedTimeline`. Set Adapter của RecyclerView thành danh sách các Preset màu.


3. **Khi chọn phần tử trong Timeline:** Cập nhật Thumbnail.
Nếu đang ở chế độ Frame và người dùng chọn "Vintage Frame", lấy ảnh thumbnail của frame đó gán đè vào icon của nút Frame: `btnModeFrame.setImageBitmap(selectedFrameThumb)`. Tương tự cho Presets.


### 🔹 2.3. Logic Nút "Play" (Xem lại ảnh)

Khi nhấn vào `btnReviewGallery`, sử dụng `Intent` để mở một Activity mới (`GalleryActivity`) hiển thị lưới (Grid) các ảnh đã chụp (đọc từ thư mục lưu trữ mà bạn đã cấu hình ở các bước trước). Hoặc đơn giản nhất là mở thẳng thư viện mặc định của điện thoại thông qua `ACTION_VIEW`.

---

## 📅 3. Các Đầu Việc Cần Làm (Checklist)

* [ ] **Chuẩn bị Assets (SVG/Vector):** Tìm/Tạo các icon dạng vector (XML) cho `ic_flash`, `ic_timer`, `ic_flip_camera`, `ic_play`. Sử dụng vector giúp ảnh không bị vỡ và dễ dàng đổi màu bằng thuộc tính `tint` trên Android.
* [ ] **Cập nhật Layout:** Mở file `activity_main.xml` và xóa các thuộc tính background cũ, thay thế bằng các thuộc tính như kế hoạch trên.
* [ ] **Viết Helper Functions:** Trong `MainActivity.kt`, tạo các hàm `toggleTimelineMode(isFrameMode: Boolean)` để quản lý việc ẩn/hiện và tráo đổi Adapter cho 2 nút Frame/Presets.
* [ ] **Tạo Activity Review:** Tạo một màn hình đơn giản hoặc Fragment để hiển thị ảnh ngay khi bấm nút Play ở góc dưới cùng bên trái.