Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set different background of keys for Android Custom Keyboard

I am Working on Custom Keyboard Application

This is background color of key when user select blue

If user select green this should be background color

This is code for background color of input.xml in softkeyboard :-

     @Override
    public View onCreateInputView() {


      Log.e("onStartInputView ","On StartInput View Called--");

      SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(this);
      String Backgroundcolour = preferences.getString("BackgroundColour","");

     Log.e("Brithnesss- -","----"+Backgroundcolour);

    if(Backgroundcolour.equalsIgnoreCase("black"))
    {

    this.mInputView = (KeyboardView) getLayoutInflater().inflate(
            R.layout.input, null);


    }else
    {
        this.mInputView = (KeyboardView) getLayoutInflater().inflate(
            R.layout.input1, null);
        //this.mInputView.setB
    }

    this.mInputView.setOnKeyboardActionListener(this);
    this.mInputView.setKeyboard(this.mQwertyKeyboard);
    return this.mInputView;
}

 @Override public void onStartInputView(EditorInfo attribute, boolean restarting) {
    super.onStartInputView(attribute, restarting);
    // Apply the selected keyboard to the input view.

    setInputView(onCreateInputView());

}

I am not getting how to set background image for specific key.

like image 940
user Avatar asked Aug 14 '13 06:08

user


People also ask

How to change key background in Android keyboard?

According to the reference documents from google. We can change key's background by use " android:keybackground=@drawable/xxx " in " input.xml ", but it change background of all keys in keyboard. Although "android:keyicon" in qwerty.xml can have single key changed,but it only replace the label.

Does Google Keyboard have a background custom option?

If you are using the latest version of Google Keyboard on your Android phone, you are lucky since Google has introduced the background custom option. If not, you can download it from Play Store for free. Bear in mind that this feature is only available to version 5.1.23 or later.

How do I change the background color of my keyboard?

The code aligns our keyboard to the bottom of the screen and the background color is set to colorPrimary. This color is the one set in our values > colors.xml file — it’s easy to change later on. So just hop in there and change the respective color code to change the look a little. We’ve also referred to another layout for “keyboard preview.”

How to install a custom keyboard on an Android phone?

In this way, a custom Android keyboard can be installed. For this you should go to your “Settings” and then press “More”. Then tap “Application Manager” and choose “Google Keyboard”. Step 3: You will then have to go to the website where the phone keypad favourite files can be downloaded.


2 Answers

As an example, there's a small downloadable project that creates a custom numeric keyboard. To the CustomKeyboardView class there or to your own custom keyboard class, add a method like the following. It overrides the onDraw() method and draws the background of the key defined with code 7 (in this case the "0") red and all the other keys blue.

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    List<Key> keys = getKeyboard().getKeys();
    for (Key key : keys) {            
        if (key.codes[0] == 7) {
            Log.e("KEY", "Drawing key with code " + key.codes[0]);
            Drawable dr = (Drawable) context.getResources().getDrawable(R.drawable.red_tint);
            dr.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
            dr.draw(canvas);

        } else {
            Drawable dr = (Drawable) context.getResources().getDrawable(R.drawable.blue_tint);
            dr.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
            dr.draw(canvas);
        }            
    }
}

tinted keys

In this case, I didn't use 9-patch images, but just some simple 50% transparent square images and achieved an effect where the existing buttons are merely tinted with the colors I wanted. To get a more custom result, I could make my background drawables 9-patch images and do the following. Note that the two keys with icons don't render correctly because the icons aren't defined as 9-patch images and I didn't make any special effort to allow them to scale well for this example. I also didn't address the use of different images/effects for the various states for the keys; others have shown how to do that.

@Override
public void onDraw(Canvas canvas) {
    // super.onDraw(canvas);

    List<Key> keys = getKeyboard().getKeys();
    for (Key key : keys) {
        if (key.codes[0] == 7) {
            NinePatchDrawable npd
                = (NinePatchDrawable) context.getResources().getDrawable(R.drawable.red_key);
            npd.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
            npd.draw(canvas);

        } else {
            NinePatchDrawable npd
                = (NinePatchDrawable) context.getResources().getDrawable(R.drawable.blue_key);
            npd.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
            npd.draw(canvas);
        }

        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(48);
        paint.setColor(Color.GRAY);

        if (key.label != null) {
            canvas.drawText(key.label.toString(), key.x + (key.width / 2),
                            key.y + (key.height / 2), paint);
        } else {
            key.icon.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
            key.icon.draw(canvas);
        }
    }
}    

replaced keys

like image 76
scottt Avatar answered Oct 02 '22 15:10

scottt


I created a keyboard app in which I use the KeyBackground property in KeyboardView, like so:

<KeyboardView android:keyBackground="@drawable/buttonbgselector" .../>

To do this dynamically I use the following code:

@Override 
public View onCreateInputView() {
    mInputView = (KeyboardView) getLayoutInflater().inflate(R.layout.input, null);
    mInputView.setBackgroundResource(R.drawable.buttonbgselector);
    mInputView.setOnKeyboardActionListener(this);
    mInputView.setKeyboard(mQwertyKeyboard);
    return mInputView;
}
like image 25
harsh3898294 Avatar answered Oct 02 '22 15:10

harsh3898294