From 4c096cc65ba018320f05cd8deff139ab6c0ec6bf Mon Sep 17 00:00:00 2001
From: Ali Alavi <aligopalpour13@gmail.com>
Date: Sun, 23 Aug 2026 20:40:23 +0000
Subject: [PATCH] feat(ui): elegant minimal black mic icon, spacious
 non-clipping ambient glow, and centered bottom voice layout

---
 .../java/com/soniox/remotemic/MainActivity.kt | 18 +++----
 android/app/src/main/res/drawable/bg_glow.xml | 14 ++++++
 .../src/main/res/drawable/ic_mic_minimal.xml  | 16 +++++++
 .../app/src/main/res/layout/activity_main.xml | 47 +++++++++++--------
 4 files changed, 68 insertions(+), 27 deletions(-)
 create mode 100644 android/app/src/main/res/drawable/bg_glow.xml
 create mode 100644 android/app/src/main/res/drawable/ic_mic_minimal.xml

diff --git a/android/app/src/main/java/com/soniox/remotemic/MainActivity.kt b/android/app/src/main/java/com/soniox/remotemic/MainActivity.kt
index 15a6eb1..90df95e 100644
--- a/android/app/src/main/java/com/soniox/remotemic/MainActivity.kt
+++ b/android/app/src/main/java/com/soniox/remotemic/MainActivity.kt
@@ -150,9 +150,11 @@ class MainActivity : AppCompatActivity() {
                 binding.tvInstruction.setTextColor(ContextCompat.getColor(this, R.color.accent_blue))
             },
             onAudioLevel = { level ->
-                val scale = 1.0f + (level * 0.35f)
-                binding.viewGlow.scaleX = scale
-                binding.viewGlow.scaleY = scale
+                if (isCurrentlyRecording) {
+                    val scale = 1.0f + (level * 0.22f)
+                    binding.viewGlow.scaleX = scale
+                    binding.viewGlow.scaleY = scale
+                }
             },
             onSpeechCompleted = { finalText ->
                 vibrate(100)
@@ -479,12 +481,12 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun startPulseAnimation() {
-        val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1.0f, 1.25f, 1.0f)
-        val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1.0f, 1.25f, 1.0f)
-        val alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 0.3f, 0.7f, 0.3f)
+        val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1.0f, 1.18f, 1.0f)
+        val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1.0f, 1.18f, 1.0f)
+        val alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 0.4f, 0.85f, 0.4f)
         
         pulseAnimator = ObjectAnimator.ofPropertyValuesHolder(binding.viewGlow, scaleX, scaleY, alpha).apply {
-            duration = 1000
+            duration = 900
             repeatCount = ValueAnimator.INFINITE
             interpolator = AccelerateDecelerateInterpolator()
             start()
@@ -495,7 +497,7 @@ class MainActivity : AppCompatActivity() {
         pulseAnimator?.cancel()
         binding.viewGlow.scaleX = 1.0f
         binding.viewGlow.scaleY = 1.0f
-        binding.viewGlow.alpha = 0.3f
+        binding.viewGlow.alpha = 0.0f
     }
 
     private fun vibrate(durationMs: Long) {
diff --git a/android/app/src/main/res/drawable/bg_glow.xml b/android/app/src/main/res/drawable/bg_glow.xml
new file mode 100644
index 0000000..e69dba3
--- /dev/null
+++ b/android/app/src/main/res/drawable/bg_glow.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <gradient
+        android:angle="0"
+        android:endColor="#003B82F6"
+        android:centerColor="#263B82F6"
+        android:startColor="#663B82F6"
+        android:type="radial"
+        android:gradientRadius="70dp" />
+    <size
+        android:width="140dp"
+        android:height="140dp" />
+</shape>
diff --git a/android/app/src/main/res/drawable/ic_mic_minimal.xml b/android/app/src/main/res/drawable/ic_mic_minimal.xml
new file mode 100644
index 0000000..621cbdc
--- /dev/null
+++ b/android/app/src/main/res/drawable/ic_mic_minimal.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+
+    <!-- Minimalist Deep Matte Black Microphone Body -->
+    <path
+        android:fillColor="#0F172A"
+        android:pathData="M12,14 C13.66,14 15,12.66 15,11 L15,5 C15,3.34 13.66,2 12,2 C10.34,2 9,3.34 9,5 L9,11 C9,12.66 10.34,14 12,14 Z" />
+
+    <!-- Minimalist Outer Base Stand & Cradle -->
+    <path
+        android:fillColor="#0F172A"
+        android:pathData="M17.3,11 C17.3,13.93 14.93,16.3 12,16.3 C9.07,16.3 6.7,13.93 6.7,11 L5,11 C5,14.49 7.72,17.36 11,17.85 L11,21 L13,21 L13,17.85 C16.28,17.36 19,14.49 19,11 L17.3,11 Z" />
+</vector>
diff --git a/android/app/src/main/res/layout/activity_main.xml b/android/app/src/main/res/layout/activity_main.xml
index 825b590..981e298 100644
--- a/android/app/src/main/res/layout/activity_main.xml
+++ b/android/app/src/main/res/layout/activity_main.xml
@@ -6,6 +6,8 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/bg_dark"
+    android:clipChildren="false"
+    android:clipToPadding="false"
     android:padding="12dp">
 
     <!-- Header Section -->
@@ -79,7 +81,7 @@
             android:background="@drawable/bg_card"
             android:contentDescription="لاگ‌ها"
             android:padding="8dp"
-            android:src="@drawable/ic_mic"
+            android:src="@drawable/ic_mic_minimal"
             app:tint="@color/accent_blue" />
     </LinearLayout>
 
@@ -89,7 +91,7 @@
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_marginTop="8dp"
-        android:layout_marginBottom="8dp"
+        android:layout_marginBottom="16dp"
         android:background="@drawable/bg_card"
         android:orientation="vertical"
         android:padding="12dp"
@@ -133,7 +135,7 @@
                 android:textSize="11sp" />
         </LinearLayout>
 
-        <!-- Fully Editable Multi-line EditText (Expands to fill entire space) -->
+        <!-- Fully Editable Multi-line EditText -->
         <EditText
             android:id="@+id/etTranscript"
             android:layout_width="match_parent"
@@ -194,11 +196,14 @@
         </LinearLayout>
     </LinearLayout>
 
-    <!-- Bottom Voice Section (Hidden when soft keyboard opens) -->
+    <!-- Bottom Voice Section (Centered with generous breathing space) -->
     <LinearLayout
         android:id="@+id/bottomVoiceSection"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginBottom="8dp"
+        android:clipChildren="false"
+        android:clipToPadding="false"
         android:gravity="center_horizontal"
         android:orientation="vertical"
         app:layout_constraintBottom_toBottomOf="parent">
@@ -206,35 +211,39 @@
         <!-- Center Glowing Mic Button Container -->
         <FrameLayout
             android:id="@+id/micContainer"
-            android:layout_width="120dp"
-            android:layout_height="120dp"
-            android:layout_marginBottom="6dp">
+            android:layout_width="140dp"
+            android:layout_height="140dp"
+            android:layout_marginBottom="8dp"
+            android:clipChildren="false"
+            android:clipToPadding="false">
 
-            <!-- Outer Pulsing Glow -->
+            <!-- Outer Pulsing Glow Ambient Ring -->
             <View
                 android:id="@+id/viewGlow"
-                android:layout_width="120dp"
-                android:layout_height="120dp"
+                android:layout_width="140dp"
+                android:layout_height="140dp"
                 android:layout_gravity="center"
-                android:alpha="0.3"
-                android:background="@drawable/bg_mic_button" />
+                android:alpha="0.0"
+                android:background="@drawable/bg_glow" />
 
-            <!-- Main Touch Button -->
+            <!-- Main Touch Button (Matte Frost Titanium Circle) -->
             <FrameLayout
                 android:id="@+id/btnMic"
-                android:layout_width="95dp"
-                android:layout_height="95dp"
+                android:layout_width="96dp"
+                android:layout_height="96dp"
                 android:layout_gravity="center"
                 android:background="@drawable/bg_mic_button"
                 android:clickable="true"
+                android:elevation="4dp"
                 android:focusable="true">
 
+                <!-- Minimalist Sleek Matte Black Mic Icon -->
                 <ImageView
                     android:id="@+id/ivMicIcon"
-                    android:layout_width="54dp"
-                    android:layout_height="54dp"
+                    android:layout_width="48dp"
+                    android:layout_height="48dp"
                     android:layout_gravity="center"
-                    android:src="@drawable/ic_mic_mac" />
+                    android:src="@drawable/ic_mic_minimal" />
             </FrameLayout>
         </FrameLayout>
 
@@ -243,7 +252,7 @@
             android:id="@+id/tvInstruction"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="4dp"
+            android:layout_marginBottom="6dp"
             android:text="@string/hold_to_speak"
             android:textColor="@color/text_secondary"
             android:textSize="13sp"