Implement 7.1_FIX_UX_BUTTON: Restructured timeline selection & bottom control panels, integrated zoom group inside bottom ControlPanel, updated Play button to Gallery Image icon and customized orange circle shutter button background

This commit is contained in:
2026-07-05 17:34:37 +07:00
parent 4a33140c67
commit 424ca4b419
5 changed files with 256 additions and 79 deletions
@@ -103,23 +103,24 @@
android:text="3" />
</FrameLayout>
<!-- ================= 3. KHU VỰC ĐIỀU KHIỂN DÒNG (CHỒNG LỚP CUỘN ĐÈ) ================= -->
<!-- ================= KHỐI 1: TIMELINE FRAMES & PRESETS ================= -->
<!-- Đặt ngay phía dưới Camera và không bị ai đè lên nữa -->
<FrameLayout
android:id="@+id/panelSelectionContainer"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_height="80dp"
android:background="#000000"
app:layout_constraintTop_toBottomOf="@id/cameraContainer"
app:layout_constraintBottom_toTopOf="@id/zoomControls">
app:layout_constraintBottom_toTopOf="@id/bottomControlPanel">
<!-- LỚP ĐÁY: Danh sách cuộn ngang dùng chung cho cả Frame và Preset -->
<!-- Danh sách cuộn ngang -->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvHorizontalTimeline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:clipToPadding="false"
android:paddingStart="80dp"
android:paddingStart="75dp"
android:paddingEnd="16dp"
android:visibility="gone" />
@@ -160,84 +161,83 @@
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<!-- ================= 4. CỤM NÚT ĐIỀU KHIỂN ZOOM (TEXTVIEW) ================= -->
<LinearLayout
android:id="@+id/zoomControls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@color/theme_transparent"
android:padding="4dp"
app:layout_constraintTop_toBottomOf="@id/panelSelectionContainer"
app:layout_constraintBottom_toTopOf="@id/controlPanel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="@+id/tvZoom05"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/theme_white"
android:text="@string/zoom_05x"
android:textSize="14sp"
android:textStyle="bold"
android:padding="6dp" />
<TextView
android:id="@+id/tvZoom1"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/theme_primary"
android:text="@string/zoom_1x"
android:textSize="14sp"
android:textStyle="bold"
android:padding="6dp" />
<TextView
android:id="@+id/tvZoom3"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/theme_white"
android:text="@string/zoom_3x"
android:textSize="14sp"
android:textStyle="bold"
android:padding="6dp" />
</LinearLayout>
<!-- ================= 5. CONTROL PANEL CHỤP ẢNH (PLAY + SHUTTER) ================= -->
<RelativeLayout
android:id="@+id/controlPanel"
<!-- ================= KHỐI 2: BOTTOM CONTROL PANEL (ĐIỀU KHIỂN CAMERA) ================= -->
<!-- Khối này gom gọn cả nút Zoom, Shutter và nút Xem ảnh, xóa bỏ các dải nền thừa -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottomControlPanel"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/theme_panel_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/zoomControls">
android:background="#000000"
app:layout_constraintTop_toBottomOf="@id/panelSelectionContainer"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Nút Play (Xem lại ảnh) -->
<!-- CỤM ZOOM THUẦN (Xóa bỏ dải nền cũ) -->
<LinearLayout
android:id="@+id/layoutZoomGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="@+id/tvZoom05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.5x"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:padding="8dp" />
<TextView
android:id="@+id/tvZoom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1x"
android:textColor="@color/theme_primary"
android:textStyle="bold"
android:padding="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp" />
<TextView
android:id="@+id/tvZoom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3x"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:padding="8dp" />
</LinearLayout>
<!-- NÚT XEM ẢNH (Biểu tượng Image/Gallery) -->
<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="@color/theme_transparent"
android:src="@drawable/ic_play_gallery"
app:tint="@color/theme_white"
android:id="@+id/btnGalleryReview"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@null"
android:src="@drawable/ic_image_gallery"
app:layout_constraintTop_toTopOf="@id/btnShutterCapture"
app:layout_constraintBottom_toBottomOf="@id/btnShutterCapture"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp"
android:contentDescription="Review Gallery" />
<!-- Nút Chụp (Ở giữa) -->
<!-- NÚT SHUTTER CHỤP ẢNH (Viền cam ruột trắng) -->
<ImageButton
android:id="@+id/btnCapture"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:background="@drawable/bg_capture_button"
android:src="@drawable/ic_camera_white"
android:contentDescription="@string/btn_capture_desc" />
</RelativeLayout>
android:id="@+id/btnShutterCapture"
android:layout_width="72dp"
android:layout_height="72dp"
android:background="@drawable/bg_shutter_orange_circle"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/layoutZoomGroup"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="Shutter Button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>