# Tile rendering problem in LibGDX

I'm making an isometric game using a Tiled map with libgdx. As I want my character to be rendered before or after the tiles depending his positions, I create an ArrayList<Renderable> and I add in it my character and the tiles.

    TiledMapTileLayer midlayer = (TiledMapTileLayer) map.getLayers().get(4); //The layer containing my tiles.
int width = midlayer.getWidth();
int height = midlayer.getHeight();
ArrayList<Renderable> renderables = new ArrayList<Renderable>();
renderables.add(character); //Adding the character in the list;

//We add to the list every midlayer's tile, so we can later sort
for (int i=0;i<width;i++) {
for (int j=0;j<height;j++) {
if (midlayer.getCell(i, j)!=null) { //As the cell can or can't exist in that position.
}
}


RenderableTile is a class I created containing a x and y position and the TextureRegion.

public class RenderableTile implements Renderable, Comparable<Renderable> {

private int x;
private int y;
private TextureRegion texture;

public RenderableTile(TextureRegion text, int x, int y) {
this.x = x;
this.y = y;
this.texture = texture;
}

@Override
public void render(SpriteBatch batch, BitmapFont font) {
batch.begin();
int rX = Translations.TransX(x, y);  //Transformation orthogonal position to isometric rendering
int rY = Translations.TransY(x, y)-15;
batch.draw(text, rX, rY);
batch.end();
}


The sorting works perfectly, and the ArrayList seems containing the right tiles. But when I render I get this:

Instead of something like this:

This is really akward, when I try to render a single tile in a specific point it works normally.

Maybe there is an alternative solution?