Creating the Perfect Media Player in Java - Part 1

DZone 's Guide to

Creating the Perfect Media Player in Java - Part 1

· Java Zone ·
Free Resource

Not a title that is easy to live up to… Well, at least I am going to try. If you are interested I invite you to tag along for the ride. It is going to be some technical stuff, in Java mostly, and some design related stuff. Lets get right to it why don’t we?

What I’m creating is a Medial Player that will actually help you when listening to music, looking at pictures or watching movies. The goal is that anyone should be able to use it, even your mother, and her mother. And it should look darn good too. In all it should look better than iTunes, be more versatile than WinAmp and at least play all files that your OS plays (but probably more). As I said, not an easy task..

Design. Very Light. I like light designs. Vista black is nice too, but it’s to high in contrast for my taste. Light it is. I do have something of a blueprint in my head and I have just finished some preliminary GUI design using Adobe Fireworks.

Here is a screenshot of a first take and the main view shown when the player is in “full mode”.

Main Window

Main Window (Click to Enlarge)

I am not a big fan of menus. They are a scrap heap where you put stuff you didn’t think of putting in the GUI. Therefore one of the main goals, of which there will be many, trust me, is to create a UI where you can reach all functionality directly. WYSIWYG UI…

Next, I will add something sliding in from the side…

The perfect media player main window v2

The perfect media player main window v2

OK, I have redone some of the graphics. Not too much but still things that will matter. The top gray background is now striped. I think it looks more fresh. I am still not 100% confident on the new look of the track’s play progress bar. Blue made it more prevalent which is good though.

Unfortunately Adobe Fireworks does not do subpixel anti-aliasing on the text. This makes it look more blurred that it will in the finished application. Nothing to do, but it hurts my eyes.. ;)

As you can see I have added side bars. This is how extra information that you might or might not want to have visible at all times will look. The example bar is the playlist editor/player. I have opted for a Outlook stackbar look. I think it will work better than the tree structure in iTunes. iTunes mixes playlists, sources and the library in the same sidebar. I think that is a suboptimal setup as it will make it quite cluttered and too multipurpose to be really user friendly. For instance I never know where to drag stuff in iTunes…

The lower tabs (in blue) will pull out another type of sidebar, or rather bottom bar.. It will look like frosted glass and be more informational in nature. One could argue that I should go with white here as well, but that makes the whole GUI a bit too blended IMO.

The reason that the playlist tracks list looks the way it does is that I wanted to move away from very long names. The user must be shown both the track and the artist’s name, but quite commonly you will play several tracks from one artist which makes the artist name redundant for each track. Having the artist above in bold makes the tracklist look more clean and artisty and less computer-use-every-pixely, if you know what I mean.

I don’t really know how the “get it” buttons should look like and I have tested several looks, none of which makes me warm and fuzzy. You will see them change again I for sure.

I have also added arrows to the very custom scrollbar. Note that they should fade in when the mouse is over the scrollbar and then fade out again some five seconds after the pointer leaves it. Arrows will never be really “clean”, but they do serve a usability purpose in large lists.

The player should minimize nicely of course. You do not want that big window open all the time. Currently I am using a model where it will minimize in three steps. Mini, micro and nano. More on that later.

From http://miginfocom.com/blog/


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}