Search code examples
androidandroid-edittextandroid-softkeyboard

Insert images/sticker/gif in Edittext in android from custom keyboard/google keyboard


I tried to insert emoji using keyboard like Google keyboard Gboard to my edittext but it shows toast This text field does not support GIF insertion from the keyboard.

enter image description here

There are couple of question regarding the same but don't have proper answer,. I read the documentation reference given, but not given the implementation.I tried this but it is not triggering onCommitContent -

EditText editText = new EditText(this) {
    @Override
    public InputConnection onCreateInputConnection(EditorInfo editorInfo) {
        final InputConnection ic = super.onCreateInputConnection(editorInfo);

        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
                        }
                    }

                    // read and display inputContentInfo asynchronously.
                    // call inputContentInfo.releasePermission() as needed.

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

but apps like Whatsapp, Telegram supports this feature. Do i need to create custom EditText or something ?


Solution

  • As given in your question it looks like you don't have set content mime type. I have created a EditText with callback keyBoardInputCallbackListener which detect if any gif/png/jpg/webp is inserted via softkeyboard.

    public class MyEditText extends android.support.v7.widget.AppCompatEditText {
    
      private String[] imgTypeString;
      private KeyBoardInputCallbackListener keyBoardInputCallbackListener;
    
      public MyEditText(Context context) {
          super(context);
          initView();
      }
    
      public MyEditText(Context context, AttributeSet attrs) {
          super(context, attrs);
          initView();
      }
    
      private void initView() {
          imgTypeString = new String[]{"image/png",
                "image/gif",
                "image/jpeg",
                "image/webp"};
      }
    
      @Override
      public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
          final InputConnection ic = super.onCreateInputConnection(outAttrs);
          EditorInfoCompat.setContentMimeTypes(outAttrs,
                  imgTypeString);
          return InputConnectionCompat.createWrapper(ic, outAttrs, callback);
      }
    
    
      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
                        }
                    }
                    boolean supported = false;
                    for (final String mimeType : imgTypeString) {
                        if (inputContentInfo.getDescription().hasMimeType(mimeType)) {
                            supported = true;
                            break;
                        }
                    }
                    if (!supported) {
                        return false;
                    }
    
                    if (keyBoardInputCallbackListener != null) {
                        keyBoardInputCallbackListener.onCommitContent(inputContentInfo, flags, opts);
                    }
                    return true;  // return true if succeeded
                }
            };
    
      public interface KeyBoardInputCallbackListener {
          void onCommitContent(InputContentInfoCompat inputContentInfo,
                             int flags, Bundle opts);
      }
    
      public void setKeyBoardInputCallbackListener(KeyBoardInputCallbackListener keyBoardInputCallbackListener) {
          this.keyBoardInputCallbackListener = keyBoardInputCallbackListener;
      }
    
      public String[] getImgTypeString() {
          return imgTypeString;
      }
    
      public void setImgTypeString(String[] imgTypeString) {
          this.imgTypeString = imgTypeString;
      }
    }
    

    Use this in your activity class -

    MyEditText myEditText = (MyEditText)findViewbyId(R.id.myEditText);
    myEditText.setKeyBoardInputCallbackListener(new KeyBoardInputCallbackListener() {
                            @Override
                            public void onCommitContent(InputContentInfoCompat inputContentInfo,
                                 int flags, Bundle opts) {
                            //you will get your gif/png/jpg here in inputContentInfo 
                           // You can use a webView or ImageView to load the gif
    
                                Uri linkUri = inputContentInfo.getLinkUri();
                                mWebView.loadUrl(linkUri != null ? linkUri.toString() : "null");
    
                        }
                        });