How to change background color of popup-keyboard for android soft keyboard?

Question

It took me a long time to figure out how to get rid of the ugly black default and color my custom keyboard.

I worked from this very helpful answer and I can now color my keyboard nicely: How to change background color of key for android soft keyboard?

Just the popup-keyboards are still in the default colors.

I found another helpful answer, which took me almost to a solution. But the answer is focusing on the creation and preview of the popups: Creating a SoftKeyboard with Multiple/Alternate characters per key

@Graeme has mentioned

If you want to change the layout/style of the popup (which defaults to @android:layout/ keyboard_popup_keyboard.xml) you can specify a android:popupLayout attribute which points to a layout file

So I have made my own version of keyboard_popup_keyboard.xml and put it next to my main layout file input.xml into /res/layout and made a reference to it, like in the example given.

<org.gasana.android.aniikeyboard.LatinKeyboardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/keyboard"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:keyBackground="@drawable/samplekeybackground"
    android:keyTextColor="#000000"
    android:popupLayout="@layout/popup"
/>

Sadly there was no example for the popupLayout file. So I copied the original file all the way up from

C:\Users\martin\AppData\Local\Android\sdk\platforms\android-28\data\res\layout\keyboard_popup_keyboard.xml

and tried to tweak it as popup.xml to use the same background as my main keyboard:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/samplekeybackground"
    >
<android.inputmethodservice.KeyboardView
    android:id="@android:id/keyboardView"
    android:background="@drawable/samplekeybackground"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:popupLayout="@layout/popup"
    android:keyTextSize="22sp"
    tools:ignore="ResourceCycle" />

<ImageButton android:id="@android:id/closeButton"
    android:background="@drawable/samplekeybackground"
    android:src="@drawable/btn_close" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginStart="8dp"
    android:clickable="true"
    />

My keyboard still builds and creates a working APK. Just the color of the popups is still the ugly default.

Context: I am a linguist, not a developper. I made this custom keyboard for a minority language with a special alphabet and tone-markers and have it free on the Play Store. It works. But people are hesitating, because of the aweful color-design. As soon as I get the popups colored, I will publish a fresh version. Thank you.

score 0 · Accepted Answer · answered Dec 29 '18 at 16:41

Since no answer was coming here for two months, I took time for more poking and guessing. Now I got lucky today and want to be nice to the next linguist, who also needs a custom keyboard and needs to work from examples:

mykeyboard.java is pointing to the layout file for the main keyboard so (third line "input"). I just give a three line quote:

    @Override public View onCreateInputView() {
    mInputView = (LatinKeyboardView) getLayoutInflater().inflate(
            R.layout.input, null);

So inside my \res\layout\input.xml I added the reference to my popup-layout:

<org.my.project.here.LatinKeyboardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/keyboard"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:keyBackground="@drawable/samplekeybackground"
    android:keyTextColor="#000000"
    android:popupLayout="@layout/popup"  <!-- here it is -->
/>

And my \res\layout\popup.xml looks like this; I believe I copied it from the provided sample project. Today I just changed the two marked lines for light blue background colour and for black text colour and that finally did the trick. Seems I had looped references earlier but no error messages, just the ugly black default layout.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/samplekeybackground">
<android.inputmethodservice.KeyboardView
    android:id="@android:id/keyboardView"
    android:background="@color/colorPrimary"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:keyTextSize="22sp"
    android:keyBackground="@drawable/samplekeybackground"  <!-- here it is -->
    android:keyTextColor="#000000"                         <!-- and here -->
    tools:ignore="ResourceCycle"/>
<ImageButton android:id="@android:id/closeButton"
    android:background="@android:color/transparent"
    android:src="@drawable/btn_close" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginStart="8dp"
    android:clickable="true"/>

The mentioned samplekeybackground.xml is just a very simple definition, pointing to two actual xml-colour-defintions:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item
    android:state_focused="false"
    android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@drawable/normal" />
<!-- Pressed state -->
<item
    android:state_pressed="true"
    android:drawable="@drawable/pressed" /></selector>

And just to be complete, because I appreciate stuff I can just copy and play with for testing, here is the normal.xml; the pressed.xml is the same, just a darker blue:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#A1B7F7" />
    <solid android:color="#C7D4FA"/>
</shape>

All this is from guessing and building many versions until I got lucky. Can probably not answer any follow-up questions, but it does work:

How to change background color of popup-keyboard for android soft keyboard?

1 Answers1