Blur the edges of UI background shapes (#960)

MozillaReality · Mar 27, 2019 · 8b6649c · 8b6649c
1 parent 4d5fb75
commit 8b6649c
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 17 deletions.
diff --git a/app/src/main/res/drawable/dialog_background.xml b/app/src/main/res/drawable/dialog_background.xml
@@ -2,5 +2,6 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="15dp" />
+    <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/asphalt"/>
 </shape>
diff --git a/app/src/main/res/drawable/edittext_background.xml b/app/src/main/res/drawable/edittext_background.xml
@@ -4,12 +4,7 @@
        android:padding="10dp"
        android:shape="rectangle" >
 
+    <corners android:radius="5dp" />
+    <stroke android:color="@color/fog_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/fog" />
-
-    <corners
-            android:bottomLeftRadius="5dp"
-            android:bottomRightRadius="5dp"
-            android:topLeftRadius="5dp"
-            android:topRightRadius="5dp" />
-
 </shape>
diff --git a/app/src/main/res/drawable/keyboard_background.xml b/app/src/main/res/drawable/keyboard_background.xml
@@ -2,5 +2,6 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="30dp" />
+    <stroke android:color="@color/void_color_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/void_color"/>
 </shape>
diff --git a/app/src/main/res/drawable/main_button.xml b/app/src/main/res/drawable/main_button.xml
@@ -2,21 +2,25 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_enabled="false">
         <shape android:shape="oval">
+            <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/asphalt" />
         </shape>
     </item>
     <item android:state_pressed="true">
         <shape android:shape="oval">
+            <stroke android:color="@color/void_color_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/void_color" />
         </shape>
     </item>
     <item android:state_hovered="true" android:state_pressed="false">
         <shape android:shape="oval">
+            <stroke android:color="@color/fog_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/fog" />
         </shape>
     </item>
     <item android:state_hovered="false" android:state_pressed="false">
         <shape android:shape="oval">
+            <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/asphalt" />
         </shape>
     </item>

diff --git a/app/src/main/res/drawable/media_controls_background.xml b/app/src/main/res/drawable/media_controls_background.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
+    <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/asphalt"/>
     <corners android:radius="@dimen/media_controls_rounded_corners"/>
 </shape>
diff --git a/app/src/main/res/drawable/prompt_background.xml b/app/src/main/res/drawable/prompt_background.xml
@@ -2,5 +2,6 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
     <corners android:radius="8dp" />
+    <stroke android:color="@color/void_color_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/void_color"/>
 </shape>
diff --git a/app/src/main/res/drawable/settings_background.xml b/app/src/main/res/drawable/settings_background.xml
@@ -2,5 +2,6 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
     <corners android:radius="20dp" />
+    <stroke android:color="@color/void_color_blur" android:width="@dimen/blur_radius" />
     <solid android:color="@color/void_color"/>
 </shape>
diff --git a/app/src/main/res/drawable/url_background.xml b/app/src/main/res/drawable/url_background.xml
@@ -3,26 +3,48 @@
     <item android:state_enabled="false">
         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
             <corners android:radius="20dp" />
+            <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/asphalt" />
         </shape>
     </item>
     <item android:state_focused="true">
-        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
-            <corners android:radius="20dp" />
-            <solid android:color="@color/void_color" />
-            <stroke android:width="2dp" android:color="@color/azure" />
-        </shape>
+        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+            <item>
+                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="@dimen/blur_radius" android:color="@color/azure_blur" />
+                </shape>
+            </item>
+            <item android:start="@dimen/blur_radius_half" android:end="@dimen/blur_radius_half" android:top="@dimen/blur_radius_half" android:bottom="@dimen/blur_radius_half">
+                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <solid android:color="@color/void_color" />
+                    <stroke android:width="2dp" android:color="@color/azure" />
+                </shape>
+            </item>
+        </layer-list>
     </item>
     <item android:state_hovered="true" android:state_pressed="false">
-        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
-            <corners android:radius="20dp" />
-            <solid android:color="@color/asphalt" />
-            <stroke android:width="2dp" android:color="@color/azure" />
-        </shape>
+        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+            <item>
+                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="@dimen/blur_radius" android:color="@color/azure_blur" />
+                </shape>
+            </item>
+            <item android:start="@dimen/blur_radius_half" android:end="@dimen/blur_radius_half" android:top="@dimen/blur_radius_half" android:bottom="@dimen/blur_radius_half">
+                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <solid android:color="@color/asphalt" />
+                    <stroke android:width="2dp" android:color="@color/azure" />
+                </shape>
+            </item>
+        </layer-list>
     </item>
     <item android:state_hovered="false" android:state_pressed="false">
         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
             <corners android:radius="20dp" />
+            <stroke android:color="@color/asphalt_blur" android:width="@dimen/blur_radius" />
             <solid android:color="@color/asphalt" />
         </shape>
     </item>

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -7,6 +7,7 @@
     <color name="ocean">#314259</color>
     <color name="dusk">#556f8e</color>
     <color name="azure">#518fe1</color>
+    <color name="azure_blur">#80518fe1</color>
     <color name="concrete">#9ea3ab</color>
     <color name="sky">#75eff9</color>
     <color name="silver">#e3e4e5</color>
@@ -15,8 +16,11 @@
     <color name="spark">#f7ce4d</color>
     <color name="eggplant">#45236d</color>
     <color name="void_color">#232426</color>
+    <color name="void_color_blur">#80232426</color>
     <color name="asphalt">#3d3d3d</color>
+    <color name="asphalt_blur">#303d3d3d</color>
     <color name="fog">#e2e6eb</color>
+    <color name="fog_blur">#30e2e6eb</color>
     <color name="fog_url_protocol">#c2c6cb</color>
     <color name="grass">#8dc63f</color>
     <color name="dessert">#ef4136</color>

diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
@@ -153,4 +153,8 @@
 
     <!-- Bookmarks -->
     <dimen name="bookmark_row_height">64dp</dimen>
+
+    <!-- Blur -->
+    <dimen name="blur_radius">2dp</dimen>
+    <dimen name="blur_radius_half">1dp</dimen>
 </resources>