Develop Reference

Weird issue with Samsung keyboard on Android with Libgdx

In my game, when a textfield is touched, the view moves up along with the keyboard.
Here's the code in AndroidLauncher:
onCreate(){
//other codes...
setListenerToRootView()
}
private fun setListenerToRootView() {
val activityRootView: View = window.decorView.findViewById(content)
activityRootView.viewTreeObserver.addOnGlobalLayoutListener(keyboardLayoutListener)
}
private var keyboardLayoutListener: OnGlobalLayoutListener? = OnGlobalLayoutListener {
val visibleDisplayFrame = Rect()
window.decorView.getWindowVisibleDisplayFrame(visibleDisplayFrame)
sizeChanged(visibleDisplayFrame.width(), visibleDisplayFrame.height())
}
override fun sizeChanged(width: Int, height: Int) {
val heightRatio = Gdx.graphics.height / main.worldHeight
val worldHeightChanged = height / heightRatio
val keyboardStatus = if (height == Gdx.graphics.height) KeyboardStatus.HIDE else KeyboardStatus.SHOW
main.platformsObservable.notifyObservers(Triple(ObservableKeys.SCREEN_SIZE_CHANGED, keyboardStatus, worldHeightChanged))
log.error("SCREEN_SIZE_CHANGED, status = $keyboardStatus")
}
The above code gets the keyboard height and status to send to my libgdx game class for the Camera to move the screen up/down.
With a normal keyboard it would send something like this for when the keyboard is shown:
SCREEN_SIZE_CHANGED, status = SHOW
and when the keyboard is hidden:
SCREEN_SIZE_CHANGED, status = HIDE
But on Samsung devices with the keyboard id of "com.samsung.android.honeyboard/.service.HoneyBoardService" then it does all this when the keyboard is shown once:
SCREEN_SIZE_CHANGED, status = HIDE
SCREEN_SIZE_CHANGED, status = SHOW
SCREEN_SIZE_CHANGED, status = SHOW
SCREEN_SIZE_CHANGED, status = SHOW
And this is making the keyboard blocking the textfield in my game because the view doesn't move up.
My gdxVersion is 1.11.0
How can I fix this?

Hi This isn't a libGDX issue. You need to provide parameters to your activity specifically saying what you want for this value (being the screen keyboard as opposed to a hardware one)
android:windowSoftInputMode
as described here
https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
and consider what you want for the parameters
adjustResize
adjustPan

Sencha Touch android keypad hiding textarea

