Is it possible to build custom GUI like this in Java?

Question

I made this in Photoshop and I plan to use it for my file sharing application:

I was wondering if it was possible to create GUI for my application that is gonna have this look and feel.

If I can't build it only by using eclipse or NetBeans, are there any other tools that could help me?

Answer 1

Oh dear, no-no-no! If you want your users' eyes to bleed, then go for it. Otherwise, follow whatever UI guidelines are appropriate for your platform.

To answer your question: this is certainly doable in any modern windowing system.

Here's what generally happens when programmers design UIs:

_{(source: jensroesner.de)}

_{(source: bulkrenameutility.co.uk)}

Answer 2

Is not only possible but quite easy, you don't have to go all the way to create a custom Look and Feel.

This is what I've made in 20 minutes:

There is a lot of information on the web on how to customize the components without having to create a whole new L&F.

Understanding the Swing Architecture helps a lot.

Just in case you haven't read it the Swing Tutorial is here.

Finally you'll need the doc: Java doc

Answer 3

You can and even you can change it dynamically - see Look-n-Feel feature of swing

Answer 4

It's possible. But for most Java developers, it would require suppressing the gag reflex at such an ugly interface.

Here's a Java interface I wrote using no tools other than vi. I didn't design it, I just took the artists design, held my nose, and implemented it.

As for specifics, I'd suggest doing as much of the look and feel through the pluggable look and feel in Swing. Also, use LayoutManagers rather than making things constant sizes in constant locations, so that things can grow and shrink to different screen resolutions and also so that if you translate things you don't end up having to resize all your text labels and then shuffling everything else around.

Answer 5

Creating new LaF is too much. Since all your JButtons are different, just use JButton.setIcon() and JButton.setPressedIcon() and use your images. The rest is loading background and using strange fonts. Use Font.createFont() to load custom fonts. You'll probably have to draw your own JProgressbar. Override JProgressBar.paintComponent(Graphics g) and draw your own image.

Answer 6

Well thats very much possible, although alot of Java Swing developers might not agree with the UI in the image. perhaps rightly so.

Although to make it very possible try looking at JWindow, JTable, ImageIcon, Dimension, JProgressBar. You will also need ample of understanding for Java Layouts, and Events such as MouseEvents, ActionEvents.

Hope that helps.

Answer 7

It is very possible using Swing.

Check out the NetBeans GUI Builder

Answer 8

You'll have to create a lot of custom JComponents. Other than that, possible.

Answer 9

I would recommend

MiG Layout

for laying out components, it's very easy to grasp and is also way more powerful than the standard layout managers (and it's got a nice debugging mode, too).

Answer 10

I have to disagree with you! Actually you can use NetBeans to create such a GUI. It is easy too, you have a lot of options to work with! The ones I personally use are:

1) Create graphics with a painting software, and set it as Icon to the component. I use for the designing process InkScape, but any software should do the trick. You have to be preatty careful in this process, becouse you can't resize images in NetBeans (well, I never tried).

2) extend the UI class (Example: public class CustomButtonUI extend BasicButtonUI), and override the method paint, then use the function setUI (componentName.setUI(new CustomButtonUI);)

This is an example code:

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.AbstractButton;
import javax.swing.JComponent;
import javax.swing.plaf.basic.BasicButtonUI;

/**
 *
 * @author Ionut Cicio
 */
public class CustomButton extends BasicButtonUI{

    int borderThickness, edgeRoundness;

    @Override
    public void paint(Graphics g, JComponent c) {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor(c.getBackground());

        borderThickness = 2;
        edgeRoundness = 20;

        g2.setColor(c.getForeground());
        g2.fillRoundRect(0, 0, c.getWidth(), c.getHeight(), edgeRoundness+5, edgeRoundness+5);
        g2.drawRoundRect(0, 0, c.getWidth(), c.getHeight(), edgeRoundness+5, edgeRoundness+5);
        //g2.fillRect(0, 0, c.getWidth(), c.getHeight());
        //g2.drawRect(0, 0, c.getWidth(), c.getHeight());

        g2.setColor(c.getBackground());
        g2.fillRoundRect(borderThickness, borderThickness, c.getWidth()-(int)(borderThickness*2.5), c.getHeight()-(int)(borderThickness*2.5), edgeRoundness, edgeRoundness);
        g2.drawRoundRect(borderThickness, borderThickness, c.getWidth()-(int)(borderThickness*2.5), c.getHeight()-(int)(borderThickness*2.5), edgeRoundness, edgeRoundness);

        super.paint(g, c);
    }

    @Override
    protected void paintFocus(Graphics g, AbstractButton b, Rectangle viewRect, Rectangle textRect, Rectangle iconRect) {

    }
}

It always happens to use both methods together, and it gives you a really big benefit whe working on animations!

For some kinds of UI's as BasicTextFieldUI, understanding how painting works is preatty tricky, but still understandable.