Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Custom interface design

Posted on 2004-10-26
Medium Priority
Last Modified: 2010-03-31
I'm in the process of learning Java (my first forray into object oriented programming).  I took a program that served a need of mine but was very limited in function, decompiled it, modified it and added a lot of additional options and features.  Everything with the program is working great, but I want to change the look and feel of it.  Currently it looks like this:


I want it to look more like this mock-up I've created:


I'm sure there is not a quick and easy answer to this.  So all I'm really expecting is to be pointed in the right direction and maybe address a couple follow-up questions.
Question by:Heathicus
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1

Expert Comment

ID: 12418199
The simplest solution in your case would be to construct the desired interface with normal JButton's, then set Icon's for the button's, with setIcon(), setPressedIcon(), and setRolloverIcon().

Another option would be to draw all of your components using Java2D, and then write a MouseListener, and MouseMotionListener to handle mouse movement and clicks.

Expert Comment

ID: 12418207
it is possible to have that L&F

Assisted Solution

expertmb earned 100 total points
ID: 12418450
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 15

Accepted Solution

Javatm earned 400 total points
ID: 12418664

I see what you need :

1. Create a frame using JWindow instead of JFrame.
2. Add the background image to JWindow.
3. Customize your buttons by designing the image.
4. Use the codes bellow for customizing it :

  JButton button = new JButton(new ImageIcon("x1.gif"));
  button.setPressedIcon(new ImageIcon("x2.gif"));
  button.setRolloverIcon(new ImageIcon("x3.gif"));
  button.setDisabledIcon(new ImageIcon("x1.gif"));
  button.setMargin(new Insets(0,0,0,0));

5. Use a good layout to adjust to your needs, like border and grid.
6. A link that can give you help is :


Hope that helps . . .
LVL 15

Expert Comment

ID: 12418680
If incase that you dont know how to put a background or paint an image to a JWindow.
Here is an example on JFrame but can also be use for JWindow :


Author Comment

ID: 12426195
Thanks for the help.  I haven't figure out the JWindow yet, but I'm making progress using JFrame.

Focusing on just one jpanel for now (the Source panel in my mockup) I have my buttons added with different versions for their different states, and I've even suppressed the focus border and added tooltips.  Everything functions correctly.  But I have two more questions:

How do I limit the button area to just the edges of the .jpg file?  For instance, if I make a round button (or some other shape, such as the arrows in my mockup), how do I limit the button area to just that image instead of the rectangle around it?  Should I make the icon files as transparent .gifs instead of .jpgs?

How can I set specific size dimensions and window loactions on the jpanels (or even individual buttons) to get the exact layout I want?
LVL 15

Expert Comment

ID: 12427483
> How do I limit the button area to just the edges of the .jpg file?
Check-out my codes above it'll limit the edges depending on how it was made.

>Should I make the icon files as transparent .gifs instead of .jpgs?
Yes you can also do that.

> How can I set specific size dimensions and window loactions on the jpanels (or even individual buttons) to get the exact layout I want?
Exactly means you have to plan 1st. 2nd know what layout you would want to use. For Layout the hardest would be GridbagLayout. Its
the most specific layout but surely the hardest to implement. BorderLayout and GridLayout combination is what I use.

Here is a tutorial :

Hope that helps .  . .
LVL 15

Expert Comment

ID: 12477974
What happend ???

Author Comment

ID: 12479208
Sorry for the silence.  I read through the tutorial you linked to and found it very educational.  I began experimenting with various combinations (GridBagLayout for general layout, and others for the specific sections) but had to set the project aside a few days ago.  I hope to put my focus back on it within the next couple days.  But I will clean this question up soon.

Author Comment

ID: 12605722
I still haven't had much time to work on my program, but I want to clean this question up.  I keep trying to get back to work on it before it becomes pushed aside for good, but so far no luck.  I am taking vacation next week and I'm taking my laptop for the sole purpose of working on this.  I'm sure I'll have more questions when I get back.

I'm splitting the points and giving 100 to Javatm for all of his help (that last link was particularly helpful), and 25 to expertmb as the link he provided was very helpful as well.
LVL 15

Expert Comment

ID: 12637413
Thanks for accepting and hoping to help you more in the future.

Friend : Javatm

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

By the end of 1980s, object oriented programming using languages like C++, Simula69 and ObjectPascal gained momentum. It looked like programmers finally found the perfect language. C++ successfully combined the object oriented principles of Simula w…
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.
Suggested Courses

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question