What is the name of this on app development?

Question

We are doing an app for a client an he needs some similar functionality to this (see picture attached) offered by the iTranslate App on iOS.

With this functionality, when you are in any other App (for instance reading anything on the Medium App) and you select a word, a menu appears and you can select to open this word with the app of my client. But instead of opening the whole App and closing the one were are using, a kind of pop up appears:

I have a few questions about this: - Does this have a name? - Can something like this be done with Ionic or you need to code the app in Native? - Is this possible only on iOS or also in Android?

I am really lost about this issue and would appreciate some guidance. Thanks

It is a widget I think. Android: https://developer.android.com/guide/topics/appwidgets | iOS: https://developer.apple.com/design/human-interface-guidelines/ios/extensions/widgets/ Can this be done in ionic? Is this what I am lookinf for a widget? — asanchez, Nov 22 '19 at 13:00
"Does this have a name?" – Text processing, maybe? At least, the relevant `Intent` action is `PROCESS_TEXT`. "Can something like this be done with Ionic or you need to code the app in Native?" – Dunno. It can definitely be in native. "Is this possible only on iOS or also in Android?" – It's been available in Android since Marshmallow (API level 23). It simply requires a specific `` on one of your Activities, which you can style like a dialog to get the look in your images. There's some information in [this answer](https://stackoverflow.com/a/30518324). It's rather easy to do. — Mike M., Nov 23 '19 at 05:54
This is almost looks like popup menu android. Customization also easy and it could be anchored anywhere in the window. — Anbarasu Chinna, Nov 27 '19 at 07:18
Worth nothing since you have a ios tag on this question... you will not be able to this on iOS. You cannot create an app that makes global changes in this way as your app is sandboxed. (affects other apps). — Scriptable, Nov 27 '19 at 08:39
@asanchez use this for text select popup: -[stackoverflow](https://stackoverflow.com/questions/43689020/how-to-display-popup-instead-of-cab-when-textview-is-selected) — hio, Nov 29 '19 at 08:20

score 0 · Answer 1 · answered Nov 27 '19 at 07:59

0

The example in the first picture would be called a "Floating Context Menu," according to the Android Developers website. The example in the second picture would be called a "Popup Menu."

Hope this helps! Good Luck!

answered Nov 27 '19 at 07:59

Shreshth Kharbanda

1,777
14
24

Samuel · Answer 2 · 2019-12-02T01:47:34.167

This is a customized PopupWindow(Android Documentation) which should not be a major issue to cook up with something like PopoverController (Iconic Documentation).

the real problem you will face is the text selection. you can look into this stackoverflow link for pointers.

Solutions like these may work in one or the other platform you have to muck the code unless there is and api for text selection in iconic.

if iconic does not give you the API you will have to roll up your sleeves. At this point you are on a slippery slope looking over the webview(s).

Update:

All the above juggling is needed to implement this within your app. Android and iOS will not allow you to add items to system context menu as you see in an PC based(Windows/MacOS/...) OS(s).

If you check Google Translator app in Android. it listens clipboard copy event and pops up a transient icon over other apps. in iOS drawing over other app is not possible.

So if you want your feature to show up in Medium App then they have to add the UI and they have to call your 'API'.

PopoverController works only on the Ionic App. I want to make it work also in other apps as described — asanchez, Nov 30 '19 at 09:20
@asanchez, you may be able to do this with native implementation in Android but not in iOS — Samuel, Dec 02 '19 at 01:43

score 0 · Answer 3 · answered Nov 27 '19 at 08:32

You can use a text selection toolbar https://material.io/design/platform-guidance/android-text-selection-toolbar.html# for this, which was added in Android 6.0. Note that you can only use this on Android 6.0 and later.

There is a nice article here, which provides some examples on how to create this:

https://medium.com/androiddevelopers/custom-text-selection-actions-with-action-process-text-191f792d2999

From the article, the basic implementation is the following:

AndroidManifest.xml

<activity
    android:name=".ProcessTextActivity"
    android:label="@string/process_text_action_name">
  <intent-filter>
    <action android:name="android.intent.action.PROCESS_TEXT" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/plain" />
  </intent-filter>
</activity>

ProcessTextActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.process_text_main);
  CharSequence text = getIntent()
      .getCharSequenceExtra(Intent.EXTRA_PROCESS_TEXT);

  // process the text

  Intent intent = new Intent();
  intent.putExtra(Intent.EXTRA_PROCESS_TEXT, result);
  setResult(RESULT_OK, intent);
}

So, I am pretty sure you can implement this in ionic. I never wrote anything in ionic, but you may be able to call something like this Java code from it.

What is the name of this on app development?

3 Answers3