Integrating In-App Keyboard

There are use cases where the developers need a custom keyboard only for specific text fields within their app. In this case, having a system-wide keyboard is overkill and not a desired solution.

To mitigate this issue, Fleksy Keyboard SDK supports integrating as an in-app keyboard without needing a system-wide keyboard. This way, the developers can use the SDK-backed keyboard only for specific text fields inside their app.

On iOS, in any field of your app, you can replace the system-provided keyboard with a custom input view. In particular, with the in-app keyboard. For more information, please check the official Apple documentation.

In-App Keyboard for iOS

Initial Setup

To integrate in-app keyboard within an app, there are two possible ways to get started, i.e., either with a custom keyboard extension or without one.

Without Custom Keyboard Extension

To use the SDK, please note that you first need a license key which can be requested in the developer’s dashboard.

To integrate the Fleksy Keyboard SDK as in-app keyboard without creating a system wide keyboard (using custom keyboard extension), follow the following steps:

  1. Create a new class (for e.g. KeyboardViewController), import the FleksyKeyboardSDK package and inherit from FKKeyboardViewController.
  2. Override the method createConfiguration to return a configuration as shown below.
  3. Finally replace <your-license-key> and <your-license-secret> with your license.
It is recommended NOT to commit your license keys in the code but to store them as variables in the environment and access them during the compilation.
import FleksyKeyboardSDK

class KeyboardViewController: FleksyKeyboardSDK.FKKeyboardViewController {

    override func createConfiguration() -> KeyboardConfiguration {
        let style = StyleConfiguration()

        let appPopup = AppearancePopup()
        let appLongpress = AppearanceLongPress()
        let appearance = AppearanceConfiguration(
            objPopup: appPopup,
            objTouch: nil,
            objLongpress: appLongpress
        )

        let typing = TypingConfiguration()
        let panelConfig = PanelConfiguration()
        let debugConfig = DebugConfiguration(debug: ())

        let licenseConfig = LicenseConfiguration(
            licenseKey: "<your-license-key>",
            licenseSecret: "<your-license-secret>"
        )

        return KeyboardConfiguration(
            panel: panelConfig,
            capture: nil,
            style: style,
            appearance: appearance,
            typing: typing,
            specialKeys: nil,
            license: licenseConfig,
            debug: debugConfig
        )
    }
}

Once done, we can use this class to access the Fleksy Keyboard SDK as an in-app keyboard either via UIRsponder’s Subclass or by Using TextField’s or TextView’s inputView with our custom input views as required.

With Custom Keyboard Extension

This step builds upon the initial setup guide. If you still need to do the initial setup, please check out the instructions for the iOS platform before proceeding further.

In case a developer wishes to integrate to integrate the in-app keyboard with the custom keyboard extension, they can use the same FKKeyboardViewController subclass (i.e., KeyboardViewController) created during the initial setup guide for the keyboard extension as an in-app keyboard. However, first we need to add it to the app’s target.

To add the class to the app’s target, check out the Target Membership section in the File Inspector pane. Ensure both the app and keyboard extension are selected.

Target Membership

Afterward, there are two possible ways to have the custom keyboard as an in-app keyboard in the app listed below.

Via UIResponder’s Subclass

As pointed out in the official Apple documentation, we can override the inputViewController: UIInputViewController? property of UIResponder in its subclass. In the overridden inputViewController property, we can return your custom KeyboardViewController whose input view we want as an in-app keyboard.

For Example

The following example reflects how to do this for a UITextField subclass.

import UIKit

class CustomTextField: UITextField {
  
    private let keyboardViewController = KeyboardViewController()
    
    override var inputViewController: UIInputViewController? {
        return keyboardViewController
    }
}

The same can be done for any other UIResponder subclass (e.g., UITextView).

Using TextField’s or TextView’s inputView

If using a subclass of UIResponder is not preferred, we can change the inputView of any UITextField or UITextView to the one we want. In particular, we can change it to our in-app keyboard’s inputView.

