Advertisements

Drawing Android icon in swing

Hi, I tried to make android robot in java swing. I found 2 ways of doing this:

  1. Get android robot image, and show it as background in panel.
  2. Draw whole robot shape in java 2d graphics.

Here I will demonstrate the second way. The final output will be like this:

android_icon_in_java_swing

There are mainly five shapes used in this:

  1. A half circle shape for the head.
  2. Round rectangles for hands and legs.
  3. Big rectangle for the body.
  4. Lines for antennas.
  5. Small white circles for eyes.

So here is how you do it in java swing using Graphics2d object. ย The color used is “r=153, g= 204, ย b=0”:

g2d.setColor(new Color(153, 204, 0));

1. First for the head, the half circle:

g2d.fillArc(75, 55, 150, 125, 0, 180); // head circle

2. The body, a big rectangle. But as in the icon the bottom of body has round corner so as a hack added a round rectangle just after the body, with slightly overlap for not showing top round corners of second rectangle.

g2d.fillRect(75, 125, 150, 150); // body
g2d.fillRoundRect(75, 260, 150, 20, 20, 20); // cause bottom of body has round corners

3. Now for the had. It is quite easy, just need to draw 2 round rectangles and position them at the right point.

g2d.fillRoundRect(40, 120, 30, 110, 30, 30); // right hand
g2d.fillRoundRect(230, 120, 30, 110, 30, 30); // left hand

4. For the legs, do the same as done for hand, draw 2 round rectangles with smaller height and position changed to bottom of body.

g2d.fillRoundRect(95, 260, 30, 70, 30, 30); // right leg
g2d.fillRoundRect(175, 260, 30, 70, 30, 30); // left leg

5. For the antennas:

g2d.drawLine(125, 65, 100, 40); // right head antenna
g2d.drawLine(175, 65, 200, 40); // left head antenna

6. And finally for the eyes

g2d.setColor(Color.white); // change the color for the eyes
g2d.fillOval(115, 80, 10, 10); // left eye
g2d.fillOval(175, 80, 10, 10); // right eye

The whole code combined will look like this:

@Override
protected void paintComponent(Graphics g1) {
	Graphics2D g2d = (Graphics2D) g1;
	g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
	g2d.setColor(new Color(153, 204, 0));
	g2d.fillArc(75, 55, 150, 125, 0, 180); // head circle
	g2d.fillRect(75, 125, 150, 150); // body
	g2d.fillRoundRect(75, 260, 150, 20, 20, 20); // cause bottom of body has round corners
	g2d.fillRoundRect(40, 120, 30, 110, 30, 30); // right hand
	g2d.fillRoundRect(230, 120, 30, 110, 30, 30); // left hand
	g2d.fillRoundRect(95, 260, 30, 70, 30, 30); // right leg
	g2d.fillRoundRect(175, 260, 30, 70, 30, 30); // left leg
	g2d.drawLine(125, 65, 100, 40); // right head antenna 
	g2d.drawLine(175, 65, 200, 40); // left head antenna

	g2d.setColor(Color.white);
	g2d.fillOval(115, 80, 10, 10); // left eye
	g2d.fillOval(175, 80, 10, 10); // right eye
}

Hope you like it. ๐Ÿ˜€


And for the people who are interested in first way, here is how you do it. The first way is quite easy, you need to use drawImage method of Graphics.

@Override
protected void paintComponent(Graphics g) {
	Graphics2D g2d = (Graphics2D) g;
	BufferedImage img = null;
	try {
		img = ImageIO.read(TestAndroidIcon.class.getClassLoader().getResource("./android.png"));
		int w = img.getWidth(null);
		int h = img.getHeight(null);
		BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
		Graphics g1 = bi.getGraphics();
		g1.drawImage(img, 0, 0, null);
		g2d.drawImage(bi, null, 0, 0);
	} catch (IOException e) {
		e.printStackTrace();
	}
}

๐Ÿ™‚

Advertisements

Circular progress bar in Java Swing

Had you ever got thought of creating a circular progress bar in swing? yes, huh. At first it sounds difficult but then when you start building it then you might found that it is very easy if you have already made an clock application. ๐Ÿ™‚

Final result would be like this:

circlePB

We will start by creating a circle animation by use of Timer and overriding paintComponent method of a JPanel:

/**
 * Circular progress bar panel.
 * @author harsh
 */
public class CircularProgressBar extends JPanel {
      private final static int MAX_PROGRESS_AMOUNT = 100;
      private static final int DELAY = 50;
      private Timer timer;
      private int prgValue = 0;

      public CircularProgressBar() {
            timer = new Timer(DELAY, new MyChangeListener());
            timer.start();
      }

      @Override
      protected void paintComponent(Graphics g) {
             Graphics2D g2 = (Graphics2D) g;
             g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
             if (prgValue <= MAX_PROGRESS_AMOUNT) {
                   g.setColor(Color.blue);
                   int angle = -(int) (((float) prgValue / MAX_PROGRESS_AMOUNT) * 360);
                   g.fillArc(0, 0, getWidth(), getHeight(), 90, angle);

            }
     }

     class MyChangeListener implements ActionListener {
         @Override
         public void actionPerformed(ActionEvent arg0) {
             prgValue++;
             repaint();
             if (prgValue >= MAX_PROGRESS_AMOUNT)
                  timer.stop();
        }
    }
}

if you run this you will see something like this:

It was easy, huh. Now the challenging part is to remove inner circular part and make it to view like first image. For that I decide to draw another circle with the same color as background. So here it is:


g2.setColor(getBackground());
g.fillArc(getWidth() / FRACTION / 2, getHeight() / FRACTION / 2,
getWidth() * (FRACTION - 1) / FRACTION, getHeight() * (FRACTION - 1) / FRACTION, 92, angle);

Add this code to paintComponent method and once again run the program. Now you will see something like in first picture. ย In above code FRACTION is the width you want for your progress bar. Lesser value of fraction, wider the progress bar. One more difference in 2 fillArc method is in the start angle, in first method it is 90 and in second its 92. This difference will be width of the middle hand.

Here is the testing code:

JFrame frame = new JFrame("Circular Progress Bar by Harry Joy");
frame.add(new CircularProgressBar());
frame.setSize(350, 350);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

Hope you like it. ๐Ÿ™‚

%d bloggers like this: