Skip to main content

Advanced Integration

Overview​

QuickBoard can be used with existing applications without requiring any modifications. If desired, an application can be customized to take greater control over what keyboard layout is displayed for a given input field. This page describes how the XML layout file of an application can be modified to control how QuickBoard displays the keyboard layout for an input field.

Sample Keyboard Layout​

In the following examples, it is assumed that the device has a custom keyboard layout file. This custom layout is the same as the built-in layout, but includes an additional layout named "wizard".

Example Layout File Usage​

The following examples show the declaration of an EditText control which would exist as part of a more complete application XML layout file.

info

The XML EditText tags do not include attributes such as alignment and hint which would normally exist in production code. Only the relevant fields for describing the given layout are shown.

Standard Input Field​

A typical input field might look similar to the following, which creates a field that expects numeric input. The layout associated with the "number" layout will be displayed. All standard input field types (and subtypes) are supported. See Android Developer documentation for a complete list.

<EditText android:id="@+id/inputField"
    ...
    android:inputType="number" />

Display Scanner Layout​

If you want to start with the "Scan" layout displayed, include the privateImeOptions attribute and set it to "scan".

<EditText android:id="@+id/inputField"
    ...
    android:inputType="number"
    android:privateImeOptions="scan" />
info

Use of the "scan" custom layout will not prevent the user from toggling back to the normal layout (number in this example) for manual typing. It only determines the initial layout that is displayed.

Display Custom Layout​

If you want to use a custom layout for an input field, set the privateImeOptions attribute to the name of the custom layout (in the layout file). This example displays the "wizard" layout.

<EditText android:id="@+id/inputField"
    ...
    android:privateImeOptions="wizard" />
info

If the custom layout does not exist, the keyboard layout will be chosen based on the value of the inputType attribute.

Display Custom Layout with Scanner​

If you want to use a custom layout but start with the "Scan" layout, the value of the privateImeOptions attribute may be combined with a vertical bar separator. The order of the combined values is not significant. This example initially displays the "Scan" layout, but displays the "wizard" layout when the "Scan" toggle button in the toolbar is tapped.

<EditText android:id="@+id/inputField"
    ...
    android:privateImeOptions="scan|wizard" />

Example Web Page Usage​

The following example shows how to include an edit field in a web page and use it to control which layout is displayed in the IME.

info

The HTML input field tags do not include style attributes such as size or maxLength which would normally exist in a production page. Only the relevant atributes for describing the given layout are shown.

A typical input field might look similar to the following, which creates a field that expects numeric input. The layout associated with the "number" layout will be displayed.

<form>
  <label for="quantity">Item quantity:</label>
  <input type="number" id="quantity" name="quantity">
</form>

The <input> element includes a type attribute which specifies the type of input to expect from the user. This attribute controls how the web browser will display the input field. See the HTML input element documentation here for a complete list of attributes, including input types.

For some input types, such as button or checkbox, a completely different UI element is displayed. For others, the IME will appear, using a layout appropriate to the specified type. The IME will respond to the following input types: number, password, text, url.