libGDX: UI using ImageButton in a table layout


Does anyone have a link to a turorial or some code (so i can learn by example) of how to use Libgdx’s ImageButton.
Code snippet of some of your own creation would be great!

I’m trying to create a settings screen for my game using a table layout where i want some buttons (images) that i can click and on Click i want the image and some variables to change.

I found some tutorials & code on how to use tables/actors & textButtons, but cant find anything on ImageButtons and for a noob like me it’s all just horribly complex to figure out how everything works by just looking at the LibGDX documentation:

Previously there was a post about it on JGO:

but it doesnt help me much in really figuring out how to use & implement ImageButton exactly within a table layout

Whomever it may concern:

I found a way to do it & created a first version of a settingsScreen with clickable buttons that interact with each other.
I used some “creative” coding though. It’s probably not an optimal way to code it, but it workable.
Instead of ImageButton I used ButtonStyle which also has a way to switch between the two images in my textureAtlas (star & star_uit).

Here is a link to my code:
If you have any ideas how i could do things better, please share!

This is what it looks like:


Uhhh…ImageButtonStyle? :stuck_out_tongue:
Anyways I think you could improve the way you’re displaying stars, why not this:

ImageButton[] stars = new ImageButton[5];
for(int i = 0; i < stars.length; i++){
     stars[i] = new ImageButton(); //use skin, imagebuttonstyle or whatever
     stars[i].addListener(new ClickListener() {
         public boolean touchDown(InputEvent event, float x, float y, int a,
               int b) {
            for(int j = 0; j < i; j++){
            for(int k = stars.length - i; k < stars.length; j++){

            return true;


or something of the sort (note this code is untested but the concept is there)

hehe, duhh yeah. That’s indeed a way to improve the code. Tnx :slight_smile:

Hey @Norakomi have you figured it out yet? If not, what’s the problem? That thread I started which you’ve linked to is pretty old, but if I recall properly, I followed the advice I received there and used a Button rather than an ImageButton. I created skins programmatically by adding the textures I wanted, then created the Button, using the skin in the constructors as required.

And yes I agree with you, it was a horrible nightmare figuring out how to use scene2d in Libgdx, and now I create my own UI classes.

Anyways, after you’ve created a Button, you can add it to the table and use the chain methods to position it. I never used TextureAtlases, just changed the Button texture directly by giving it another texture when needed, e.g. in onClick actions.

BTW: I just noticed all the “star” buttons in your code. You could use a for loop to manage all that if you want, not relevant but I cleaned up something similar in my project just before writing this.

@Rayexar: No haven’t found out how should get ImageButton working, but ran into ButtonStyle (havent gotten a chance to look at imageButtonStyle yet) which got me where I wanted to. And yes I will definitely clean up my code and use a for loop