For Example

Ensure to keep a strong reference to the KeyboardViewController; otherwise, unexpected behaviors can happen with the in-app keyboard.

The following example reflects how to do this for a UITextField subclass.

class ViewController: UIViewController {
    @IBOutlet weak var textField: UITextField!
    
    // IMPORTANT: keep a strong reference to the KeyboardViewController
    private let keyboardViewController = KeyboardViewController()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.textField.inputView = self.keyboardViewController.inputView
    }
}

The same can be done for any other UIResponder subclass (e.g., UITextView).

Additional Resources

For more information on working with themes, consider checking out the API reference documentation, which documents all the available methods to customize the keyboard built with Fleksy Keyboard SDK.

In-App Keyboard for Android

The objective of the In-App keyboard is to help any app developer to embed the Fleksy Keyboard in their app without it having to be configured system-wide.

Setup

To embed the Fleksy Keyboard SDK as an in-app keyboard an the following steps must be carried out:

  1. Create a class that inherits from the InAppKeyboardIntegration abstract class.

    1. Provide a configuration via KeyboardConfiguration
    2. Subscribe to the EventBus events if desired
  2. Initialise the InAppKeyboardSDK in the app’s Application class, providing the InAppKeyboardIntegration and context.

  3. Add the FleksyKeyboardProvider in the app’s Activities and call it’s methods in the corresponding places:

    1. onCreate()
    2. onResume()
    3. onBackPressed()

Example

InAppKeyboardIntegration is the class that will be used to configure the SDK and receive events. It is an abstract class with just 1 compoulsory component, which is the application context.

abstract class InAppKeyboardIntegration(val context: Context) {
    open val getAppIcon: Int? = null
    open fun createConfiguration() = KeyboardConfiguration()
    lateinit var eventBus: EventBus
}

The integrator must create a class that inherits from InAppKeyboardIntegration and initialize the InAppKeyboardSDK with it. For example:

class Integration(context: Context): InAppKeyboardIntegration(context) {
       
       override fun createConfiguration(): KeyboardConfiguration{
          TODO("Modify KeyboardConfiguration: https://docs.fleksy.com/sdk-android/api-reference-android/keyboardconfiguration/")
          return KeyboardConfiguration()
       }
       
       init{
          eventBus.service.subscribe{
              TODO("Subscribe to any events from the EventBus: https://docs.fleksy.com/sdk-android/api-reference-android/eventbus/")
          } 
       }
    }
class SDKApp : MultiDexApplication(){
    override fun onCreate() {
        super.onCreate()

        InAppKeyboardSDK.initialise(Integration(this))
    }
}

The final step is adding the FleksyKeyboardProvider to the desired activities via composition.

class SampleActivity: AppCompactActivity(){
    lateinit var keyboardProvider: FleksyKeyboardProvider
  
    override fun onCreate(savedInstanceState: Bundle?){
        super.onCreate()
        keyboardProvider = FleksyKeyboardProvider(this)
        keyboardProvider.onCreate()
        
        onBackPressedDispatcher.addCallback(this, object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                if(!keyboardProvider.onBackPressed(this)){
                    finish()
                }
            }
        })
    }
 
    override fun onResume(savedInstanceState: Bundle?){
        super.onResume()
        keyboardProvider.onResume(this)
    }
}

The FleksyKeyboard provider does the following:

  1. onCreate(activity: Activity) - initialises and creates the Keyboard and KeyboardView.
  2. onResume(activity: Activity) - finds all EditTexts in the Activity’s child views and registers them to the CustomKeyboard. This essentially prevents them from opening the system keyboard and instead opens the custom keyboard.
  3. onBackPressed(activity: Activity) - handles the back button press to close the keyboard. It will return:
    • true - The event was already handled.
    • false - The event was not handled (keyboard was already closed).

Something needs to be added, or found an error in our documentation? Please let us know by either on our GitHub or Discord.

Last updated on March 17, 2023