5,595,428 Members 47,920 Now Online
XDA Developers Android and Mobile Development Forum

[GUIDE] The right Soft Keyboard (+adding a CustomKeyboard)

Tip us?
 
SimplicityApks
Old
(Last edited by SimplicityApks; 24th October 2013 at 08:48 PM.)
#1  
SimplicityApks's Avatar
Senior Member - OP
Thanks Meter 277
Posts: 252
Join Date: May 2013
Location: Aachen
Calculator [GUIDE] The right Soft Keyboard (+adding a CustomKeyboard)

Hi devs,

During development of my app (see my signature), I researched a bit and finally found a quite nice way to implement a custom keyboard which is only shown in your app easily.
Much of this is taken from Maarten Pennings' awesome guide here, thanks to him and feel free to read it as well.
So I thought I'd extend his work with this guide which also takes a look at why you'd want to use one or the other keyboard. Enjoy!


Click image for larger version

Name:	Main-error.jpg
Views:	319
Size:	23.7 KB
ID:	2347941
Quote:

Limits of the Android IME
Any kind of text input (password, number, address, etc.) is usually handled very nicely using the android:inputType attribute (or the corresponding setter in java) on the EditText field.
But as soon as you have to deny some characters, for instance you want the user to insert a file name, it gets more complicated since there is no inputType for that.

The way to achieve that would be to implement your own KeyListener like this:
Code:
import android.text.method.NumberKeyListener;
//...

	// set a new KeyListener onto your desired EditText, overriding the default one:
	EditText edit = findViewById(R.id.edittext);
	edit.setKeyListener(new NumberKeyListener(){

		@Override
		public int getInputType() {
			// should be the same as android:inputType, for all numbers including decimal and negative:
			return (InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL | InputType.TYPE_NUMBER_FLAG_SIGNED);
		}

		@Override
		protected char[] getAcceptedChars() {
			// declare your desired chars here, ONLY those will be accepted!
			// for instance numbers:
			char [] res = {'1', '2', '3',
				'4', '5', '6', 
				'7', '8', '9', 
				'0', '+', '-', '*', '/',
				'(', ')', '.', ',', ' ', '^', '!',
				// alphabet:
				'a', 'b', 'c', 'd', 'e', 
				'f', 'g', 'h', 'i', 'j', 
				'k', 'l', 'm', 'n', 'o',
				'p', 'q', 'r', 's', 't', 
				'u', 'v', 'w', 'x', 'y',
				'z'
			};
			return res;
		}	
	});
The problem is that the keys are still present and therefore distracting and irritating to the user, because nothing happens on click.
And also, there might be a much easier and better accessible layout for your set of keys. In the following I will tell you how to integrate such a custom layout using the KeyboardView class, but first let's take a look at the advantages of both keyboards:


