Dark mode coloration of command bar

[andrewtavis]

Terms

• I have searched open and closed design issues
• I agree to follow Scribe-Android's Code of Conduct

Description

This issue corrects a few issues with the command UI for the keyboards in dark mode:

1. The Scribe key icon should be white instead of black as shown below

2. The X to cancel the command selection or a command should also be white instead of black as is shown below
3. The color of the command keys should match the Scribe key and both should be dark Scribe blue (now the command keys are a bit lighter as shown below)

4. The command bar should be the same color as the rather than white as shown below
   • The color should be 2E2E2E, the same color as the special keyboard keys in dark mode like delete, shift, etc

Contribution

Lots to do in this issue, and totally fine to do more than one PR for the various changes! 🎃 Happy to support as needed and review PRs as they come 😊

[indra057]

hello sir can u please assign me this issue so i can get started .. and if i need any help can i message here?

[andrewtavis]

Sure thing, @indra057! Please let us know if you need any assistance and we'll do our best to help 😊

[indra057]

sir i didnt find the code exactly where do i need to fix the issue can u please guide me..or give me some more hints...

[indra057]

@andrewtavis sir please reply

[andrewtavis]

Hi sorry, @indra057. A lot has come up recently between work and another program starting. @angrezichatterbox, would you be able to support here and direct @indra057 to where the change would need to happen for the command bar coloration?

[indra057]

sorry @andrewtavis sir i am new to android development and i can't support that much as i didn't even understand the codebase and what is exactly happening i am just looking for simple issues that i can fix

where should i change the commands exactly so that i can fix the issue of the coloration of the toolbar

[andrewtavis]

@angrezichatterbox will provide some guidance here today or tomorrow, @indra057 :) Again sorry that I can't look for you right now.

[angrezichatterbox]

@indra057, don’t worry if you’re new to Android development! I’ll give you a basic overview of how our codebase is structured, specifically regarding the keyboard functionality that you will be dealing with in this issue.

Currently, we’re focusing on three main files:

• Services Directory: This contains the core functionality of the keyboard. Here, you'll find the logic for various key actions, like what happens when the Enter key is pressed or how different keys respond to user interactions. This directory is organized by language, with each language having its own set of actions defined.
• MyKeyboard.kt (in the Helpers Directory): This file serves as a helper that supports the main keyboard functionalities. It acts as a bridge, connecting the service logic with the UI elements.
• MyKeyboardView.kt (in the Views Directory): This file is responsible for the keyboard's visual design. It defines how the keyboard appears to the user and handles the layout of UI elements.
  You’ll also find that we can modify some UI elements directly from the Services Directory. For example, when a specific action occurs on the keyboard, we might want to update the UI accordingly.

Now, regarding the specific issue you’re working on, I recommend exploring the switchToToolbar function within the individual language services. Currently, this function changes the color of the top divider; you could also try adjusting the command bar color. In the individual keyboard IME, you’ll find how the colors are set for the translate and other buttons.

If anything I’ve mentioned isn’t clear, please don’t hesitate to ask. I’m here to help!

[angrezichatterbox]

Hey @indra057, just checking in to see if you’re still having trouble solving this issue. If you are, please don’t hesitate to ask us; we’re more than happy to help!

[Akshaykomar890]

@andrewtavis @angrezichatterbox Can I work on this ?

[andrewtavis]

Sure thing, @Akshaykomar890 :) Feel free to send along a PR, and let us know if you have any questions!

@indra057, you're of course welcome to still contribute here! Please let us know if you'd still definitely want to work on this, or we can also work to find you a new issue 😊

[Akshaykomar890]

@andrewtavis I can't find this application on play store to check the issue ,so should I first run locally this project in android emulator and test the issue ?

[Akshaykomar890]

@andrewtavis @angrezichatterbox I'm encountering the following error in app, and it prevents the app from launching—it crashes immediately:

FATAL EXCEPTION: main (Ask Gemini)
Process: be.scri.debug, PID: 13575
java.lang.RuntimeException: Unable to start activity ComponentInfo{be.scri.debug/be.scri.activities.MainActivity}: java.lang.UnsupportedOperationException: Can't convert value at index 1 to color: type=0x1
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3516)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3676)
at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85)
at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2116)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:236)
at android.app.ActivityThread.main(ActivityThread.java:7904)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967)
Caused by: java.lang.UnsupportedOperationException: Can't convert value at index 1 to color: type=0x1
at android.content.res.TypedArray.getColor(TypedArray.java:535)
at android.app.Activity.onApplyThemeResource(Activity.java:5189)
at android.view.ContextThemeWrapper.initializeTheme(ContextThemeWrapper.java:216)
at android.view.ContextThemeWrapper.setTheme(ContextThemeWrapper.java:147)
at android.app.Activity.setTheme(Activity.java:5167)

