From cf418357ba53e74956bf933bc573a37a4a39fe10 Mon Sep 17 00:00:00 2001
From: Imanol Fernandez <mortimergoro@gmail.com>
Date: Tue, 19 Feb 2019 14:18:37 +0100
Subject: [PATCH] Blur the edges of UI background shapes

---
 .../main/res/drawable/dialog_background.xml   |  1 +
 .../main/res/drawable/keyboard_background.xml |  1 +
 app/src/main/res/drawable/main_button.xml     |  4 ++
 .../drawable/media_controls_background.xml    |  1 +
 .../main/res/drawable/settings_background.xml |  1 +
 app/src/main/res/drawable/url_background.xml  | 42 ++++++++++++++-----
 app/src/main/res/values/colors.xml            |  4 ++
 app/src/main/res/values/dimen.xml             |  4 ++
 8 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/app/src/main/res/drawable/dialog_background.xml b/app/src/main/res/drawable/dialog_background.xml
index 9aeaccf51..3f82aca15 100644
--- 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>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/keyboard_background.xml b/app/src/main/res/drawable/keyboard_background.xml
index cac4d0bca..bb31a4793 100644
--- 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
index d3b1d31d2..e990b0455 100644
--- 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
index 219671546..6d9423cbb 100644
--- 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/settings_background.xml b/app/src/main/res/drawable/settings_background.xml
index 7eab0cefa..15203fe7b 100644
--- 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>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/url_background.xml b/app/src/main/res/drawable/url_background.xml
index d1b4cb361..bddd63a98 100644
--- 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
index 7d579cacd..29e849e1d 100644
--- 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">#30232426</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
index a132583c6..549874e1c 100644
--- a/app/src/main/res/values/dimen.xml
+++ b/app/src/main/res/values/dimen.xml
@@ -150,4 +150,8 @@
 
     <!-- Bookmarks -->
     <dimen name="bookmark_row_height">64dp</dimen>
+
+    <!-- Blur -->
+    <dimen name="blur_radius">2dp</dimen>
+    <dimen name="blur_radius_half">1dp</dimen>
 </resources>
\ No newline at end of file