Different button shapes in swing

Make a class that extends JButton and in its constructor write following [Following code is common for all shapes]:

super(label);
Dimension size = getPreferredSize();
size.width = size.height = Math.max(size.width, size.height);
setPreferredSize(size);
setContentAreaFilled(false);

Round [Circular] buttons:

protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
           g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     g.fillOval(0, 0, getSize().width-1, getSize().height-1);
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     g.drawOval(0, 0, getSize().width-1, getSize().height-1);
}
Shape shape;
public boolean contains(int x, int y) {
     if (shape == null || !shape.getBounds().equals(getBounds())) {
          shape = new Ellipse2D.Float(0, 0, getWidth(), getHeight());
     }
     return shape.contains(x, y);
}

Triangle buttons:

protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
          g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     int xPoints[] = {getSize().width/2, 0, getSize().width};
     int yPoints[] = {0, getSize().height, getSize().height};
     g.fillPolygon(x3Points, y3Points, xPoints.length);
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     int xPoints[] = {getSize().width/2, 0, getSize().width};
     int yPoints[] = {0, getSize().height, getSize().height};
     g.drawPolygon(xPoints, yPoints, xPoints.length);
}
Polygon polygon;
public boolean contains(int x, int y) {
     if (polygon == null || !polygon.getBounds().equals(getBounds())) {
          int xPoints[] = {getSize().width/2, 0, getSize().width};
          int yPoints[] = {0, getSize().height, getSize().height};
          polygon = new Polygon(xPoints,yPoints, xPoints.length);
     }
     return polygon.contains(x, y);
}

Oval buttons:

protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
          g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     g.fillOval(0, getHeight()/8, getWidth(), getHeight()-(getHeight()/4));
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     g.drawOval(0, getHeight()/8, getWidth(), getHeight()-(getHeight()/4));
}
Shape shape;
public boolean contains(int x, int y) {
     if (shape == null || !shape.getBounds().equals(getBounds())) {
          shape = new Ellipse2D.Float(0, getHeight()/8, getWidth(), getHeight()-getHeight()/4));
     }
     return shape.contains(x, y);
}

RoundRect buttons

protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
          g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     g.fillRoundRect(0, 0, getWidth()-1, getHeight()-1, 15, 15);
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     g.drawRoundRect(0, 0, getWidth()-1, getHeight()-1, 15, 15);
}
Shape shape;
public boolean contains(int x, int y) {
     if (shape == null || !shape.getBounds().equals(getBounds())) {
          shape = new RoundRectangle2D.Float(0, 0, getWidth()-1, getHeight()-1, 15, 15);
     }
     return shape.contains(x, y);
}

Star buttons:

public static Shape makeStarDesign(int arms, Point center, double r_out, double r_in) {
     double angle = Math.PI / arms;
     GeneralPath path = new GeneralPath();
     for (int i = 0; i < 2 * arms; i++) {
          double r = (i & 1) == 0 ? r_out : r_in;
          Point2D.Double p = new Point2D.Double(center.x + Math.cos(i * angle) * r, center.y + Math.sin(i * angle) * r);
          if (i == 0) path.moveTo(p.getX(), p.getY());
          else path.lineTo(p.getX(), p.getY());
     }
     path.closePath();
     return path;
}
protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
          g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     Graphics2D graphics2d = (Graphics2D) g;
     graphics2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
     graphics2d.fill(makeStarDesign(5, new Point(50,50), 50, 30));
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     Graphics2D graphics2d = (Graphics2D) g;
     graphics2d.draw(makeStarDesign(5, new Point(50,50), 50, 30));
}
Shape shape;
public boolean contains(int x, int y) {
     if (shape == null || !shape.getBounds().equals(getBounds())) {
          shape = new Area(makeStarDesign(5, new Point(50,50), 50, 30));
     }
     return shape.contains(x, y);
}

Just change the first argument of makeStarDesign to number of arrows you want in star and it will try to draw it for you. 🙂

Play buttons:

      protected void paintComponent(Graphics g) {
		if (getModel().isArmed()) {
			g.setColor(Color.lightGray);
		} else {
			g.setColor(getBackground());
		}
		int xPoints[] = {0, 0, getWidth()};
		int yPoints[] = {0, getHeight(), getHeight()/2};
		g.fillPolygon(xPoints, yPoints, xPoints.length);
		super.paintComponent(g);
	}

	protected void paintBorder(Graphics g) {
		g.setColor(getForeground());
		int xPoints[] = {0, 0, getWidth()};
		int yPoints[] = {0, getHeight(), getHeight()/2};
		g.drawPolygon(xPoints, yPoints, xPoints.length);
	}

	Polygon polygon;
	public boolean contains(int x, int y) {
		if (polygon == null ||
				!polygon.getBounds().equals(getBounds())) {
			int xPoints[] = {0, 0, getWidth()};
			int yPoints[] = {0, getHeight(), getHeight()/2};
			polygon = new Polygon(xPoints,yPoints,xPoints.length);
		}
		return polygon.contains(x, y);
	}

