Inserting images via keyboard (Gboard)

Using the UI Kit – in the conversation view, trying to insert an image from the keyboard/giphy search, and it comes back:

(app name) does not support image insertion here.

What changes need to be made to get this working? I imagine it’s something along these lines:

https://developer.android.com/guide/topics/text/image-keyboard#java

but can’t seem to get it quite right with the etCompose instance in ComposeBox.java.

Thanks!

1 Like

Hey @billdacat,

You can modify the ComposeBox.java as per your requirement. You can add support for image and GIF referring the same documentation you are following right now.

1 Like

Right, I just haven’t figured out exactly how to modify it. Is there any example apps/code that show this (aside from what has already been mentioned)?

Hey @billdacat At the moment we don’t have any code sample for you .
We plan to add this feature in our future release however we don’t have any definite timeline for the same. You can refer to https://overflow.buffer.com/2018/08/09/exploring-image-keyboard-support-on-android/ and read about how image support from keyboard works.

1 Like

Thanks. Looking forward to it. Tried to get it working and it appeared it was trying to return the image to CometChat, but it would never show. If someone else has a working solution, please share it!

1 Like

Hi @billdacat,

You need to use AppCompatEditText to Insert image from keyboard.
You can use the following code to get the URL of the image selected from keyboard and show it using Glide. To send image via keyboard you have to download it from the URL.

You can get URL using inputContentInfo.getLinkUri()

AppCompatEditText newmessageField = new AppCompatEditText(this){
        @Override
        public InputConnection onCreateInputConnection(EditorInfo editorInfo) {
            final InputConnection ic = super.onCreateInputConnection(editorInfo);
            EditorInfoCompat.setContentMimeTypes(editorInfo,
                    new String [] {"image/png","image/gif"});


            final InputConnectionCompat.OnCommitContentListener callback =
                    new InputConnectionCompat.OnCommitContentListener() {
                        @Override
                        public boolean onCommitContent(InputContentInfoCompat inputContentInfo,
                                                       int flags, Bundle opts) {
                            // read and display inputContentInfo asynchronously
                            if (BuildCompat.isAtLeastNMR1() && (flags &
                                    InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION) != 0) {
                                try {
                                    inputContentInfo.requestPermission();
                                }
                                catch (Exception e) {
                                    return false; // return false if failed
                                }
                            }

                            Glide.with(context).load(inputContentInfo.getLinkUri()).into(imageView);
                            // read and display inputContentInfo asynchronously.
                            // call inputContentInfo.releasePermission() as needed.

                            return true;  // return true if succeeded
                        }
                    };
            return InputConnectionCompat.createWrapper(ic, editorInfo, callback);
        }

    };
2 Likes

Still can’t seem to get this working right, keeps giving me the error that it doesn’t support image insertion. Would it be possible to get the repo (https://github.com/cometchat-pro/android-chat-ui-kit) updated with the code that supports gif insertion from the keyboard?

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.