`
constructor: function() {
this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
var iNewHeight = textAreaEl.dom.scrollHeight;
if (iNewHeight > 0) {
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}
},200,this);
this.callParent(arguments);
}
I want the textarea focused with full content visible . But text area hiding with keypad

Try to use the onBeforeFocus event with scrolling:
scrollableView.scrollTo(textfield.element.getXY()[0],textfield.element.getXY()[1]);
And now you might want to do this to all textfields and textareafields, so that the user gets the same on all items.
Make sure, that the effect is either earlier than the keypad animation or delay it with about 175ms.
Ext.defer(function() {###your code goes here###}, 175, this);

Titanium developing: I want to put a view always visible from the second view and beyond. I'm using a scrollView

I'm developing an app in Titanium. I've divided it in four different views to make a scrollView. I want to put another view always visible only from the second view and beyond. How can I do that?
Ther is my app.js code:
(function(e){
var principal = Ti.UI.createWindow({
backgroundColor: '#fbfbfb',
exitOnClose:true,
navBarHidden: true
}),
pantallaBienvenida = require('ui/pantallaBienvenida'),
pantallaTitular = require('ui/pantallaTitular'),
pantallaDependiente = require('ui/pantallaDependiente'),
pantallaAsistenciaMedica = require('ui/pantallaAsistenciaMedica'),
primeraPantalla = new pantallaBienvenida,
segundaPantalla = new pantallaTitular,
terceraPantalla = new pantallaDependiente,
cuartaPantalla = new pantallaAsistenciaMedica,
scrollView = Ti.UI.createScrollableView({
views:[primeraPantalla,segundaPantalla,terceraPantalla,cuartaPantalla]
});
principal.add(scrollView);
principal.open();
})();

You are using ScrollableView not ScrollView, they are very different.
If you want to show some additional info when user goes to second element of your ScrollableView you have to add new element to Window, set it's property visible = false.
Then create event listener and when dragend is fired make that view visible.
Some example code:
floatingView = require('ui/floatingview')
floatingView.visible = false;
principal.add(floatingView);
scrollView.addEventListener('dragend', function(event){
if (this.currentPage !== 0) {
floatingView.visible = true;
} else {
floatingView.visible = false;
}
});

jQuery Mobile fixed footer is moving when the keyboard appears

I have designed an app using Phonegap and jQuery Mobile. The fixed footer works properly until I click on a dropdown or text field, which causes the footer to either disappear from view (Android 4.0) or move to the middle of the view (Android 2.2 Galaxy Tab). Any suggestions?
Phonegap Version: Cordova 2.1.0
jQuery Mobile Version: 1.2.0
Here is my code:
<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar" class="nav-mobilyzer" data-grid="d">
<h1>footer</h1>
</div>
</div>

I had the problem in some devices the footer displayed and in others it didn't. I found this worked for me:
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
if(window.innerHeight < initialScreenSize){
$("[data-role=footer]").hide();
}
else{
$("[data-role=footer]").show();
}
});
EDIT:
But what about orientation changes?
var portraitScreenHeight;
var landscapeScreenHeight;
if(window.orientation === 0 || window.orientation === 180){
portraitScreenHeight = $(window).height();
landscapeScreenHeight = $(window).width();
}
else{
portraitScreenHeight = $(window).width();
landscapeScreenHeight = $(window).height();
}
var tolerance = 25;
$(window).bind('resize', function(){
if((window.orientation === 0 || window.orientation === 180) &&
((window.innerHeight + tolerance) < portraitScreenHeight)){
// keyboard visible in portrait
}
else if((window.innerHeight + tolerance) < landscapeScreenHeight){
// keyboard visible in landscape
}
else{
// keyboard NOT visible
}
});
The tolerance accounts for the inexact calculation of landscape height with portrait width and vis-versa.

Okay, this thread is as old as the internet at this point, but the answer above didn't seem to do the job for me.
The best way I found was to bind a method to the jquery .blur() event, and then call fixedtoolbar() methods in a very specific order, i.e.
var that = this;
$(':input').blur(function(){
that.onFocusLoss();
});
......
onFocusLoss : function() {
try {
$("[data-position='fixed']").fixedtoolbar();
$("[data-position='fixed']").fixedtoolbar('destroy');
$("[data-position='fixed']").fixedtoolbar();
console.log('bam');
} catch(e) {
console.log(e);
}
},

The keyboard is opened when we have the focus on an input so:
// hide the footer when input is active
$("input").blur(function() {
$("[data-role=footer]").show();
});
$("input").focus(function() {
$("[data-role=footer]").hide();
});

You can also detect when the keyboard shows and when it hides and show or hide your footer accordingly:
document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false);
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);

Try data-hide-during-focus="" and set it to an empty string.

My solution uses another JQUERY attribute on the div footer. Adding data-fullscreen="true" to that div was all I needed. I know that this fix might not have been available until recently, but I am using jqm 1.3.2 and jq 1.9. I thought I would post this solution just in case it helps someone. Good luck. :)

Titanium and Android: Using button inside textfield

Is it possible to make a textfield with buttons inside? I found the properties rightButton and leftButton, but using Android (emulator) does not work. Is there another alternative?
That is the used code:
var rightButton1 = Titanium.UI.createButton({
color:'#fff',
width:25,
height:25,
right:10,
backgroundImage:'plus.png',
backgroundSelectedImage:'plus.png',
backgroundDisabledImage: 'plus.png'
});
rightButton1.addEventListener('click',function()
{
Titanium.UI.createAlertDialog({
title:'Button clicked',
message:'Button clicked'
}).show();
});
var textField3 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
rightButton:rightButton1
});
Thanks in advance.

According to the KitchenSink it's an iPhone only function currently.
if(Titanium.Platform.name == 'iPhone OS') {
data.push({title:'Buttons on Textfields', hasChild:true, test:'../examples/textfield_buttons.js'});
}
However I don't see why you couldn't fake this by creating a view and placing the button on top of the textField because Titanium.UI.Android supports zIndex just fine and the focus event to toggle the visibility of the button.
var view = Ti.UI.createView();
var textField = Ti.UI.createTextField({
// cordinates using top, right, left, bottom
zIndex: 1
});
var button = Ti.UI.createButton({
// cordinates using top, right, left, bottom
visible: false,
zIndex: (textField.zIndex + 1)
});
view.add(textField);
Ti.UI.currentWindow.add(button);
Ti.UI.currentWindow.add(view);
// you only need the listeners if you want to hide and show the button
textField.addEventListener('focus', function(e) {
button.show();
});
textField.addEventListener('blur', function(e) {
button.hide();
});