Android IME or KeyboardView???
The answer to this question is tightly depending on the task you want the user to fulfil, and also on how much freedom you want to give him. The high customizablility and its theming options are a strong point for the KeyboardView, but be warned that since this View was added in API level 3 (and never updated I think) there are a couple of bugs which you have to workaround.
A standard keyboard is more familiar to the user and is often also a third-party keyboard and therefore more customizable. But this also has its downsides since there is no guarantee that the IME will display the characters you need.
Note that you will not be able to get a working cursor image easily with the KeyboardView (though the cursor works as it should, just the blue arrow below it won't be displayed).

Click image for larger version

Name:	Main-log2.jpg
Views:	348
Size:	24.2 KB
ID:	2347942

For simple tasks where just a few buttons will be useless, such as when asking for a filename the normal IME is recommended. But for various operations you'll find the KeyboardView to be much cleaner.
If you decided to try the KeyboardView, here's how it works:


Adding a CustomKeyboard
NOTE: I will only cover how to implement such a Keyboard, if you want to know how it works in detail check out the third chapter in Maarten Pennings' guide.

First, since it is a view, you will need to manually insert the following to the xml layout file of all activities where you want to use it:
Code:
<android.inputmethodservice.KeyboardView
        android:id="@+id/keyboardview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:visibility="gone" />
Put it in a relative layout container, though it should also work in other ones. Most important is that it is the topmost container in the view hierarchy.

Second, you need an xml file where all the keys and their layout are stored for the KeyboardView to inflate. For a start, you can take the one Maarten Pennings has posted or download mine here: keyboard_layout.txt (xda doesn't support .xml files, so just rename it to keyboard_layout.xml!)
Move that file to your res/xml/ folder, you can create other layouts for landscape using res/xml-land/

You have to play around with that file a bit to get your desired layout, here are some tips:
  • Start by designing it on paper, then write it as a comment (ASCII-Art‎?) so you have it properly lined up and always at your hand while coding
  • Including gaps of half a key or so to separate different areas works nicely
  • Highlight important keys either with a different android:keyBackground or by making them larger than the others.
  • Leave the android:horizontalGap attribute untouched on Keyboard level, this will probably break the key lineup
  • Calculate the key width like so: width = 100/(keysPerRow + numberOfGaps)
  • Set the android:keyHeight on Keyboard level to something that rows*keyHeight is about 40%-50%.
  • For every key label which is longer a single character, use the corresponding ASCII-integer as key code (android:codes), otherwise pick a negative number or one that's higher than 256
  • Use android:isRepeatable="true" for keys to press and hold for multiple clicks like the delete key
  • If you want to display a popup keyboard on hold, you should rather make a popup window yourself or use a dialog rather than using the androidopupKeyboard attribute.
  • For inserting more than one char on click, use the android:keyOutputText on key level or override the specific keycode in the onKey() method in CustomKeyboard.java
As I said, you will need some patience doing this since there is neither help nor documentation on the xml namespaces.

Third, there are a couple of icons required for some keys like the delete key. You can either use the ones provided in the guide, but I suggest downloading the original holo android icons from the different drawable folders here.
Take the sym_keyboard_... files that you think you'll need and place them in the respective res/drawable-ydpi folder. Set the android:keyIcon attribute to @drawable/sym_keyboard_... for those special keys.

Fourth, we need a java class to process the clicks and provide the methods for showing and hiding the keyboard. Luckily, you take mine here: CustomKeyboard.txt (again, rename it to CustomKeyboard.java)
Copy that file into your src/com/package/name and change the package to your app.
This class is heavily based of the one Maarten Pennings has come up with, but with an actually working cursor, so that you can tap or drag to move the cursor. I included haptic feedback (set it using enableHapticFeedback(true)) and a easy way to add chooser dialogs if you want to have multiple inertions in one key (see the onClick(...) method); This looks like this:
Click image for larger version

Name:	Main-math-additional.jpg
Views:	361
Size:	23.9 KB
ID:	2347943
If you are using any special keys or dialogs as popups, you will need to edit the onKey() or the onClick() method like I did.

Fifth, in your onCreate() method after setContentView(...) you just need to register every EditText that you want to use the keyboard on like so:
Code:
// initialize the instance variable customKeyboard
	customKeyboard = new CustomKeyboard(this, R.id.keyboardview, R.xml.keyboard_layout);
	// register the edittext
	customKeyboard.registerEditText(R.id.edittext);
For a hiding keyboard if you press the Back key, add the following to your activity:
Code:
@Override 
	public void onBackPressed() {
        if(customKeyboard!=null && customKeyboard.isCustomKeyboardVisible() ) customKeyboard.hideCustomKeyboard(); else super.onBackPressed();
    }
Congrats, you have finished adding a CustomKeyboard and can now test and further improve it
Read on if you want to theme it further (let's face it, the default theme is still from the first versions of android).
The Following 9 Users Say Thank You to SimplicityApks For This Useful Post: [ Click to Expand ]
 
SimplicityApks
Old
(Last edited by SimplicityApks; 26th October 2013 at 09:44 PM.)
#2  
SimplicityApks's Avatar
Senior Member - OP
Thanks Meter 277
Posts: 252
Join Date: May 2013
Location: Aachen
Calculator Theming your Keyboard

Theming the KeyboardView

To make your newly created keyboard fit more to the overall style of your app, it is crucial to theme it.

Quote:
Here are some attributes which you'll want to customize:
Code:
<!-- on KeyboardView level: (in android.inputmethodservice.KeyboardView in your activity) -->
	android:keyBackground
	android:keyTextColor
	android:keyTextSize
	android:background
	<!-- on Key level: -->
	android:isSticky 
	<!-- for toggle keys like shift or ALT only -->
	android:isModifier
These are all pretty self-explanatory, the most important one being the keyBackground.
You will need different drawables for each of the keys states including normal, pressed, active, popup and either light or dark theme.

As an example, here's how I made the holo style: Basically I took the holo drawables from source and added android:keyBackground="@drawable/btn_keyboard_key_ics" in our KeyboardView (not Keyboard!).
  1. Download those icons from here.
  2. Specifically, you need the btn_keyboard_key_ics.xml file in the drawable folder and all the btn_keyboard_key_... from the xhdpi, hdpi and mdpi folder that you need, at least btn_keyboard_key_dark_normal_holo and btn_keyboard_key_dark_pressed_holo.
  3. The btn_keyboard_key_ics.xml goes into your res/drawable folder and all the others should be dumped into their respective res/drawable-ydpi folder.
  4. From the key_ics file delete all items where you didn't download the .9.pngs so they don't give compilation errors.
I hope you found this helpful and I could save you a bit of work. If you have any questions or suggestions, feel free to post them here!

This guide was featured on the portal on 26th October (thanks Will Verduzco!)
The Following 4 Users Say Thank You to SimplicityApks For This Useful Post: [ Click to Expand ]
 
anurag.dev1512
Old
#4  
Account currently disabled
Thanks Meter 198
Posts: 112
Join Date: Aug 2013

 
DONATE TO ME
Talking Can we edit the third party stock keyboards....

Quote:
Originally Posted by SimplicityApks View Post
Theming the KeyboardView

To make your newly created keyboard fit more to the overall style of your app, it is crucial to theme it.


I hope you found this helpful and I could save you a bit of work. If you have any questions or suggestions, feel free to post them here!

This guide was featured on the portal on 26th October (thanks Will Verduzco!)
Since i like the stock keyboard of htc one ... just wanted to know if i replace the resources of stock keyboard of AOSP with that of keyboard from
htc one will it work or do i nedd to do some modding....
The Following User Says Thank You to anurag.dev1512 For This Useful Post: [ Click to Expand ]
 
SimplicityApks
Old
#5  
SimplicityApks's Avatar
Senior Member - OP
Thanks Meter 277
Posts: 252
Join Date: May 2013
Location: Aachen
Quote:
Originally Posted by anurag.dev1512 View Post
Since i like the stock keyboard of htc one ... just wanted to know if i replace the resources of stock keyboard of AOSP with that of keyboard from
htc one will it work or do i nedd to do some modding....
You mean you want to have a KeyboardView in your app with the layout files from the HTC keyboard? Sure, that'll work, you only need to get the resources (decompile keyboard app?). Some layout adjustments might be needed of course...
 
anurag.dev1512
Old
#6  
Account currently disabled
Thanks Meter 198
Posts: 112
Join Date: Aug 2013

 
DONATE TO ME
Talking reply

Quote:
Originally Posted by SimplicityApks View Post
You mean you want to have a KeyboardView in your app with the layout files from the HTC keyboard? Sure, that'll work, you only need to get the resources (decompile keyboard app?). Some layout adjustments might be needed of course...
no bro i m saying to mod the stock keyboard of jellybean with that of stock keyboard of htc one...
The Following User Says Thank You to anurag.dev1512 For This Useful Post: [ Click to Expand ]
 
SimplicityApks
Old
#7  
SimplicityApks's Avatar
Senior Member - OP
Thanks Meter 277
Posts: 252
Join Date: May 2013
Location: Aachen
Quote:
Originally Posted by anurag.dev1512 View Post
no bro i m saying to mod the stock keyboard of jellybean with that of stock keyboard of htc one...
OK, sorry, I didn't read the title of your post...

That should be possible, although I have no idea about decompiling and modding. From what I understand, you could try making an XPosed module, that should work and is better since it can be applied at runtime.
 
a-ssassi-n
Old
(Last edited by a-ssassi-n; 31st October 2013 at 08:18 PM.)
#8  
a-ssassi-n's Avatar
Senior Member
Thanks Meter 165
Posts: 107
Join Date: Jun 2013
Location: Bangalore
Quote:
Originally Posted by SimplicityApks View Post
Hi devs,

During development of my app (see my signature), I researched a bit and finally found a quite nice way to implement a custom keyboard which is only shown in your app easily.
Much of this is taken from Maarten Pennings' awesome guide here, thanks to him and feel free to read it as well.
So I thought I'd extend his work with this guide which also takes a look at why you'd want to use one or the other keyboard. Enjoy!


Attachment 2347941


Congrats, you have finished adding a CustomKeyboard and can now test and further improve it
Read on if you want to theme it further (let's face it, the default theme is still from the first versions of android).
Nice
The Following 3 Users Say Thank You to a-ssassi-n For This Useful Post: [ Click to Expand ]
 
SimplicityApks
Old
#9  
SimplicityApks's Avatar
Senior Member - OP
Thanks Meter 277
Posts: 252
Join Date: May 2013
Location: Aachen
Default FunctionCapture

I just released my app to the Play Store, so if you want to see how the CustomKeyboard feels in action, download it here:
FunctionCapture


You might want to leave a review or +1 as well, that helps a lot, thanks!
The Following User Says Thank You to SimplicityApks For This Useful Post: [ Click to Expand ]
 
tejal
Old
#10  
Junior Member
Thanks Meter 0
Posts: 1
Join Date: Jan 2014
Quote:
Originally Posted by SimplicityApks View Post
Theming the KeyboardView

To make your newly created keyboard fit more to the overall style of your app, it is crucial to theme it.


I hope you found this helpful and I could save you a bit of work. If you have any questions or suggestions, feel free to post them here!

This guide was featured on the portal on 26th October (thanks Will Verduzco!)
hi... I am not able to download resources for custom keyboard... please help me

Tags
app android, custom, guide, keyboard
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes