How to implement key preview popup in custom android keyboard - android

I'm currently developing a custom andriod keyboard for my personal use: https://github.com/soobakjonmat/Custom-Layout-Keyboard-for-Android
Sample Image
The basic structure of my keyboard is based on Microsoft SwiftKey.
I have pretty much finished everything except that I cannot find a way to implement the key preview popup.
For example (Gboard and Microsoft SwiftKey
):
I have looked at different posts on this implementation but all of them were like at least 5 years old and they were using the KeyboardView class, which is now deprecated and I have not used it to create my keyboard. So I tried to implement it by myself.
At first I tried to implement it like Microsoft SwiftKey, and I tried increasing the Button height each time when I pressed it but it also increased other Buttons' heights because they are in the same LinearLayout and I have used weight to set their height.
So instead I tried to implement it like Gboard but I can't quite figure out how to show the image or text above the key that the user have pressed. I tried using ImageView to show the key preview but I'm not sure how or where to add the view in the layout.
Any help or adivce would be apprecited.

I found out the solution by myself.
Use PopupWindow: https://developer.android.com/reference/kotlin/android/widget/PopupWindow
Create a PopupWindow and set its contentView with a TextView. Then whenever you want to show it call showAtLocation and update method.
For example:
val btn = Button(baseContext)
val popup = PopupWindow()
popup.contentView = TextView(baseContext)
val loc = IntArray(2)
btn.getLocationInWindow(loc)
popup.showAtLocation(btn, Gravity.NO_GRAVITY, 0, 0)
popup.update(loc[0], loc[1]-128, 128, 128, false)
For future people if anyone also encounters the same problem and want more details check out my github repository which was mentioned at the beginning of this post.

Related

Which View should I use for this? Android Studio

I have such a question, I am developing an Android Application for learning languages. In my application, you can read books and when you click on a word, a window should appear on top of the word. This window will translate the word into the desired language and the ability to save the word. The question is what should I use to implement this window?
(maybe it's a Dialog or a PopupWindow? But how to make it appear on top of this word?)
Here is a screenshot from another application to make it clear what I mean.
screenshot
I already know how to add a word click listener, get that word and translate it. The only question is how to implement this View
Use custom view with tooltip,
this is a great library you can use it : Android Simple Tooltip
example :
View yourView = LayoutInflater.from(context).inflate(R.layout.custom_dialog, null);
new SimpleTooltip.Builder(this)
.anchorView(yourView)
.text("Texto do Tooltip")
.gravity(Gravity.END)
.animated(true)
.transparentOverlay(false)
.build()
.show();

Create KeyboardView by default keyboard without key definition in xml resource file

I'm creating an object from the android Keyboard class (https://developer.android.com/reference/android/inputmethodservice/Keyboard.html). In my case I just need the default keyboard, no custom keyboard. But the constructors of the Keyboard class requires a xml resource file that contains a definition of rows and keys. It seems it's only for creating a custom keyboard.
I need that object of the Keyboard class to use it in a KeyboardView within a TabLayout:
keyboard123 = (KeyboardView) Tab2View.findViewById(R.id.keyboard123);
Keyboard k1 = new Keyboard(Tab2View.getContext(), R.xml.qwerty_keyboard);
k1 = new Keyboard(Tab2View.getContext(), com.android.internal.R.id.keyboardView);
keyboard123.setKeyboard(k1);
The code above works great, but only if I create an xml file "qwerty_keyboard" with key definition. Is there a way to just get the android default keyboard and display it in one of the tabs in the TabLyout?
You can't do it the way you are trying to do it. You can't make the default keyboard in a View because it's a separate app that runs by itself.
So in order to achieve what you are trying to you'll need to request the inputmanager to pop up when you go to keyboard tab but frankly you'll have so many issues with the sizing (height) that I won't recommend this kind of design :) Just think about it, everyone can make a keyboard and everyone can install one, there is many many many keyboards and they all have different heights, but you might be able to get that height and do some magic...
Another alternative would simply be to make your own embedded keyboard (kinda like what you already did).

Android Edit Text Cursor Doesn't Appear

in my app I disabled the keyboard (I use now my custom keyboard) using this code:
editText.setInputType(InputType.TYPE_NULL);
Now, my problem is that the text cursor does not appear anymore in the edit text. What should I do? Any suggestion would be very appreciated.
There is an Issue opened in bug tracker Issue opened in bug tracker for this.
One of the users suggests the approach which works on "most" devices.
Briefly, all you have to do is call:
editText.setRawInputType(InputType.TYPE_CLASS_TEXT);
for your EditText view (after you called editText.setInputType(InputType.TYPE_NULL);).
You should probably also set:
editText.setTextIsSelectable(true);
in order for text to be selectable (though in does not seem to work properly with Samsung Galaxy SIII). This method is only available starting from HONEYCOMB (api11) so keep that in mind when developing for older Android versions.
Also it is stated that your EditText should not be the first view to receive focus when activity starts (if it is - just requestFocus() from another view). Though I (personally) have not experienced any problems with this.
Rather than just using a custom view for your custom keyboard, why not implement a full-fledged IME? That will solve your cursor problem, and even make your keyboard available outside your app (if you want).
This answer has a couple useful links if you want to do that:
How to develop a soft keyboard for Android?
I really wouldn't suggest this. Writing a good full fledged IME is really hard. In addition, users come to expect functionality from their keyboard (auto-correct, Swyping, next word prediction, the ability to change languages) that you won't have unless you spend months on the keyboard itself. Any app that wouldn't allow me to use Swype would immediately be removed (bias note: I worked on Swype android).
But if you want to integrate fully with the OS as a keyboard, you're going to have to write an InputMethodService. Your keyboard would then be selectable by the user in the keyboard select menu, and usable for any app. That's the only way to get full OS integration, otherwise you'll need to really start from scratch- writing your own EditView. Have fun with that, getting one that looks nice is decidedly non-trivial.
Also, setting input type null won't disable most keyboards. It just puts them into dumb mode and turns off things like prediction.
I tried the below answer and it worked, but take care that
1) EditText must not be focused on initialization
2) when your orientation changes while the user's focus is on the editText, the stock keyboard pops up, which is another "solvable" problem.
This was mentioned in a previous answer but take care that you MUST make sure your editText element do not get focus on instantiation:
https://code.google.com/p/android/issues/detail?id=27609#c7
#7 nyphb...#gmail.com
I have finally found a (for me) working solution to this.
First part (in onCreate):
mText.setInputType(InputType.TYPE_NULL);
if (android.os.Build.VERSION.SDK_INT >= 11 /*android.os.Build.VERSION_CODES.HONEYCOMB*/) {
// this fakes the TextView (which actually handles cursor drawing)
// into drawing the cursor even though you've disabled soft input
// with TYPE_NULL
mText.setRawInputType(InputType.TYPE_CLASS_TEXT);
}
In addition, android:textIsSelectable needs to be set to true (or set in onCreate) and the EditText must not be focused on initialization. If your EditText is the first focusable View (which it was in my case), you can work around this by putting this just above it:
<LinearLayout
android:layout_width="0px"
android:layout_height="0px"
android:focusable="true"
android:focusableInTouchMode="true" >
<requestFocus />
</LinearLayout>

Why is the Android example SoftKeyboard layouted like this?

I'm currently experimenting with the sample SoftKeyboard on my tablet (Android 3.2).
When I open the Google mail app and set the focus to the recipient field, the textfield is expanded to fill the available space above the keyboard.
This looks very much like the fullscreen or extract mode as described in Onscreen Input Methods in the documentation. From what I gathered there, this is set by the activity, which uses the SoftKeyboard.
What bugs me is
this is not very convenient for the recipient input field (although that might be a matter of taste)
that the stock softkeyboard manages to prevent this, as shown below:
also sometimes the textcolor in the input box is set to white (probably some adjustment due to daytime/nighttime?). White on white is more or less unreadable.
So my question is: What do I have to change to get a similar behaviour in the example SoftKeyboard?
Thanks & all the best
Andreas
The sample soft keyboard is very out-dated -- it uses a layout that hasn't been seen since Froyo/Eclair.
The sample soft keyboard is just that: a sample, not to be confused with a fully-fledged android keyboard. If you are looking for a full implementation of an Android keyboard, check out AnySoftKeyboard's source code or the AOSP source code.
To get rid of fullscreen, I know part of the issue lies in the onComputeInsets() function. Like I said though, I'd base your code off full Android keyboard (i.e. AOSP or Cyanogenmod) rather than trying to get the sample to work. I tried that for months, and there's just too many problems you'll run in to (multitouch and theming, just to name a couple).
Send me an email if you have any questions.
you can design your desired softkeyboard layout using buttons, textview whatever you want to display on keyboard.
and setOnclickListener to all Buttons of your keyboard
Override onCreateInputView() like this
#Override
public View onCreateInputView() {
View mInputView = getLayoutInflater().inflate(
R.layout.yourkeyboardlayout, null);
Button btn1 = mInputView.findViewById(R.id.btn1);
btn1 .setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
// append text in selected TextField
String buttonLabel = ((Button)v).getText().toString();
getCurrentInputConnection().commitText(buttonLabel, 1);
}
});
return mInputView;
}
I had a similar question as I created my own keyboard and this blog post pretty much answered what I needed to know:
http://android-developers.blogspot.com/2009/04/updating-applications-for-on-screen.html
Maybe it will help you too.

How do I fix Html.fromHtml link focus visibility problems (in ICS and Honeycomb)?

To get a TextView to display (and act friendly with) Html strings my code looks something like:
// itemHtml is a String of HTML defined above
TextView itemContent = (TextView) findViewById(R.id.itemContent);
itemContent.setText(Html.fromHtml(itemHtml));
itemContent.setMovementMethod(LinkMovementMethod.getInstance());
If the Html string has a link, TextView results in links that are clickable and focusable. When the user focuses on a specific link (e.g. by using the d-pad), the link text changes in some significant way to show that focus was obtained.
The problem is that when I test this same pattern using devices with a d-pad using Honeycomb (e.g. a Google TV) or Ice Cream Sandwich flavors of Android, the link in the text shows no noticeable indication that the link has focus.
I know it is getting focus, because when you then hit enter it does the specified action. You can even move around between various links in the text; you're just left guessing which link you're currently at, which results in a very bad user experience.
Is there something I'm doing wrong? Is there some way to fix this or work around this?
Edit: After going a bit nuts, I finally thought I found a solution. However, this solution only works for Honeycomb. ICS is still not solved!
As of API 11, Android has a new setting on TextViews for defining whether the text is selectable.
You can set it using setTextIsSelectable(true) on a TextView, or define it in the XML layout android:textIsSelectable="true"
It's probably best to define it in XML, so that keeping the app backwards-compatible is trivial. Just make sure you're targeting version >= 11, or you'll probably get an error.
The way HTML.fromHTML operates is by creating "spans" with varying effects throughout the various characters of the string. One workaround for this would be to use ClickableSpan coupled with another of the CharacterStyles to colorize the text as clickable. The previous span will allow you to register a callback, and this callback could be to broadcast an intent to view a url (which would open a browser).
The text colour state lists for Honeycomb+ might not set the focused state to a different colour, or you override the colour to be constant.
Check the colors + styles in your_android_sdk_directory/android-14/data/res/
Setting the text to android:autoLink="web" might also help?
The best way to do that is to add CSS styling to your html. I know Android supports :hover selector. So you might right something like this:
String myLink = "your link"
Html.fromHtml(myLink);
and find a way to include CSS data to it: (I'm not sure how but I think it's possible)
a :hover {
color: red;
}
UPDATE:
I think the answer of your question is there.

Categories

Resources