It occurs during the app launch
Could you assist in identifying the root cause?

[andrewtavis]

CC @angrezichatterbox, could you take a look at the above :)

And yes, @Akshaykomar890, the app isn't released, so you'd need to run it locally and test it against the current main branch :)

[andrewtavis]

@Akshaykomar890, try switching the color mode of your emulator. We did have an issue with this before in #155, so maybe we're seeing a version of it again?

[andrewtavis]

Fix for that was #157, so maybe there's a hint for fixing it and then we can commence with this issue? Thanks for communicating your issues!

[angrezichatterbox]

Were you able to fix the issue @Akshaykomar890 ?

[Akshaykomar890]

@andrewtavis @angrezichatterbox I'm encountering the following error in app, and it prevents the app from launching—it crashes immediately:

FATAL EXCEPTION: main (Ask Gemini) Process: be.scri.debug, PID: 13575 java.lang.RuntimeException: Unable to start activity ComponentInfo{be.scri.debug/be.scri.activities.MainActivity}: java.lang.UnsupportedOperationException: Can't convert value at index 1 to color: type=0x1 at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3516) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3676) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2116) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:236) at android.app.ActivityThread.main(ActivityThread.java:7904) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967) Caused by: java.lang.UnsupportedOperationException: Can't convert value at index 1 to color: type=0x1 at android.content.res.TypedArray.getColor(TypedArray.java:535) at android.app.Activity.onApplyThemeResource(Activity.java:5189) at android.view.ContextThemeWrapper.initializeTheme(ContextThemeWrapper.java:216) at android.view.ContextThemeWrapper.setTheme(ContextThemeWrapper.java:147) at android.app.Activity.setTheme(Activity.java:5167)

It occurs during the app launch
Could you assist in identifying the root cause?

@andrewtavis @angrezichatterbox I tried to switch color mode like dark to light and light to dark still same error shows in Logact

[Akshaykomar890]

@andrewtavis @angrezichatterbox Should I Run. 08ea993 this branch on my android studio as you mentioned above #157

[andrewtavis]

No let's please look into the current main here. What version of Android Studio are you running, @Akshaykomar890? @angrezichatterbox, anything else you can think of?

[Akshaykomar890]

@andrewtavis I am running android ladybug

[angrezichatterbox]

Have you tried rebuilding it once or Invalidating the cache ? Or try replace ScribeTheme with MaterialTheme and try whether it fixes your error.

[andrewtavis]

I just added a note on invalidating the caches to the readme and contributing guide in the environment setup section. You can see that here. That didn't work for me at first, so you may also want to try to recreate the emulator. I was actually also getting that the app wouldn't start, but then I invalidated the caches and remade the emulator and all's good :)

[Akshaykomar890]

@andrewtavis @angrezichatterbox Apologies for not replying earlier to your valuable suggestion; I’ve been tied up with an assignment and a personal project. Thank you for sharing the steps! I’m following them now and will let you know how it goes. I really appreciate your help and the detailed note you added to the setup guide.

Thanks again😊

[Akshaykomar890]

@andrewtavis @angrezichatterbox I am using a physical device, has @angrezichatterbox suggested I first invalidated the caches and changed theme from
android:theme="@style/AppTheme.Base"> to android:theme="@style/Theme.MaterialComponents.DayNight"> app successfully installed but when i try to open keyboard it doesn't open instead showing below error in logcat

