Browse Source

feat(ui): elegant minimal black mic icon, spacious non-clipping ambient glow, and centered bottom voice layout

main
Ali Alavi 1 day ago
parent
commit
4c096cc65b
  1. 14
      android/app/src/main/java/com/soniox/remotemic/MainActivity.kt
  2. 14
      android/app/src/main/res/drawable/bg_glow.xml
  3. 16
      android/app/src/main/res/drawable/ic_mic_minimal.xml
  4. 47
      android/app/src/main/res/layout/activity_main.xml

14
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)
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) {

14
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>

16
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>

47
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"

Loading…
Cancel
Save