[FIXED] How to customize java tabpane's tab?

Issue

I tried to change the tab shape to an image I had, but it just added an image.

I want to write letters in this image, but I don't know what to do..

It's the screen that comes out when you execute my code.

src="https://i.stack.imgur.com/79P4e.jpg" alt="enter image description here" />

And this is the screen of code I want.

And Here's the code that I've got at the heart of. Thank you.

import java.awt.*;
import java.util.ArrayList;
import javax.swing.*;
import img.imageSetSize;

public class tabPane extends JFrame {
    Container c = getContentPane();
    public tabPane() {
        imageSetSize s = new imageSetSize();
        setTitle("Kiosk");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        c.setLayout(new BorderLayout()); 
        
        JPanel panelW = new JPanel();
        panelW.setLayout(new GridLayout(1, 5, 5, 5));
        panelW.setBackground(Color.WHITE);
        ImageIcon normalMenuIcon = new ImageIcon("images/UI/normalMenu.png");
        normalMenuIcon = s.setSize(normalMenuIcon, 80, 80);
        JTabbedPane menuTab = new JTabbedPane(JTabbedPane.LEFT);
        menuTab.addTab("", normalMenuIcon, new ItemPanel1()); 
        menuTab.addTab("", normalMenuIcon, new ItemPanel1()); 
        menuTab.addTab("", normalMenuIcon, new ItemPanel1());
        menuTab.addTab("", normalMenuIcon, new ItemPanel1()); 
        menuTab.addTab("", normalMenuIcon, new ItemPanel1()); 
        menuTab.setBackground(null);
        panelW.add(menuTab);

        c.add(panelW, BorderLayout.WEST);
        c.setBackground(Color.WHITE);
        setSize(450, 740);
        setVisible(true);
        setResizable(true);
    }
    
    public class imageSetSize {
        public ImageIcon setSize(ImageIcon icon, int x, int y) {
            Image img = icon.getImage(); 
            Image imgScale = img.getScaledInstance(x, y, java.awt.Image.SCALE_SMOOTH);
            ImageIcon imgScaled = new ImageIcon(imgScale);
            return imgScaled;
        }
    }
    
    class ItemPanel1 extends JPanel {   //implement later
        public ItemPanel1() {
            this.setBackground(Color.white);
            this.setLayout(new GridLayout(3, 3, 0, 0));

        }
    }
    public static void main(String[] args) {
        tabPane tp = new tabPane();
    }
}

Solution

If you want text in the center of the image then you will need to to combine the Icon and text into a single Icon.

There are several ways to do this:

1) Create a custom Icon

Extend ImageIcon so that it takes two parameters:parameters:

1. the Image
2. the text

Then in the paintIcon(...) method your code might look something like:

class TextImageIcon extends ImageIcon
{
    String text;

    public TextImageIcon(String text, Image image)
    {
        super(image);
        this.text = text;
    }

    public void paintIcon(Component c, Graphics g, int x, int y)
    {
        super.paintIcon(c, g, x, y); // paint the image

        // add text centered on the image
    
        FontMetrics fm = g.getFontMetrics();
        int stringWidth = fm.stringWidth( text );
        int textX = (getIconWidth() - stringWidth) / 2;
        int textY = getIconHeight() / 2;
        g.drawString(text, textX, textY)
    }

)

2) Create an Image of a JLabel

A JLabel allows you to display text centered on the Icon. So instead of doing the custom painting yourself, you can let the JLabel to the work. Once the label is created you create an image of the label to use as the Icon.

Basic code would be something like:

JLabel label = new JLabel("your text");
label.setIcon( yourIcon );
label.setHorizontalTextPosition(JLabel.CENTER);
label.setVerticalTextPosition(JLabel.CENTER);

BufferedImage image = ScreenImage.createImage( label );
ImageIcon iconWithText = new ImageIcon( image ); 

Using the Screen Image class is the easiest way to create the image, although the like does show you the basic code to create an image of the label.

Answered By - camickr
Answer Checked By - Pedro (JavaFixing Volunteer)