JLabel on top of another JLabel?

Question

I'm currently trying to put tabIconLabels (which are JLabels) over a bigger JLabel (tabAreaLabel) (all Labels have an ImageIcon attached to them). I've tried using the OverlayLayout but the locations for the tabIconLabels aren't in their right positions. I've also tried setting the LayoutManager of the tabAreaLabel to null and then set the setBounds method for all the tabIconLabels but that's not working either. The tabIconLabels are all together in just one random position and I'm not sure why. I also wish to not use the g.drawImage method only because I wish to remove JLabels in the nearby future.

public GamePanel(final Player player) {
    super(null);
    this.setMemory(Memory.LOW);
    this.setRevisionType(RevisionType.THREE_ONE_SEVEN);
    this.setPlayer(player);
    this.addMouseListener(this);
    this.addMouseMotionListener(this);
    this.requestFocusInWindow();
    this.setFocusable(true);
    final ChatBox chatBox = this.getPlayer().getChatBoxSystem().getChatBox();
    final MapArea mapArea = this.getPlayer().getMapSystem().getMapArea();
    final TabArea tabArea = this.getPlayer().getTabAreaSystem().getTabArea();
    // final Compass compass = this.getPlayer().getCompass();
    final JLabel chatBoxLabel = chatBox.getImageLabel();
    this.add(chatBoxLabel);
    final JLabel mapAreaLabel = mapArea.getImageLabel();
    this.add(mapAreaLabel);
    final JLabel tabAreaLabel = tabArea.getImageLabel();
    this.add(tabAreaLabel);
    chatBoxLabel.setBounds(chatBox.getLocation().getX(), chatBox.getLocation().getY(), 519, 165);
    mapAreaLabel.setBounds(mapArea.getLocation().getX(), mapArea.getLocation().getY(), 246, 168);
    tabAreaLabel.setBounds(tabArea.getLocation().getX(), tabArea.getLocation().getY(), 250, 338);
    final short[] xLocation = {
            549, 574, 605, 635, 673, 704, 730, 577, 605, 637, 674, 705, 732
    };
    final short[] yLocation = {
            176, 175, 175, 173, 175, 175, 175, 471, 471, 472, 470, 470, 470
    };
    final short[] width = {
            20, 25, 22, 30, 25, 24, 24, 24, 24, 27, 26, 19, 20
    };
    final short[] height = {
            19, 24, 23, 29, 28, 27, 24, 23, 23, 24, 27, 24, 25
    };
    for (byte b = 0; b < 13; b++) {
        final JLabel tabIconLabel = tabArea.getTabs()[b].getTabIcon();
        tabAreaLabel.setLayout(new OverlayLayout(tabAreaLabel));
        // tabAreaLabel.setLayout(null);
        tabAreaLabel.add(tabIconLabel);
        tabIconLabel.setBounds(xLocation[b], yLocation[b], width[b], height[b]);
    }}

Thanks for your help! P.S. I couldn't get the code to properly fit in the code tags. The last bracket should be on the next line, not next to the second to last bracket.

https://i.stack.imgur.com/OFkKg.png

Answer 1

tabAreaLabel.setBounds(tabArea.getLocation().getX(), tabArea.getLocation().getY(), 250, 338);

The size of the tabAreaLabel is (250, 338).

short[] xLocation = {
    549, 574, 605, 635, 673, 704, 730, 577, 605, 637, 674, 705, 732
};

The x location of all the labels is greater than 250, so they will NOT fit on the label. Fix your coordinates or fix the size of the tabAreaLabel.

Generally you should NOT hardcode the size of an image. Instead you can use something like:

tabAreaLabel.setSize( tabAreaLabel.getPreferredSize() );
tabAreaLabel.setLocation(...);

Also, don't use a short[] array. Use an int[] array.

Same with you for loop:

for (byte b = 0; b < 13; b++) {

don't use byte, just use int.

Answer 2

What you want is Swing's OverlayLayout. This should enable you to layer components.

http://docs.oracle.com/javase/7/docs/api/javax/swing/OverlayLayout.html