ATAL EXCEPTION: main (Ask Gemini)
Process: be.scri.debug, PID: 30770
java.lang.RuntimeException: Unable to create service be.scri.services.EnglishKeyboardIME: android.view.InflateException: Binary XML file line #6 in be.scri.debug:layout/keyboard_view_keyboard: Binary XML file line #6 in be.scri.debug:layout/keyboard_view_keyboard: Error inflating class androidx.constraintlayout.widget.ConstraintLayout
at android.app.ActivityThread.handleCreateService(ActivityThread.java:4279)
at android.app.ActivityThread.access$1600(ActivityThread.java:246)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1982)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:236)
at android.app.ActivityThread.main(ActivityThread.java:7904)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967)
Caused by: android.view.InflateException: Binary XML file line #6 in be.scri.debug:layout/keyboard_view_keyboard: Binary XML file line #6 in be.scri.debug:layout/keyboard_view_keyboard: Error inflating class androidx.constraintlayout.widget.ConstraintLayout
Caused by: android.view.InflateException: Binary XML file line #6 in be.scri.debug:layout/keyboard_view_keyboard: Error inflating class androidx.constraintlayout.widget.ConstraintLayout
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Constructor.newInstance0(Native Method)
at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
at android.view.LayoutInflater.createView(LayoutInflater.java:856)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1008)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:963)
at android.view.LayoutInflater.inflate(LayoutInflater.java:661)
at android.view.LayoutInflater.inflate(LayoutInflater.java:536)
at be.scri.databinding.KeyboardViewKeyboardBinding.inflate(KeyboardViewKeyboardBinding.java:105)
at be.scri.databinding.KeyboardViewKeyboardBinding.inflate(KeyboardViewKeyboardBinding.java:99)
at be.scri.services.GeneralKeyboardIME.onCreate(GeneralKeyboardIME.kt:105)
at be.scri.services.EnglishKeyboardIME.onCreate(EnglishKeyboardIME.kt:137)
at android.app.ActivityThread.handleCreateService(ActivityThread.java:4267)
at android.app.ActivityThread.access$1600(ActivityThread.java:246)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1982)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:236)
at android.app.ActivityThread.main(ActivityThread.java:7904)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967)
Caused by: android.content.res.Resources$NotFoundException: Drawable be.scri.debug:color/you_keyboard_background_color with resource ID #0x7f0604d9
Caused by: android.content.res.Resources$NotFoundException: Resource "be.scri.debug:color/you_keyboard_background_color" (7f0604d9) is not a Drawable (color or path): TypedValue{t=0x1/d=0x7f0604d9 a=-1 r=0x7f0604d9}
at android.content.res.ResourcesImpl.loadDrawableForCookie(ResourcesImpl.java:848)
at android.content.res.ResourcesImpl.originalLoadDrawable(ResourcesImpl.java:693)
at android.content.res.ResourcesImpl.loadDrawable(ResourcesImpl.java:600)
at android.content.res.MiuiResourcesImpl.loadDrawable(MiuiResourcesImpl.java:307)
at android.content.res.Resources.loadDrawable(Resources.java:1010)
at android.content.res.TypedArray.getDrawableForDensity(TypedArray.java:1008)
at android.content.res.TypedArray.getDrawable(TypedArray.java:983)
at android.view.View.(View.java:5689)
at android.view.ViewGroup.(ViewGroup.java:699)
at android.view.ViewGroup.(ViewGroup.java:695)
at android.view.ViewGroup.(ViewGroup.java:691)
2025-01-24 19:25:03.786 30770-30770 AndroidRuntime be.scri.debug E at androidx.constraintlayout.widget.ConstraintLayout.(ConstraintLayout.java:594) (Ask Gemini)
at java.lang.reflect.Constructor.newInstance0(Native Method)
at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
at android.view.LayoutInflater.createView(LayoutInflater.java:856)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1008)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:963)
at android.view.LayoutInflater.inflate(LayoutInflater.java:661)
at android.view.LayoutInflater.inflate(LayoutInflater.java:536)
at be.scri.databinding.KeyboardViewKeyboardBinding.inflate(KeyboardViewKeyboardBinding.java:105)
at be.scri.databinding.KeyboardViewKeyboardBinding.inflate(KeyboardViewKeyboardBinding.java:99)
at be.scri.services.GeneralKeyboardIME.onCreate(GeneralKeyboardIME.kt:105)
at be.scri.services.EnglishKeyboardIME.onCreate(EnglishKeyboardIME.kt:137)
at android.app.ActivityThread.handleCreateService(ActivityThread.java:4267)
at android.app.ActivityThread.access$1600(ActivityThread.java:246)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1982)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:236)
at android.app.ActivityThread.main(ActivityThread.java:7904)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:656)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:967)

[angrezichatterbox]

Could you try changing in the Main Activity ? Changing in theme overall would cause errors as the keyboard are not using colors from Material Theme ? Also could you try using an emulator. Please do also let us know your Phone model and API version as well.

[angrezichatterbox]

I think the issue you are facing is linked with #174