Showing options on top of the keyboard in Xamarin Forms

There are scenarios when using a text editor that we want to show some options on the top of the keyboard. For example, a compose email page might have options like Attach an Image/file, add a location, etc. In this article will show you how to do that in Xamarin Forms.

The result will look like this, but you can modify it according your design requirements:

As you can see above, ,it displays two buttons “Attach Media” and “Take Photo” on top of the keyboard.

Let’s see the code

There are two ways to achieve it:

1-Doing the UI in Forms and position the options over the keyboard.

2-Adding the options directly to the native InputAccessoryView in case of iOS

The first option allow us to share the same UI in both Android and iOS. But the second option just applies for iOS since Android doesn’t have the concept of an InputAccesoryView.

1-Positioning the UI over the keyboard

To achieve this we will guide from this article by XamGirl which basically will help us raise the UI over the keyboard.

1.1 Create your UI in XAML using Grid

(Make sure the Row that will contain the layout you want to place over the keyboard is defined as Auto).

PDT: In this view, we are using DataTrigger to disable the send button when there’s no text on the editor. Also to raise the keyboard when is the page is appearing we will use the Focus method in the code behind.

1.2 Create an extended Entry Renderer to raise the keyboard on iOS

We got this control and renderer from XamGirl Sample.

Control code here.

Renderer code here.

1.3 Add platform specific UseWindowSoftInputModeAdjust to App.xaml file with Resize value. (This just applies for Android)

Code here.

1.4 Removing Done button on iOS

Since we are using an Editor, on iOS by default it shows a Done button on top of the keyboard.

To remove it will use a custom renderer.

Now it should work on Android and iOS.

2-Do it using the native way by using a custom renderer.  (iOS) 

In case you want to add the keyboard options the native way. You can do it by using an Editor custom renderer and assign a custom Input Accessory View to the Control. Also, subscribe to listen to the options touch events to be able to handle when an option is tapped.

Here is the code:

Control

Custom Renderer

And that’s all!

You can check the full source code here. I used the Media Plugin to handle the select image options.

Happy keyboard options!