In Nimbus look and feel JButtons have a very tidy and accurate look, with rounded border and nice background.
I'd like to render a JPanel with the very same look (obviously it won't have pressed state etc).
What are my options?
The easiest way to get "Button look" on a JPanel is probably by extending the JPanel and override paintComponent.
Here is the Nimbus JButton look:
And here is my implementation of a similar look on a JPanel (I added an empty border around for showing this example, and the corners are not translucent):
Here is my code (using gradients):
public class ColorDemo extends JPanel {
private final int gradientSize = 18;
private final Color lighterColor = new Color(250, 250, 250);
private final Color darkerColor = new Color(225, 225, 230);
private final Color edgeColor = new Color(140, 145, 145);
private final Stroke edgeStroke = new BasicStroke(1);
private final GradientPaint upperGradient = new GradientPaint(
0, 0, lighterColor,
0, gradientSize, darkerColor);
#Override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
GradientPaint lowerGradient = new GradientPaint(
0, getHeight()-gradientSize-1, darkerColor,
0, getHeight(), lighterColor);
g2.setPaint(upperGradient);
g2.fillRect(0, 0, getWidth()-1 , gradientSize);
g2.setPaint(darkerColor);
g2.fillRect(0, gradientSize, getWidth()-1, getHeight()-gradientSize-1);
g2.setPaint(lowerGradient);
g2.fillRect(0, getHeight()-gradientSize, getWidth()-1, getHeight()-1);
g2.setStroke(edgeStroke);
g2.setPaint(edgeColor);
g2.drawRoundRect(0, 0, getWidth()-1, getHeight()-1,
gradientSize/2, gradientSize/2);
}
}
UPDATE
Here is an improved paintComponent method by AgostinoX that solved the corner issue in my code.
#Override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
float gradientPerc = (float)gradientSize/getHeight();
LinearGradientPaint lgp = new LinearGradientPaint(0,0,0,getHeight()-1,
new float[] {0, gradientPerc, 1-gradientPerc, 1f},
new Color[] {lighterColor, darkerColor, darkerColor, lighterColor});
g2.setPaint(lgp);
g.fillRoundRect(0, 0, getWidth()-1, getHeight()-1,
gradientSize, gradientSize);
g2.setColor(edgeColor);
g2.setStroke(edgeStroke);
g.drawRoundRect(0, 0, getWidth()-1, getHeight()-1,
gradientSize, gradientSize);
}
See also my answer to How to hide the arrow buttons in a JScrollBar on how you can customize the look and feel for Nimbus. And see the Nimbus defaults for colors and painters.
Related
I have jDialog, it is in BorderLayout, in "south", "north" and "center" I have jPanel with elements (with nothing in the "center"'s jPanel.
"center" jPanel is called Map.
I'm thing things like :
In the main
Graphics t = Map.getGraphics();
paintComponent(t);
Not in the main.
public void paintComponent(Graphics g){
super.paintComponents(g);
g.drawLine(0, 0, 50, 150);
}
I cannot draw anything. What is the mistake I have done?
JPanel Map = new JPanel() {
public void paintComponent( Graphics g ) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
Line2D line = new Line2D.Double(10, 10, 40, 40);
g2.setColor(Color.blue);
g2.setStroke(new BasicStroke(10));
g2.draw(line);
}
};
getContentPane().add(Map, java.awt.BorderLayout.CENTER);
Map.add(new JLabel(pseudo));
pack();
in the dlg constructor.
thanks for you nohelp it worked
Here i have small piece of code for getting rectangular box using AWT.But i want that border should be rounded corner.Can you please suggest me?
int width = 150;
int height = 50;
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = bufferedImage.createGraphics();
Font font = new Font("Georgia", Font.BOLD, 18);
g2d.setFont(font);
RenderingHints rh = new RenderingHints(
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
rh.put(RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHints(rh);
GradientPaint gp = new GradientPaint(0, 0,
Color.decode("#24777D"), 0, height / 2, Color.decode("#008080"), true);
g2d.setPaint(gp);
g2d.fillRect(0, 0, width, height);
g2d.setColor(new Color(255, 255, 255));
g2d.dispose();
Use drawRoundRect() method of Graphics2D class to paint border in addition to fillRoundRect() method.Follow API documentation.Here is a sample code for a try.
JFrame f = new JFrame();
f.setLayout(null);
f.setDefaultCloseOperation(3);
f.setSize(500, 500);
f.setLocationRelativeTo(null);
JPanel p = new JPanel() {
protected void paintComponent(Graphics g) {
super.paintComponent(g);
int width = getWidth();
int height = getHeight();
Graphics2D graphics = (Graphics2D) g;
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
//Draws the rounded opaque panel with borders.
graphics.setColor(getBackground());
//paint background
graphics.fillRoundRect(0, 0, width, height, 17, 17);
graphics.setColor(getForeground());
//paint border
graphics.drawRoundRect(0, 0, width, height, 17, 17);
}
};
p.setBounds(20,20,150,50);
p.setOpaque(false);
f.getContentPane().setBackground(Color.BLUE);
f.add(p);
f.setVisible(true);
How to make JPanel to be transparent in this example? The gradient background is not visible:
package test;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.BoxLayout;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JWindow;
public class PaintJPanelOnJWindow extends JWindow {
public PaintJPanelOnJWindow() {
JPanel panel = new JPanel();
panel.setPreferredSize(new Dimension(350, 120));
panel.setMinimumSize(new Dimension(350, 120));
panel.setMaximumSize(new Dimension(350, 120));
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
panel.setOpaque(false);
JLabel someText = new JLabel("I'm not transparent and my JPanel too :(");
someText.setOpaque(false);
panel.add(someText);
add(panel);
pack();
setLocationRelativeTo(null);
setVisible(true);
}
#Override
public void paint(Graphics g) {
Graphics2D g2d = (Graphics2D) g.create();
try {
int w = getWidth(), h = getHeight();
g2d.setPaint(new GradientPaint(0, 0, Color.RED, 0, h, Color.WHITE));
g2d.fillRect(0, 0, w, h);
} finally {
g2d.dispose();
}
super.paint(g);
}
}
The immediate problem is that
super.paint(g);
is being called after the custom painting code in the paint method which will cause any previous painting to be lost. Calling panel.setOpaque(false) has no effect what is done in the paint method. Calling setOpaque for any of the components in the question is unnecessary - by default the backgrounds are displayed when custom painting is correctly implemented.
This should be done by overriding the paintComponent method. This means creating a new JPanel and placing the custom painting functionality there rather than in a top level container such as a JWindow.
Example:
public class PaintJPanelApp {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
JFrame frame = new JFrame("Gradient App");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setUndecorated(true);
frame.setLocationRelativeTo(null);
JLabel someText = new JLabel("I AM transparent and my JPanel too :)");
GradientPanel gradientPanel = new GradientPanel();
gradientPanel.add(someText);
frame.add(gradientPanel);
frame.pack();
frame.setVisible(true);
}
});
}
static class GradientPanel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
int w = getWidth();
int h = getHeight();
Graphics2D g2d = (Graphics2D) g;
g2d.setPaint(new GradientPaint(0, 0, Color.RED, 0, h, Color.WHITE));
g2d.fillRect(0, 0, w, h);
}
}
}
From JavaDocs:
create(): Creates a new Graphics object that is a copy of this Graphics object.
Which means that the Graphics object g2d is not referring to the JWindow Graphics object, it is referring to a copy of the JWindow Graphics object.
You need to change
Graphics2D g2d = (Graphics2D) g.create(); //creates a copy, wrong object
To
Graphics2D g2d = (Graphics2D) g; //refers to the right Graphics object
UPDATE
However, this is not the right way to do it. You should override JPanel's paintComponent method instead of breaking the window's paint process. First, remove the paint() method override from your class. Then, initialize the JPanel as follows:
JPanel panel = new JPanel() {
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
int w = getWidth(), h = getHeight();
g2d.setPaint(new GradientPaint(0, 0, Color.RED, 0, h, Color.WHITE));
g2d.fillRect(0, 0, w, h);
}
};
I'm getting extremely pixilated corners when i try to make a rounded rectangle. Is there any way to smooth them out?
Here's an image (Notice the corners):
Here is the code for the Button that I subclass and override the paint method (The one with the pixilated corner):
public class ControlButton extends JButton {
public final static Color BUTTON_TOP_GRADIENT = new Color(176, 176, 176);
public final static Color BUTTON_BOTTOM_GRADIENT = new Color(156, 156, 156);
public ControlButton(String text) {
setText(text);
}
public ControlButton() {
}
#Override
protected void paintComponent(Graphics g){
Graphics2D g2 = (Graphics2D)g.create();
g2.setPaint(new GradientPaint(
new Point(0, 0),
BUTTON_TOP_GRADIENT,
new Point(0, getHeight()),
BUTTON_BOTTOM_GRADIENT));
g2.fillRoundRect(0, 0, getWidth(), getHeight(), 20, 20);
g2.dispose();
}
}
Try this:
RenderingHints qualityHints = new RenderingHints(
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON );
qualityHints.put(
RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY );
g2.setRenderingHints( qualityHints );
Take a look at the documentation:
http://docs.oracle.com/javase/tutorial/2d/advanced/quality.html
Code:
import javax.swing.*;
import java.awt.*;
public class ControlButton extends JButton {
public final static Color BUTTON_TOP_GRADIENT = new Color(176, 176, 176);
public final static Color BUTTON_BOTTOM_GRADIENT = new Color(156, 156, 156);
public ControlButton(String text) {
setText(text);
}
public ControlButton() {
}
#Override
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g.create();
RenderingHints qualityHints =
new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
qualityHints.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2.setRenderingHints(qualityHints);
g2.setPaint(new GradientPaint(new Point(0, 0), BUTTON_TOP_GRADIENT, new Point(0, getHeight()),
BUTTON_BOTTOM_GRADIENT));
g2.fillRoundRect(0, 0, getWidth(), getHeight(), 20, 20);
g2.dispose();
}
public static void main(String args[]) {
JFrame frame = new JFrame("test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(new ControlButton("Hello, World"));
frame.pack();
frame.setVisible(true);
}
}
I did this:
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
I feel it gave me smoother edges than Dave Jarvis' method but I could be wrong.
So I'm trying to draw a solid red oval on a transparent window. I later want to do something more complex with multiple shapes, so using setWindowShape isn't what I'm looking for. This is the code I'm using so far:
import java.awt.*;
import javax.swing.*;
public class JavaDock extends JFrame{
public JavaDock(){
super("This is a test");
setSize(400, 150);
setUndecorated(true);
getContentPane().setLayout(new FlowLayout());
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel()
{
public void paintComponent(Graphics g)
{
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.Clear);
g.setColor(Color.red);
//Draw an oval in the panel
g.fillOval(10, 10, getWidth() - 20, getHeight() - 20);
}
};
panel.setOpaque(false);
setGlassPane(panel);
getGlassPane().setVisible(true);
com.sun.awt.AWTUtilities.setWindowOpacity(this, 0.5f);
setVisible(true);
}
protected void paintComponent(Graphics g) {
}
public static void main(String[] args){
JavaDock jd = new JavaDock();
}
}
You are applying a global transparency to you window, so naturally everything in it will be at least as transparent as the global value. You probably want per-pixel translucency. Replace
com.sun.awt.AWTUtilities.setWindowOpacity(this, 0.5f);
with
com.sun.awt.AWTUtilities.setWindowOpaque(this, false);
This leaves just your oval visible and it will be completely opaque. More infos can be found in this Tutorial
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.Clear);
g.setColor(Color.red);
g.fillOval(10, 10, getWidth() - 20, getHeight() - 20);
Code doesn't look quite right. I would try:
Graphics2D g2d = (Graphics2D)g;
g2d.setComposite(AlphaComposite.Clear);
g2d.setColor(Color.red);
g2d.fillOval(10, 10, getWidth() - 20, getHeight() - 20);
or just use:
g.setColor(Color.red);
g.fillOval(10, 10, getWidth() - 20, getHeight() - 20);