Browse Source

feat(ui): premium black studio microphone icon with Apple Mac accent badge on frost titanium button

main
Ali Alavi 20 hours ago
parent
commit
4aac4e2490
  1. 10
      android/app/src/main/res/drawable/bg_mic_button.xml
  2. 3
      android/app/src/main/res/drawable/bg_mic_button_active.xml
  3. 42
      android/app/src/main/res/drawable/ic_mic_mac.xml
  4. 6
      android/app/src/main/res/layout/activity_main.xml

10
android/app/src/main/res/drawable/bg_mic_button.xml

@ -1,13 +1,17 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" <ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#40FFFFFF">
android:color="#33000000">
<item> <item>
<shape android:shape="oval"> <shape android:shape="oval">
<!-- Modern Apple-Style Frost / Titanium Gradient Backdrop -->
<gradient <gradient
android:angle="45" android:angle="45"
android:endColor="#2563EB"
android:startColor="#3B82F6"
android:endColor="#CBD5E1"
android:startColor="#F1F5F9"
android:type="linear" /> android:type="linear" />
<stroke
android:width="2.5dp"
android:color="#94A3B8" />
<size <size
android:width="140dp" android:width="140dp"
android:height="140dp" /> android:height="140dp" />

3
android/app/src/main/res/drawable/bg_mic_button_active.xml

@ -6,6 +6,9 @@
android:endColor="#DC2626" android:endColor="#DC2626"
android:startColor="#F43F5E" android:startColor="#F43F5E"
android:type="linear" /> android:type="linear" />
<stroke
android:width="3dp"
android:color="#FECDD3" />
<size <size
android:width="140dp" android:width="140dp"
android:height="140dp" /> android:height="140dp" />

42
android/app/src/main/res/drawable/ic_mic_mac.xml

@ -0,0 +1,42 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="64"
android:viewportHeight="64">
<!-- Microphone Capsule Base & Stand (Deep Sleek Black / Slate) -->
<!-- Mic Top Head / Capsule -->
<path
android:fillColor="#0F172A"
android:pathData="M32,6 C26.48,6 22,10.48 22,16 L22,30 C22,35.52 26.48,40 32,40 C37.52,40 42,35.52 42,30 L42,16 C42,10.48 37.52,6 32,6 Z" />
<!-- Mic Mesh Highlight / Inner Grille Lines -->
<path
android:fillColor="#334155"
android:pathData="M24,20 L40,20 L40,22 L24,22 Z M24,15 L40,15 L40,17 L24,17 Z M26,10 L38,10 L38,12 L26,12 Z" />
<!-- Outer Mic Cradle / U-Bracket -->
<path
android:fillColor="#0F172A"
android:pathData="M48,27 C48,36.2 40.7,43.7 34.5,44.8 L34.5,52 L40,52 C41.1,52 42,52.9 42,54 C42,55.1 41.1,56 40,56 L24,56 C22.9,56 22,55.1 22,54 C22,52.9 22.9,52 24,52 L29.5,52 L29.5,44.8 C23.3,43.7 16,36.2 16,27 L20,27 C20,34 25.4,39.5 32,39.5 C38.6,39.5 44,34 44,27 L48,27 Z" />
<!-- Mac Desktop / Display Badge Accent on Mic Body -->
<!-- Mini Mac Display / Apple Screen Symbol in Sleek Silver Accent -->
<path
android:fillColor="#38BDF8"
android:pathData="M28,26 L36,26 C37.1,26 38,26.9 38,28 L38,33 C38,34.1 37.1,35 36,35 L28,35 C26.9,35 26,34.1 26,33 L26,28 C26,26.9 26.9,26 28,26 Z" />
<path
android:fillColor="#0F172A"
android:pathData="M29,28 L35,28 L35,32 L29,32 Z" />
<path
android:fillColor="#38BDF8"
android:pathData="M30,35 L34,35 L35,37 L29,37 Z" />
<!-- Apple Leaf Accent at Top Corner -->
<path
android:fillColor="#10B981"
android:pathData="M48,10 C48,7.2 46.2,5.2 44,5 C43.8,7.4 45.4,9.8 48,10 Z" />
<path
android:fillColor="#0F172A"
android:pathData="M49.5,10.2 C48.3,10.2 47.3,10.9 46.5,10.9 C45.7,10.9 44.8,10.3 43.6,10.3 C41.6,10.3 39.8,12 39.8,15.2 C39.8,19.2 43.2,24 46.5,24 C47.5,24 48.2,23.3 49.3,23.3 C50.4,23.3 51,24 52.1,24 C54.3,24 56.5,20.8 57.1,19.5 C53.4,17.7 53,12.5 56.6,10.8 C55.3,8.9 53.3,8.7 52.4,8.7 C51.2,8.7 50.3,9.5 49.5,10.2 Z" />
</vector>

6
android/app/src/main/res/layout/activity_main.xml

@ -231,10 +231,10 @@
<ImageView <ImageView
android:id="@+id/ivMicIcon" android:id="@+id/ivMicIcon"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center" android:layout_gravity="center"
android:src="@drawable/ic_mic" />
android:src="@drawable/ic_mic_mac" />
</FrameLayout> </FrameLayout>
</FrameLayout> </FrameLayout>

Loading…
Cancel
Save