Implement key borders

app/src/main/kotlin/com/simplemobiletools/keyboard/views/MyKeyboardView.kt

@@ -9,10 +9,7 @@ import android.content.Context
 import android.content.Intent
 import android.graphics.*
 import android.graphics.Paint.Align
-import android.graphics.drawable.ColorDrawable
-import android.graphics.drawable.Drawable
-import android.graphics.drawable.LayerDrawable
-import android.graphics.drawable.RippleDrawable
+import android.graphics.drawable.*
 import android.os.Handler
 import android.os.Looper
 import android.os.Message
@@ -280,23 +277,9 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
             mPrimaryColor = context.getProperPrimaryColor()
             val strokeColor = context.getStrokeColor()
 
-            val toolbarColor = if (context.config.isUsingSystemTheme) {
-                resources.getColor(R.color.you_keyboard_toolbar_color, context.theme)
-            } else {
-                mBackgroundColor.darkenColor()
-            }
-
-            val darkerColor = if (context.config.isUsingSystemTheme) {
-                resources.getColor(R.color.you_keyboard_background_color, context.theme)
-            } else {
-                mBackgroundColor.darkenColor(2)
-            }
-
-            val miniKeyboardBackgroundColor = if (context.config.isUsingSystemTheme) {
-                resources.getColor(R.color.you_keyboard_toolbar_color, context.theme)
-            } else {
-                mBackgroundColor.darkenColor(4)
-            }
+            val toolbarColor = getToolbarColor()
+            val darkerColor = getKeyboardBackgroundColor()
+            val miniKeyboardBackgroundColor = getToolbarColor(4)
 
             if (changedView == mini_keyboard_view) {
                 val previewBackground = background as LayerDrawable
@@ -563,36 +546,10 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
         for (i in 0 until keyCount) {
             val key = keys[i]
             val code = key.code
-            var keyBackground = mKeyBackground
-            if (code == KEYCODE_SPACE) {
-                keyBackground = if (context.config.isUsingSystemTheme) {
-                    resources.getDrawable(R.drawable.keyboard_space_background_material, context.theme)
-                } else {
-                    resources.getDrawable(R.drawable.keyboard_space_background, context.theme)
-                }
-            } else if (code == KEYCODE_ENTER) {
-                keyBackground = resources.getDrawable(R.drawable.keyboard_enter_background, context.theme)
-            }
+            setupKeyBackground(key, code, canvas)
 
             // Switch the character to uppercase if shift is pressed
             val label = adjustCase(key.label)?.toString()
-            val bounds = keyBackground!!.bounds
-            if (key.width != bounds.right || key.height != bounds.bottom) {
-                keyBackground.setBounds(0, 0, key.width, key.height)
-            }
-
-            keyBackground.state = when {
-                key.pressed -> intArrayOf(android.R.attr.state_pressed)
-                key.focused -> intArrayOf(android.R.attr.state_focused)
-                else -> intArrayOf()
-            }
-
-            if (key.focused || code == KEYCODE_ENTER) {
-                keyBackground.applyColorFilter(mPrimaryColor)
-            }
-
-            canvas.translate(key.x.toFloat(), key.y.toFloat())
-            keyBackground.draw(canvas)
             if (label?.isNotEmpty() == true) {
                 // For characters, use large font. For labels like "Done", use small font.
                 if (label.length > 1) {
@@ -656,6 +613,57 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
         mDirtyRect.setEmpty()
     }
 
+    private fun setupKeyBackground(key: MyKeyboard.Key, keyCode: Int, canvas: Canvas) {
+        val showKeyBorders = context.config.showKeyBorders
+        val drawableId = when (keyCode) {
+            KEYCODE_SPACE -> if (context.config.isUsingSystemTheme) {
+                if (showKeyBorders) {
+                    R.drawable.keyboard_space_background_material_outlined
+                } else {
+                    R.drawable.keyboard_space_background_material
+                }
+            } else {
+                if (showKeyBorders) {
+                    R.drawable.keyboard_key_selector_outlined
+                } else {
+                    R.drawable.keyboard_space_background
+                }
+            }
+            KEYCODE_ENTER -> if (showKeyBorders) {
+                R.drawable.keyboard_enter_background_outlined
+            } else {
+                R.drawable.keyboard_enter_background
+            }
+            else -> if (showKeyBorders) {
+                R.drawable.keyboard_key_selector_outlined
+            } else {
+                R.drawable.keyboard_key_selector
+            }
+        }
+        val keyBackground = resources.getDrawable(drawableId, context.theme)
+
+        val bounds = keyBackground!!.bounds
+        if (key.width != bounds.right || key.height != bounds.bottom) {
+            keyBackground.setBounds(0, 0, key.width, key.height)
+        }
+
+        keyBackground.state = when {
+            key.pressed -> intArrayOf(android.R.attr.state_pressed)
+            key.focused -> intArrayOf(android.R.attr.state_focused)
+            else -> intArrayOf()
+        }
+
+        if (key.focused || keyCode == KEYCODE_ENTER) {
+            keyBackground.applyColorFilter(mPrimaryColor)
+        } else if (showKeyBorders && drawableId == R.drawable.keyboard_key_selector_outlined) {
+            val keyColor = getKeyColor(key.pressed)
+            keyBackground.applyColorFilter(keyColor)
+        }
+
+        canvas.translate(key.x.toFloat(), key.y.toFloat())
+        keyBackground.draw(canvas)
+    }
+
     private fun handleClipboard() {
         if (mToolbarHolder != null && mPopupParent.id != R.id.mini_keyboard_view) {
             val clipboardContent = context.getCurrentClip()
@@ -767,7 +775,7 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
                 val newKey = keys[mCurrentKeyIndex]
 
                 val code = newKey.code
-                if (code == KEYCODE_SHIFT || code == KEYCODE_MODE_CHANGE || code == KEYCODE_DELETE || code == KEYCODE_ENTER || code == KEYCODE_SPACE) {
+                if (context.config.showKeyBorders || (code == KEYCODE_SHIFT || code == KEYCODE_MODE_CHANGE || code == KEYCODE_DELETE || code == KEYCODE_ENTER || code == KEYCODE_SPACE)) {
                     newKey.pressed = true
                 }
 
@@ -819,11 +827,7 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
             }
         }
 
-        val previewBackgroundColor = if (context.config.isUsingSystemTheme) {
-            resources.getColor(R.color.you_keyboard_toolbar_color, context.theme)
-        } else {
-            mBackgroundColor.darkenColor(4)
-        }
+        val previewBackgroundColor = getToolbarColor(4)
 
         val previewBackground = mPreviewText!!.background as LayerDrawable
         previewBackground.findDrawableByLayerId(R.id.button_background_shape).applyColorFilter(previewBackgroundColor)
@@ -1529,4 +1533,55 @@ class MyKeyboardView @JvmOverloads constructor(context: Context, attrs: Attribut
             invalidateAllKeys()
         }
     }
+
+    private fun maybeDarkenColor(color: Int, factor: Int): Int {
+        // use darker background color when key borders are enabled
+        if (context.config.showKeyBorders && !context.isUsingSystemDarkTheme()) {
+            val darkerColor = color.darkenColor(factor)
+            return if (darkerColor == Color.WHITE) {
+                resources.getColor(R.color.md_grey_200, context.theme).darkenColor(4)
+            } else {
+                darkerColor
+            }
+        }
+        return color
+    }
+
+    private fun getToolbarColor(factor: Int = 8): Int {
+        val color = if (context.config.isUsingSystemTheme) {
+            resources.getColor(R.color.you_keyboard_toolbar_color, context.theme)
+        } else {
+            mBackgroundColor.darkenColor(factor)
+        }
+        return maybeDarkenColor(color, 2)
+    }
+
+    private fun getKeyboardBackgroundColor(): Int {
+        val color = if (context.config.isUsingSystemTheme) {
+            resources.getColor(R.color.you_keyboard_background_color, context.theme)
+        } else {
+            mBackgroundColor.darkenColor(2)
+        }
+        return maybeDarkenColor(color, 6)
+    }
+
+    private fun getKeyColor(pressed: Boolean): Int {
+        val backgroundColor = getKeyboardBackgroundColor()
+        val lighterColor = backgroundColor.lightenColor()
+        val keyColor = if (context.config.isUsingSystemTheme) {
+            lighterColor
+        } else {
+            if (backgroundColor == Color.BLACK) {
+                backgroundColor.getContrastColor().adjustAlpha(0.1f)
+            } else {
+                lighterColor
+            }
+        }
+
+        return if (pressed) {
+            keyColor.adjustAlpha(0.2f)
+        } else {
+            keyColor
+        }
+    }
 }

app/src/main/res/drawable/key_background_outlined.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@+id/key_normal" android:bottom="@dimen/small_margin" android:left="@dimen/tiny_margin" android:right="@dimen/tiny_margin" android:top="@dimen/small_margin">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <corners android:radius="@dimen/medium_margin"/>
+        </shape>
+    </item>
+</layer-list>

app/src/main/res/drawable/keyboard_enter_background_outlined.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@+id/button_background_shape" android:bottom="@dimen/small_margin" android:left="@dimen/tiny_margin" android:right="@dimen/tiny_margin" android:top="@dimen/small_margin">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/color_primary"/>
+            <corners android:radius="@dimen/medium_margin"/>
+        </shape>
+    </item>
+</layer-list>

app/src/main/res/drawable/keyboard_key_selector_outlined.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+<!--used after long pressing a key to highlight the currently selected key alternative on minikeyboard-->
+    <item android:drawable="@drawable/minikeyboard_selected_background" android:state_focused="true"/>
+    <item android:drawable="@drawable/key_background_outlined"/>
+</selector>

app/src/main/res/drawable/keyboard_space_background_material_outlined.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true">
+        <layer-list>
+            <item android:id="@+id/space_pressed" android:bottom="@dimen/small_margin" android:left="@dimen/tiny_margin" android:right="@dimen/tiny_margin" android:state_pressed="true" android:top="@dimen/small_margin">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/system_accent2_600"/>
+                    <corners android:radius="@dimen/medium_margin"/>
+                </shape>
+            </item>
+        </layer-list>
+    </item>
+    <item>
+        <layer-list>
+            <item android:id="@+id/space_normal" android:bottom="@dimen/small_margin" android:left="@dimen/tiny_margin" android:right="@dimen/tiny_margin" android:state_pressed="true" android:top="@dimen/small_margin">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/system_accent2_700"/>
+                    <corners android:radius="@dimen/medium_margin"/>
+                </shape>
+            </item>
+        </layer-list>
+    </item>
+</selector>