How to properly align a multiline text in a JButton?

Question

I am trying to figure it out how to align some text in a JButton, but it seems to be more challenging than I thought it can be. In some ways I have tried to use HTML and JLabel, but had no luck with it. What I am trying to do, I want to simulate a keyboard key with letter centered and a digit on the right-top of it.

JPanel panel = new JPanel();
LayoutManager layout = new FlowLayout();
panel.setLayout(layout);

String htmlContent = "<html><font align=right>10</font><br><center><font width=100>Some text<font></center><br><font height=20></font></html>";
String secondContent = "<html><sup>HTML</sup><br><font>Multi-line</font>";

JButton nextButton = new JButton(htmlContent);
nextButton.setForeground(new Color(0x000000));
nextButton.setBackground(new Color(0xffffff));
nextButton.setBorderPainted(false);
nextButton.setFocusPainted(false);
nextButton.setBounds(0, 0, 30, 25);
panel.add(nextButton);

JButton secondButton = new JButton(secondContent);
secondButton.setForeground(new Color(0xffffff));
secondButton.setBackground(new Color(0x0062ff));
secondButton.setBorderPainted(false);
secondButton.setFocusPainted(false);
panel.add(secondButton);

JLabel firstLabel = new JLabel("First");
firstLabel.setHorizontalTextPosition(JLabel.RIGHT);
firstLabel.setVerticalTextPosition(JLabel.TOP);
firstLabel.setSize(150,100);
JLabel secondLabel = new JLabel("So much text");
secondLabel.setHorizontalTextPosition(JLabel.CENTER);
secondLabel.setVerticalTextPosition(JLabel.CENTER);
secondLabel.setSize(100,100);

JButton thirdBtn = new JButton();
thirdBtn.setForeground(new Color(0x000000));
thirdBtn.setBackground(new Color(0xbdbdbd));
thirdBtn.setBorderPainted(false);
thirdBtn.setFocusPainted(false);
thirdBtn.add(firstLabel);
thirdBtn.add(secondLabel);
thirdBtn.setPreferredSize(new Dimension(200, 80));
panel.add(thirdBtn);

frame.getContentPane().add(panel, BorderLayout.CENTER);

So far here is the code I have tried to use to achieve this, but I can see no result of what I need, just cannot align the text to right or make it flow to there. Also tried using double labeled button, it seems that the labels cannot be aligned regarding each other. Is there a way to do that?

P.S. Forgot to mention, have tried to use align=right or align='right' or just 'right' in HTML tags, but none of these works

Results:

Start by finding a reference for HTML syntax. Don't just guess. For example why do all your examples play with the Font tag? A Font is a style or size of the text. You can't assign an alignment to a Font. Why would you define the "sup" tag first? Logically it comes after the text, so define your HTML that way as well. For a basic test you can start with: `String secondContent = "Multi-line^HTML";` — camickr, May 10 '23 at 14:27
Don’t add `JLabel`s to a `JButton`; that’s not gonna work. Further, there’s no point in setting a `FlowLayout` on a freshly instantiated `JPanel`, as that’s the default anyway. camickr already told you how to do the html right, but note that there’s no payoff in writing the implied tags in such fragments, just `"Some text^{10"` and `"Multi-line^{HTML"` are enough… And as a side note, looking at your screenshot I’m wondering what this `RoundedBorder` is good for. It doesn’t seem to have any effect.}} — Holger, May 10 '23 at 15:04
Why not just create images as you did for the question, load the images, and display them on `JButtons`? — Gilbert Le Blanc, May 10 '23 at 18:15

score 2 · Accepted Answer · answered May 10 '23 at 18:59

Oracle has a helpful tutorial, Creating a GUI With Swing. Skip the Learning Swing with the NetBeans IDE section. Pay particular attention to the Performing Custom Painting section.

As I said in my comment, why not just create an image and place the image in a JButton.

Here's the GUI I came up with.

To create images for all your JButtons, just call the image creation method in a loop.

Here's the complete runnable code.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;

import javax.swing.BorderFactory;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class JButtonImageExample implements Runnable {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new JButtonImageExample());
    }

    private BufferedImage image;

    public JButtonImageExample() {
        Font font = new Font(Font.DIALOG, Font.PLAIN, 36);
        this.image = createLetterImage(70, 70, font, 'G', 7);
    }

    @Override
    public void run() {
        JFrame frame = new JFrame("Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        frame.add(createButtonPanel(), BorderLayout.CENTER);

        frame.pack();
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    private JPanel createButtonPanel() {
        JPanel panel = new JPanel(new FlowLayout());
        panel.setBorder(BorderFactory.createEmptyBorder(100, 100, 100, 100));

        JButton button = new JButton(new ImageIcon(image));
        panel.add(button);

        return panel;
    }

    private BufferedImage createLetterImage(int width, int height, Font font,
            char letter, int value) {
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d = (Graphics2D) image.getGraphics();
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
                RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS,
                RenderingHints.VALUE_FRACTIONALMETRICS_ON);
        g2d.setFont(font);

        g2d.setColor(Color.WHITE);
        g2d.fillRect(0, 0, width, height);

        g2d.setColor(Color.BLACK);
        String s = Character.toString(letter);
        Rectangle rect = new Rectangle(0, 0, width, height);
        drawCenteredString(g2d, s, rect, font);

        g2d.setColor(Color.BLUE);
        s = Integer.toString(value);
        drawRightAlignedString(g2d, s, width, font);

        g2d.dispose();

        return image;
    }

    private void drawRightAlignedString(Graphics2D g2d, String text, int width,
            Font font) {
        int pointSize = font.getSize() / 2;
        g2d.setFont(font.deriveFont((float) pointSize));
        FontMetrics metrics = g2d.getFontMetrics(g2d.getFont());
        int margin = 2;
        int x = width - metrics.stringWidth(text) - margin;
        int y = metrics.getAscent() - margin;
        g2d.drawString(text, x, y);
    }

    private void drawCenteredString(Graphics2D g2d, String text, Rectangle rect,
            Font font) {
        FontMetrics metrics = g2d.getFontMetrics(font);
        int x = rect.x + (rect.width - metrics.stringWidth(text)) / 2;
        int y = rect.y + ((rect.height - metrics.getHeight()) / 2)
                + metrics.getAscent();
        g2d.setFont(font);
        g2d.drawString(text, x, y);
    }

}

How to properly align a multiline text in a JButton?

1 Answers1