How to Create JPanels With Gradient Background Color In Java Netbeans
In this Java Tutorial we will see How To Create Gradient JPanels in Java NetBeans.
What We Are Gonna Use In This Project:
- Java Programming Language.- NetBeans Editor.
Project Source Code:
We will create a simple form with two panels with gradient background color.
package GradientPanels;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
*
* @author 1BestCsharp
*/
public class GradientPanels_V1 extends JPanel{
private Color startColor;
private Color endColor;
public GradientPanels_V1(Color _startColor, Color _endColor){
this.startColor = _startColor;
this.endColor = _endColor;
}
// Override the paintComponent method to customize the rendering of the panel
@Override
protected void paintComponent(Graphics g){
super.paintComponent(g);
// Create a Graphics2D object for advanced rendering operations
Graphics2D g2d = (Graphics2D) g.create();
// Create a gradient paint object from the startColor to the endColor
GradientPaint gradientPaint = new GradientPaint(
// Starting point of the gradient
new Point2D.Float(0,0), startColor,
// Ending point of the gradient
new Point2D.Float(0,getHeight()), endColor
);
// Set the paint of the Graphics2D object to the gradient paint
g2d.setPaint(gradientPaint);
// Fill a rectangle with the gradient, covering the entire panel
g2d.fillRect(0, 0, getWidth(), getHeight());
}
public static void main(String[] args) {
GradientPanels_V1 panel1 = new GradientPanels_V1(Color.RED, Color.YELLOW);
GradientPanels_V1 panel2 = new GradientPanels_V1(Color.BLUE, Color.CYAN);
panel1.setPreferredSize(new Dimension(400, 400));
panel2.setPreferredSize(new Dimension(400, 400));
JFrame frame = new JFrame("Gradient Panels V1");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new FlowLayout());
frame.add(panel1);
frame.add(panel2);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Project Source Code:
We Will create and display custom gradient panels and displays a title and additional data text. The title is rendered in a bold font, while the data text is rendered in a plain font.
package GradientPanels;
import java.awt.Color;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.RenderingHints;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
*
* @author 1BestCsharp
*/
public class GradientPanels_V2 extends JPanel{
private Color startColor; // Starting color for the gradient
private Color endColor; // Ending color for the gradient
private String panelTitle; // Title to be displayed on the panel
private String panelData; // Data to be displayed on the panel
// Fonts for title and data
private static final Font titleFont = new Font("Helvatica", Font.BOLD, 22);
private static final Font dataFont = new Font("Arial", Font.PLAIN, 16);
public GradientPanels_V2(Color startColor, Color endColor, String panelTitle, String panelData)
{
this.startColor = startColor;
this.endColor = endColor;
this.panelTitle = panelTitle;
this.panelData = panelData;
}
// Override the paintComponent method to customize the rendering of the panel
@Override
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
// Create a Graphics2D object for advanced rendering
Graphics2D g2d = (Graphics2D) g.create();
GradientPaint gradientPaint = new GradientPaint(
new Point2D.Float(0,0), startColor,
new Point2D.Float(0,getHeight()), endColor
);
g2d.setPaint(gradientPaint);
// Fill the panel with the gradient paint
g2d.fillRect(0, 0, getWidth(), getHeight());
g2d.setColor(Color.WHITE);
g2d.setFont(titleFont);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// Draw the title at specified coordinates
g2d.drawString(panelTitle, 20, 30);
g2d.setColor(Color.lightGray);
g2d.setFont(dataFont);
// Draw the data at specified coordinates
g2d.drawString(panelData, 20, 60);
g2d.dispose();
}
public static void main(String[] args) {
JFrame frame = new JFrame("Gradient Panel V2");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(2, 2));
GradientPanels_V2 panel1 = new GradientPanels_V2(Color.decode("#1B5E20"), Color.BLACK, "Sales Data", "$4,753.920");
//GradientPanels_V2 panel2 = new GradientPanels_V2(Color.RED, Color.yellow, "User State", "Active Users: 759");
//decode("#1976D2")
GradientPanels_V2 panel2 = new GradientPanels_V2(Color.decode("#0D47A1"), Color.CYAN, "User State", "Active Users: 759");
GradientPanels_V2 panel3 = new GradientPanels_V2(Color.decode("#E65100"), Color.CYAN, "Product Inventory", "Available Items: 387");
GradientPanels_V2 panel4 = new GradientPanels_V2(Color.decode("#4A148C"), Color.WHITE, "Sales Data", "Profit: $1,276");
frame.add(panel1);
frame.add(panel2);
frame.add(panel3);
frame.add(panel4);
frame.setSize(800,600);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Project Source Code:
We will create 4 panels with gradient background color to display labels and values.
package GradientPanels;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
/**
*
* @author 1BestCsharp
*/
public class GradientPanels_V3 extends JPanel{
private Color startColor;
private Color endColor;
public GradientPanels_V3(Color startColor, Color endColor){
this.startColor = startColor;
this.endColor = endColor;
setLayout(new BorderLayout());
add(createContentPanel(), BorderLayout.CENTER);
}
// Make a Method to create the content panel with labels and values
private JPanel createContentPanel(){
JPanel contentPanel = new JPanel(new GridBagLayout());
contentPanel.setOpaque(false);
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = GridBagConstraints.RELATIVE;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.anchor = GridBagConstraints.WEST;
gbc.insets = new Insets(10, 0, 5, 0);
Font labelFont = new Font("Arial",Font.BOLD,17);
Font valueFont = new Font("Arial",Font.PLAIN,17);
// Labels and values to be displayed
String[] labels = {"Total Revenue: ","Expenses: ","Profit: ","Customers: "};
String[] values = {"$10,500","$5,200","$5,300","1,200"};
// Loop to add labels and values to the content panel
for(int i = 0; i < labels.length; i++){
JLabel label = new JLabel(labels[i]);
label.setFont(labelFont);
label.setForeground(Color.WHITE);
JLabel value = new JLabel(values[i]);
value.setFont(valueFont);
value.setForeground(Color.BLACK);
gbc.gridx = 0;
contentPanel.add(label,gbc);
gbc.gridx = 1;
contentPanel.add(value,gbc);
}
return contentPanel;
}
// Override method to paint the gradient background
@Override
protected void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
GradientPaint gradientPaint = new GradientPaint(
new Point2D.Float(0,0), startColor,
new Point2D.Float(0,getHeight()), endColor
);
g2d.setPaint(gradientPaint);
g2d.fillRect(0, 0, getWidth(), getHeight());
g2d.dispose();
}
public static void main(String[] args) {
JFrame frame = new JFrame("Gradient Panel V3");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(2,2));
/*
GradientPanels_V3 panel1 = new GradientPanels_V3(new Color(242,149,76), new Color(232,94,31));
GradientPanels_V3 panel2 = new GradientPanels_V3(new Color(134,211,12), new Color(35,154,59));
GradientPanels_V3 panel3 = new GradientPanels_V3(new Color(245,94,81), new Color(226,47,42));
GradientPanels_V3 panel4 = new GradientPanels_V3(new Color(194,149,255), new Color(232,50,204));
*/
GradientPanels_V3 panel1 = new GradientPanels_V3(Color.RED, Color.YELLOW);
GradientPanels_V3 panel2 = new GradientPanels_V3(new Color(134,211,12), new Color(35,154,59));
GradientPanels_V3 panel3 = new GradientPanels_V3(Color.BLUE, Color.CYAN);
GradientPanels_V3 panel4 = new GradientPanels_V3(new Color(194,149,255), new Color(232,50,204));
frame.add(panel1);
frame.add(panel2);
frame.add(panel3);
frame.add(panel4);
frame.setSize(800,500);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Project Source Code:
We will creates rounded rectangle with a gradient background using panels and a semi-transparent black overlay to create a shadow effect.
package GradientPanels;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.RenderingHints;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;
/**
*
* @author 1BestCsharp
*/
public class GradientPanels_V4 extends JPanel{
private Color startColor;
private Color endColor;
public GradientPanels_V4(Color startColor, Color endColor){
this.startColor = startColor;
this.endColor = endColor;
setOpaque(false);
}
@Override
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// Create a gradient paint with the specified start and end colors
GradientPaint gradientPaint = new GradientPaint(
new Point2D.Float(0, 0), startColor,
new Point2D.Float(0, getHeight()), endColor
);
g2d.setPaint(gradientPaint);
g2d.fillRoundRect(0, 0, getWidth(), getHeight(), 50, 50);
// Add a semi-transparent black overlay for a shadow effect
g2d.setColor(new Color(0,0,0,100));
g2d.fillRoundRect(5, 5, getWidth() - 10, getHeight() - 10, 50, 50);
g2d.dispose();
}
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(2, 2, 10, 10));
/*
GradientPanels_V4 panel1 = new GradientPanels_V4(new Color(0,122,204), new Color(0,153,255));
GradientPanels_V4 panel2 = new GradientPanels_V4(new Color(60,179,113), new Color(102,255,153));
GradientPanels_V4 panel3 = new GradientPanels_V4(new Color(204,0,0), new Color(255,51,51));
GradientPanels_V4 panel4 = new GradientPanels_V4(new Color(255,102,204), new Color(255,153,255));
*/
GradientPanels_V4 panel1 = new GradientPanels_V4(Color.BLACK, Color.LIGHT_GRAY);
GradientPanels_V4 panel2 = new GradientPanels_V4(Color.RED, Color.YELLOW);
GradientPanels_V4 panel3 = new GradientPanels_V4(Color.BLUE, Color.CYAN);
GradientPanels_V4 panel4 = new GradientPanels_V4(Color.MAGENTA, Color.GREEN);
panel1.setLayout(new BorderLayout());
panel2.setLayout(new BorderLayout());
panel3.setLayout(new BorderLayout());
panel4.setLayout(new BorderLayout());
JLabel label1 = new JLabel("Panel 1 Data", SwingConstants.CENTER);
JLabel label2 = new JLabel("Panel 2 Data", SwingConstants.CENTER);
JLabel label3 = new JLabel("Panel 3 Data", SwingConstants.CENTER);
JLabel label4 = new JLabel("Panel 4 Data", SwingConstants.CENTER);
label1.setForeground(Color.WHITE);
label2.setForeground(Color.WHITE);
label3.setForeground(Color.WHITE);
label4.setForeground(Color.WHITE);
panel1.add(label1, BorderLayout.CENTER);
panel2.add(label2, BorderLayout.CENTER);
panel3.add(label3, BorderLayout.CENTER);
panel4.add(label4, BorderLayout.CENTER);
frame.add(panel1);
frame.add(panel2);
frame.add(panel3);
frame.add(panel4);
frame.setSize(800,600);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Project Source Code:
This Java code defines a custom JPanel class called GradientPanels_V5, which is used to create panels with gradient backgrounds, titles, descriptions, and icons.
package GradientPanels;
import java.awt.Color;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.RenderingHints;
import java.awt.geom.Point2D;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
*
* @author 1BestCsharp
*/
public class GradientPanels_V5 extends JPanel{
private Color startColor;
private Color endColor;
private String title;
private String description;
private ImageIcon icon;
public GradientPanels_V5(Color startColor, Color endColor, String title, String description, ImageIcon icon){
this.startColor = startColor;
this.endColor = endColor;
this.title = title;
this.description = description;
this.icon = icon;
setOpaque(false);
}
// Method to paint the component, filling it with a gradient color
@Override
protected void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
GradientPaint gradientPaint = new GradientPaint(
new Point2D.Float(0,0), startColor,
new Point2D.Float(0,getHeight()), endColor
);
g2d.setPaint(gradientPaint);
g2d.fillRect(0, 0, getWidth(), getHeight());
g2d.dispose();
}
// Method to paint the border of the component
@Override
protected void paintBorder(Graphics g){
g.setColor(Color.YELLOW);
g.drawRect(0, 0, getWidth() - 1, getHeight() - 1);
}
// Method to paint the children components, including title and description
@Override
protected void paintChildren(Graphics g){
super.paintChildren(g);
Graphics2D g2d = (Graphics2D) g.create();
//center the icon
int iconX = getWidth() / 2 - icon.getIconWidth() / 2;
int iconY = getHeight()/ 2 - icon.getIconHeight() / 2;
icon.paintIcon(this, g2d, iconX, iconY);
g2d.setFont(new Font("Arial",Font.BOLD,16));
g2d.setColor(Color.WHITE);
g2d.drawString(title, 20, getHeight() - 30);
g2d.setFont(new Font("Arial",Font.PLAIN,12));
g2d.setColor(Color.YELLOW);
g2d.drawString(description, 20, getHeight() - 10);
g2d.dispose();
}
public static void main(String[] args) {
JFrame frame = new JFrame("Gradient Panel V5");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(2,2));
/*
GradientPanels_V5 panel1 = new GradientPanels_V5(new Color(54,215,183), new Color(48,187,167), "Sales", "Monthly Sales Report");
GradientPanels_V5 panel2 = new GradientPanels_V5(new Color(241,181,73), new Color(230,157,57), "Expenses", "Monthly Expenses Report");
GradientPanels_V5 panel3 = new GradientPanels_V5(new Color(109,169,218), new Color(91,143,188), "Projects", "Active Project Status");
GradientPanels_V5 panel4 = new GradientPanels_V5(new Color(197,124,182), new Color(178,100,160), "Users", "User Statics");
*/
// use better images
GradientPanels_V5 panel1 = new GradientPanels_V5( Color.RED, Color.BLACK, "Sales", "Monthly Sales Report", new ImageIcon(GradientPanels_V5.class.getResource("item100.png")));
GradientPanels_V5 panel2 = new GradientPanels_V5( Color.BLUE, Color.BLACK, "Expenses", "Monthly Expenses Report", new ImageIcon(GradientPanels_V5.class.getResource("stock100.png")));
GradientPanels_V5 panel3 = new GradientPanels_V5( Color.WHITE, Color.BLACK, "Projects", "Active Project Status", new ImageIcon(GradientPanels_V5.class.getResource("price100.png")));
GradientPanels_V5 panel4 = new GradientPanels_V5( Color.GREEN, Color.BLACK, "Users", "User Statics", new ImageIcon(GradientPanels_V5.class.getResource("manager.png")));
frame.add(panel1);
frame.add(panel2);
frame.add(panel3);
frame.add(panel4);
frame.setSize(600,400);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
if you want the source code click on the download button below
More Java Projects:
Download Projects Source Code