Nifty and Android - elements require 2 touches to register onClick event

I have a nifty panel at the bottom of my screen which contains some buttons. The problem is if I first click inside the game area (outside of the nifty panel) I subsequently need to click a nifty element twice to get the event to fire. The first click sets the focus to the element, the second click fires the event.



My question - how to I skip the first step, so that clicking on something will fire an event whether it has focus or not? Is this possible?

I’ve not had this problem, buttons work first time for me. Do you have anything unusual in how your buttons are set up?



Actually saying that most of my “buttons” are actually visibleToMouse panels rather than true buttons. Do you get the same problem with those?

Nothing unusual. I have tried creating the gui with both java code and xml. The same problem applies to both. I have tested panels, images and buttons, and this problem applies to all. If the previous touch was not on a nifty gui element (it was in the panel with the ID “GameArea” below), an onClick event will not fire on the first click of an element in the panel “BottomPanel” below.



Here is the java code if it helps:



Note that I have attempted lines like:



interactOnMouseOver(“setFocus()”);



as an attempted workaround (does not work).





[java]





nifty.addScreen(“menu”, new ScreenBuilder(“mainPage”){{

controller(myLoader.gameInterface); // Screen properties







// <layer>

layer(new LayerBuilder(“Layer_ID”) {{

childLayoutVertical(); // layer properties, add more…



// <panel>

panel(new PanelBuilder(“TopPanel”) {{

childLayoutHorizontal(); // panel properties, add more…

backgroundColor("#0F00");

height(String.valueOf(TOPPERCENT) + “%”);

width(“100%”);





panel(new PanelBuilder(“StatusBar”) {{

childLayoutHorizontal(); // panel properties, add more…

backgroundColor("#0F00");

height(String.valueOf(TOPPERCENT) + “%”);

width("");







}});





}});



// <panel>

panel(new PanelBuilder(“GameArea”) {{

childLayoutCenter(); // panel properties, add more…

backgroundColor("#0000");

height(String.valueOf(100 - BOTTOMPERCENT - TOPPERCENT) + “%”);

width(“100%”);





}});



// <panel>

panel(new PanelBuilder(“BottomPanel”) {{

childLayoutHorizontal(); // panel properties, add more…

backgroundColor("#F000");

height(String.valueOf(BOTTOMPERCENT) + “%”);

width(“100%”);



// add image

image(new ImageBuilder(“DPadButton”) {{

alignLeft();



visibleToMouse(true);

filename(“niftygui/DPadOpaque.png”);

interactOnClick(“catchLeftDPadInput()”);

interactOnMouseOver(“setFocus()”);

width(String.valueOf(BOTTOMPERCENT * settings.getHeight() / 100));

height(String.valueOf(BOTTOMPERCENT * settings.getHeight() / 100));

}});



panel(new PanelBuilder(“Panel_ID”) {{

childLayoutHorizontal(); // panel properties, add more…

backgroundColor("#0F00");

height(String.valueOf(TOPPERCENT) + “%”);

width("
");







}});



// add image

image(new ImageBuilder(“eyeButton”) {{

alignRight();

valignBottom();

height(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

width(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

visibleToMouse(true);

interactOnClick(“toggleCameraMode()”);

interactOnMouseOver(“setFocus()”);

filename(“niftygui/eyeicon.png”);

}});



// add image

image(new ImageBuilder(“buyButton”) {{

alignLeft();

valignBottom();

height(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

width(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

visibleToMouse(true);

interactOnClick(“openStore()”);

interactOnMouseOver(“setFocus()”);

filename(“niftygui/coinsicon.png”);

}});



// add image

image(new ImageBuilder(“fireButton”) {{

alignRight();

valignBottom();

height(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

width(String.valueOf(TOPPERCENT * settings.getHeight() / 100));

visibleToMouse(true);

interactOnClick(“fire()”);

interactOnMouseOver(“setFocus()”);

filename(“niftygui/bulleticon.png”);

}});



//… add more GUI elements here



}});



// </panel>

}});

// </layer>

}}.build(nifty));

// </screen>





[/java]

For anyone who is interested, I (semi) resolved this issue by using onRelease instead of onClick. Not perfect, but it works.

1 Like
@jon81 said:
For anyone who is interested, I (semi) resolved this issue by using onRelease instead of onClick. Not perfect, but it works.


A similar problem exists in non-android applications. I semi-resolve the issue the same way. I say semi, because this negates the idea of press/hold buttons that perform actions until released.

I’m having the same behaviour with some buttons in a JME3 Desktop (Windows) application. The onRelease workaround works for me. Do you know what’s causing this? I figured that my Button elements need to be refocused with the first click?

You could also use the onMouseOver to set the focus. That way, the element already has the focus when you get to the actual mouse click.