3dtours/photobooth-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
3dtours
2026-07-05 17:34:37 +07:00
parent 4a33140c67
commit 424ca4b419
5 changed files with 256 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android-project/app/src/main/java/com/photobooth/app/MainActivity.kt
+2 -2
View File
@@ -286,7 +286,7 @@ class MainActivity : AppCompatActivity() {
}
// Play Gallery Button
binding.btnReviewGallery.setOnClickListener {
binding.btnGalleryReview.setOnClickListener {
try {
val intent = android.content.Intent(android.content.Intent.ACTION_VIEW).apply {
type = "image/*"
@@ -299,7 +299,7 @@ class MainActivity : AppCompatActivity() {
}
// Shutter Button
binding.btnCapture.setOnClickListener {
binding.btnShutterCapture.setOnClickListener {
onCaptureClick()
}
}
android-project/app/src/main/res/drawable/bg_shutter_orange_circle.xml
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#40FF9800">
<item>
<shape android:shape="oval">
<solid android:color="#FFFFFF" />
<stroke
android:width="4dp"
android:color="#FF9800" />
</shape>
</item>
</ripple>
android-project/app/src/main/res/drawable/ic_image_gallery.xml
+9
View File
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="@color/theme_white"
android:pathData="M19,3H5C3.9,3 3,3.9 3,5v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V5C21,3.9 20.1,3 19,3zm0,16H5V5h14v14zm-5.04,-6.71l-2.75,3.54 -1.96,-2.36L6.5,17h11l-3.54,-4.71z" />
</vector>
android-project/app/src/main/res/layout/activity_main.xml
+77 -77
View File
@@ -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>