Pentagon buttons:

	int n=5;
	int x[]= new int[n];
	int y[]= new int[n];
	double angle = 2*Math.PI/n;
	protected void paintComponent(Graphics g) {
		if (getModel().isArmed()) {
			g.setColor(Color.lightGray);
		} else {
			g.setColor(getBackground());
		}
		int x0 = getSize().width/2;
		int y0 = getSize().height/2;
		for(int i=0; i<n; i++) {
			double v = i*angle;
			x[i] = x0 + (int)Math.round((getWidth()/2)*Math.cos(v));
			y[i] = y0 + (int)Math.round((getHeight()/2)*Math.sin(v));
		}
		g.fillPolygon(x, y, n);
		super.paintComponent(g);
	}

	protected void paintBorder(Graphics g) {
		g.setColor(getForeground());
		int x0 = getSize().width/2;
		int y0 = getSize().height/2;
		for(int i=0; i<n; i++) {
			double v = i*angle;
			x[i] = x0 + (int)Math.round((getWidth()/2)*Math.cos(v));
			y[i] = y0 + (int)Math.round((getHeight()/2)*Math.sin(v));
		}
		g.drawPolygon(x, y, n);
	}

	Polygon polygon;
	public boolean contains(int x1, int y1) {
		if (polygon == null ||
				!polygon.getBounds().equals(getBounds())) {
			int x0 = getSize().width/2;
			int y0 = getSize().height/2;
			for(int i=0; i<n; i++) {
				double v = i*angle;
				x[i] = x0 + (int)Math.round((getWidth()/2)*Math.cos(v));
				y[i] = y0 + (int)Math.round((getHeight()/2)*Math.sin(v));
			}
			polygon = new Polygon(x,y,n);
		}
		return polygon.contains(x1, y1);
	}

Diamond button:

Just change value of n in above code to 4.

Hexagon button:

Just change value of n in above code to 6.

By changing value of n you will get different shapes like follow:

: Different pentagon shapes

More buttons:

You just have to change the code for shape everything else is same. So try it yourself…. 😉

15 thoughts on “Different button shapes in swing”

JP @ arraylist java tutorial says:

August 21, 2011 at 12:26 pm

awesome man, you have almost build a library for displaying button of various shape , Can I use your code ?

Thanks
Javin
How to use Comparator and Comparable in Java

1. harryjoy says:
  
  August 21, 2011 at 2:43 pm
  
  Yes go on. Use it wherever you want. If you want you can provide link to this post where you use the code that will be good.
  
dapy says:

August 22, 2011 at 11:10 am

Nice! You might want to remove the jagged lines by switching on anti-aliasing. You can do it like this:
Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // drawing code goes here

1. harryjoy says:
  
  August 22, 2011 at 12:52 pm
  
  Thanks for your response. Updated the post accordingly for star buttons.
  
Jeff Martin says:

August 22, 2011 at 11:53 pm

Nice blog – I created a little applet in Java Inventor to show a few of them in action (with links to the code):

http://www.javi1.com/reportmill.com/jeff/JavaLobby/ShapeButtons/ShapeButtons.javi?form=applet

Pingback: Java desktop links of the week, August 31 | Jonathan Giles
Pingback: JavaPins
sama says:

August 14, 2012 at 3:05 pm

awesome awesome awesome!!! thanks a lot!!!!!

juan zabala says:

January 27, 2015 at 11:21 am

hi, if i want rotate the hexagon, as i do, please help me, with this code i learn to create a borrow in form bee.

1. harryjoy says:
  
  February 10, 2015 at 6:29 pm
  
  Hi Juan,
  
  You can convert Graphics obj to Graphics2d and then it has a rotate method which you can use to rotate it.
  
  g2d.rotate(Math.toRadians(45));
  
Pingback: java - Possible de changer la forme de JButton?
Pingback: java - Posible cambiar la forma de JButton?
Catman says:

December 1, 2021 at 1:44 pm

Thanx man for this! Is there a way to put multiple shapes side by side?

1. harryjoy says:
  
  December 1, 2021 at 5:21 pm
  
  Yes. You can import them and utilise side by side on same panel
  
Shira says:

January 16, 2022 at 9:12 am

Is it possible to create quarter of a circle?