How to make button like music player using java.swing

Question

Now I create gui music player with java. In java.swing.JButton, there are square buttons , but I want to customize that button like music player's button. How to make buttons like 'Play Button' in music player? And I also want stop and reset buttons, too.

play button is like ▶ this shape in circle.
stop button is like || this shape in circle.
reset button is like ■ this shape in circle.

thanks for your comment

Answer 1

You could simply set the text of the JButton as the symbol ▶

JButton button = new JButton("▶");

You need to save the .java file with UTF-8 character set though, in eclipse it's really easy as you get a popup.

It's the easiest but least customizable solution. Another workaround would be to create an image with whatever symbol you wish the button to show. Then add a rectangle to the image's bounds. To check for mouse clicks, simply use a MouseListener and do something similar to this:

if(mouse.isClicked() && rect.contains(mouse.x, mouse.y) { //do stuff }

Answer 2

You can set the play like image to the JButton.

Save your image named "playname" to "path/to/image/" and call as shown in this code:

// JButton play = new JButton();
// assuming play is the place where you've added your JButton
ImageIcon playimg = new ImageIcon("path/to/image/playname");
play.setIcon(playimg);

You can similarly add the same logic for other buttons too.

Answer 3

You could make the button have an image in i, or make the image a button itself.

Answer 4

You can do it by setting the immage you want to the Button. This way you can have a button with Play Icon!

Example:

JButton button= new JButton();
ImageIcon img = new ImageIcon("imgfolder/name.png");
button.setIcon(img);

Answer 5

If you want to make custom button, there is only one easy way to do it. First way is find a custom button library or make your button from image.

Else you can try look on this another post.

Answer 6

Alternatively to using rendered images (like a PNG) and an ImageIcon, you could use Java2D Shapes/Areas.

E.g. to create a Play Area, do something like this:

final GeneralPath play = new GeneralPath();
play.moveTo(1.0/5.0, 1.0/5.0);
play.lineTo(1.0/5.0, 1.0*4.0/5.0);
play.lineTo(1.0*4.0/5.0, 1.0/2.0);
play.closePath();
final Area playArea = new Area(play);

To draw the shape as Icon, use this custom class:

import javax.swing.*;
import java.awt.*;
import java.awt.geom.*;

public class ShapeIcon implements Icon {

    private final Shape shape;
    private final Paint paint;
    private final Color color;
    private final int size;
    private final boolean fill;
    private final Stroke stroke;

    public ShapeIcon(final Shape shape, final Color color, final int size) {
        this(shape, color, size, true, new BasicStroke(0.5f));
    }

    public ShapeIcon(final Shape shape, final Color color, final int size, final boolean fill, final Stroke stroke) {
        this.stroke = stroke;
        this.fill = fill;
        this.color = color;
        // allow for customization of fill color/gradient
        // a plain color works just as well—this is a little fancier
        this.paint = new GradientPaint(0, 12, color.brighter(), 0, 20, color);
        this.size = size;
        // you could also define different constructors for different Shapes
        if (shape instanceof Path2D) {
            this.shape = ((Path2D)shape).createTransformedShape(AffineTransform.getScaleInstance(size, size));
        } else if (shape instanceof Area) {
            this.shape = ((Area) shape).createTransformedArea(AffineTransform.getScaleInstance(size, size));
        } else {
            this.shape = new Area(shape).createTransformedArea(AffineTransform.getScaleInstance(size, size));
        }
    }

    @Override
    public void paintIcon(final Component c, final Graphics g, final int x, final int y) {
        final Graphics2D g2d = (Graphics2D)g.create();
        g2d.translate(x, y);
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        if (fill) {
            g2d.setPaint(paint);
            g2d.fill(shape);
        }
        g2d.setPaint(color);
        g2d.setStroke(stroke);
        g2d.draw(shape);
        g2d.dispose();
    }

    @Override
    public int getIconWidth() {
        return size;
    }

    @Override
    public int getIconHeight() {
        return size;
    }
}

Answer 7

Use the setBorder method of JButton.

roundButton.setBorder(new RoundedBorder(10));