Adding a backdrop for the keyboard

app/src/main/java/com/dessalines/thumbkey/db/AppDb.kt

@@ -49,6 +49,7 @@ const val DEFAULT_KEY_BORDERS = 1
 const val DEFAULT_SPACEBAR_MULTITAPS = 1
 const val DEFAULT_SLIDE_SENSITIVITY = 9
 const val DEFAULT_SLIDE_ENABLED = 0
+const val DEFAULT_BACKDROP_ENABLED = 0
 
 @Entity
 data class AppSettings(
@@ -159,6 +160,11 @@ data class AppSettings(
         defaultValue = "0",
     )
     val lastVersionCodeViewed: Int,
+    @ColumnInfo(
+        name = "backdrop_enabled",
+        defaultValue = DEFAULT_BACKDROP_ENABLED.toString(),
+    )
+    val backdropEnabled: Int,
 )
 
 data class LayoutsUpdate(
@@ -223,6 +229,10 @@ data class LookAndFeelUpdate(
         name = "hide_symbols",
     )
     val hideSymbols: Int,
+    @ColumnInfo(
+        name = "backdrop_enabled",
+    )
+    val backdropEnabled: Int,
 )
 
 data class BehaviorUpdate(
@@ -400,8 +410,16 @@ val MIGRATION_9_10 = object : Migration(9, 10) {
     }
 }
 
+val MIGRATION_10_11 = object : Migration(10, 11) {
+    override fun migrate(database: SupportSQLiteDatabase) {
+        database.execSQL(
+            "alter table AppSettings add column backdrop_enabled INTEGER NOT NULL default $DEFAULT_BACKDROP_ENABLED",
+        )
+    }
+}
+
 @Database(
-    version = 10,
+    version = 11,
     entities = [AppSettings::class],
     exportSchema = true,
 )
@@ -434,6 +452,7 @@ abstract class AppDB : RoomDatabase() {
                         MIGRATION_7_8,
                         MIGRATION_8_9,
                         MIGRATION_9_10,
+                        MIGRATION_10_11,
                     )
                     // Necessary because it can't insert data on creation
                     .addCallback(object : Callback() {

app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardScreen.kt

@@ -15,6 +15,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalContext
@@ -28,6 +29,7 @@ import com.dessalines.thumbkey.db.AppSettings
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_HELPER_SPEED
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_SPEED
 import com.dessalines.thumbkey.db.DEFAULT_AUTO_CAPITALIZE
+import com.dessalines.thumbkey.db.DEFAULT_BACKDROP_ENABLED
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_LETTERS
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_SYMBOLS
 import com.dessalines.thumbkey.db.DEFAULT_KEYBOARD_LAYOUT
@@ -101,6 +103,8 @@ fun KeyboardScreen(
     val soundOnTap = (settings?.soundOnTap ?: DEFAULT_SOUND_ON_TAP).toBool()
     val hideLetters = (settings?.hideLetters ?: DEFAULT_HIDE_LETTERS).toBool()
     val hideSymbols = (settings?.hideSymbols ?: DEFAULT_HIDE_SYMBOLS).toBool()
+    val backdropEnabled = (settings?.backdropEnabled ?: DEFAULT_BACKDROP_ENABLED).toBool()
+    val backdropColor = MaterialTheme.colorScheme.background
 
     if (mode == KeyboardMode.EMOJI) {
         val controllerKeys = listOf(EMOJI_BACK_KEY_ITEM, NUMERIC_KEY_ITEM, BACKSPACE_KEY_ITEM, RETURN_KEY_ITEM)
@@ -219,10 +223,22 @@ fun KeyboardScreen(
         Box(
             contentAlignment = alignment,
             modifier = Modifier
+                .then(if (backdropEnabled) Modifier.background(backdropColor) else (Modifier))
                 .padding(bottom = pushupSizeDp),
         ) {
+            // adds a pretty line if you're using the backdrop
+            if (backdropEnabled) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopCenter)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(color = MaterialTheme.colorScheme.surfaceVariant),
+                )
+            }
             Column(
                 modifier = Modifier
+                    .then(if (backdropEnabled) Modifier.padding(top = 6.dp) else (Modifier))
                     .background(MaterialTheme.colorScheme.onBackground),
             ) {
                 keyboard.arr.forEach { row ->

app/src/main/java/com/dessalines/thumbkey/ui/components/settings/SettingsActivity.kt

@@ -40,6 +40,7 @@ import com.dessalines.thumbkey.db.AppSettingsViewModel
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_HELPER_SPEED
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_SPEED
 import com.dessalines.thumbkey.db.DEFAULT_AUTO_CAPITALIZE
+import com.dessalines.thumbkey.db.DEFAULT_BACKDROP_ENABLED
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_LETTERS
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_SYMBOLS
 import com.dessalines.thumbkey.db.DEFAULT_KEYBOARD_LAYOUT
@@ -268,6 +269,7 @@ private fun resetAppSettingsToDefault(
             vibrateOnTap = DEFAULT_VIBRATE_ON_TAP,
             lastVersionCodeViewed = appSettingsViewModel.appSettings.value?.lastVersionCodeViewed ?: 0,
             viewedChangelog = appSettingsViewModel.appSettings.value?.viewedChangelog ?: 1,
+            backdropEnabled = DEFAULT_BACKDROP_ENABLED,
         ),
 
     )

app/src/main/java/com/dessalines/thumbkey/ui/components/settings/lookandfeel/LookAndFeelActivity.kt

@@ -17,6 +17,7 @@ import androidx.compose.material.icons.outlined.MusicNote
 import androidx.compose.material.icons.outlined.Palette
 import androidx.compose.material.icons.outlined.VerticalAlignTop
 import androidx.compose.material.icons.outlined.Vibration
+import androidx.compose.material.icons.outlined.ViewDay
 import androidx.compose.material.icons.outlined.Visibility
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -43,6 +44,7 @@ import com.dessalines.thumbkey.R
 import com.dessalines.thumbkey.db.AppSettingsViewModel
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_HELPER_SPEED
 import com.dessalines.thumbkey.db.DEFAULT_ANIMATION_SPEED
+import com.dessalines.thumbkey.db.DEFAULT_BACKDROP_ENABLED
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_LETTERS
 import com.dessalines.thumbkey.db.DEFAULT_HIDE_SYMBOLS
 import com.dessalines.thumbkey.db.DEFAULT_KEY_BORDERS
@@ -112,6 +114,10 @@ fun LookAndFeelActivity(
 
     val scrollState = rememberScrollState()
 
+    val backdropEnabledState = rememberBooleanSettingState(
+        ((settings?.backdropEnabled ?: DEFAULT_BACKDROP_ENABLED).toBool()),
+    )
+
     Scaffold(
         snackbarHost = { SnackbarHost(snackbarHostState) },
         topBar = {
@@ -152,6 +158,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -183,6 +190,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -214,6 +222,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -243,6 +252,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -272,6 +282,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -301,6 +312,37 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
+                        )
+                    },
+                )
+                SettingsCheckbox(
+                    state = backdropEnabledState,
+                    icon = {
+                        Icon(
+                            imageVector = Icons.Outlined.ViewDay,
+                            contentDescription = null,
+                        )
+                    },
+                    title = {
+                        Text(stringResource(R.string.backdrop))
+                    },
+                    onCheckedChange = {
+                        updateLookAndFeel(
+                            appSettingsViewModel,
+                            keySizeState,
+                            pushupSizeState,
+                            animationSpeedState,
+                            animationHelperSpeedState,
+                            positionState,
+                            keyBordersState,
+                            vibrateOnTapState,
+                            soundOnTapState,
+                            hideLettersState,
+                            hideSymbolsState,
+                            themeState,
+                            themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -332,6 +374,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -363,6 +406,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -394,6 +438,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -430,6 +475,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -463,6 +509,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -492,6 +539,7 @@ fun LookAndFeelActivity(
                             hideSymbolsState,
                             themeState,
                             themeColorState,
+                            backdropEnabledState,
                         )
                     },
                 )
@@ -516,6 +564,7 @@ private fun updateLookAndFeel(
     hideSymbolsState: SettingValueState<Boolean>,
     themeState: SettingValueState<Int>,
     themeColorState: SettingValueState<Int>,
+    backdropEnabledState: SettingValueState<Boolean>,
 ) {
     appSettingsViewModel.updateLookAndFeel(
         LookAndFeelUpdate(
@@ -532,6 +581,7 @@ private fun updateLookAndFeel(
             hideSymbols = hideSymbolsState.value.toInt(),
             theme = themeState.value,
             themeColor = themeColorState.value,
+            backdropEnabled = backdropEnabledState.value.toInt(),
         ),
     )
 }

app/src/main/res/values/strings.xml

@@ -62,4 +62,5 @@
     <string name="key_borders">Key Borders</string>
     <string name="spacebar_multitaps">Spacebar Multi-taps</string>
     <string name="done">Done</string>
+    <string name="backdrop">Keyboard Backdrop</string>
 </resources>