Making a simple UI for the audio player

First thing first, let's make a nice and simple user interface for our audio player in java. For making the UI we'll use java Swing libraries. Swing is a single threaded model for building graphical interfaces in java, it became standard with java 5 (I think), you don't need to download external libs if you are using a recent version of java.
Let's say this is our basic idea, we'll start by defining the MainView.
Let's create a MainView class that extends JFrame, we'll define a main method that instantiate the main view of our program by calling SwingUtilities.invokeLater, this ensure that the component is created inside swing single threaded envoirment.

Important: Every action that modifies the state of the UI must be performed into the swing thread, however same thread is responsable for rendering, we'll see later in the tutorial how to let other thread execute medium-large computation that shouldn't be performed by java swing thread.

public class MainView extends JFrame{
 /**
  * Class/Frame constructor
  */
 public MainView()
 {
  init(); //see later implementation
  //initMenu();
  //uiBehaviour(); We'll define it later
 }

 //MAIN
 public static void main(String[] args){
  SwingUtilities.invokeLater(new Runnable(){
   @Override
   public void run()
   {
    MainView mv = new MainView();
    mv.setVisible(true);
   }
  });
 }
 
 private void log(String line)
 {
  System.out.println("UI-Main] " + line);
 }
}

Now let's define our components, let's not think about the seekbar now and discuss it later.

public class MainView extends JFrame{
 //Other
 DefaultListModel songList = new DefaultListModel();
 //Components
 JPanel container = new JPanel();
 JButton btnPlay = new JButton();
 JButton btnAdd = new JButton();
 JButton btnNext = new JButton();
 JButton btnPrev = new JButton();
 JButton btnShSt = new JButton();
 JButton btnShWf = new JButton();
 JButton btnShDi = new JButton();
 JButton btnDel = new JButton();
 JButton btnDelAll = new JButton();
 JMenuBar topMenu = new JMenuBar();
 JList jSongList = new JList(songList);
 JLabel lblplaying = new JLabel();
 JLabel lblst = new JLabel();
 JLabel lblet = new JLabel();
 JFileChooser fc = new JFileChooser();
...
}

Every component has a common and unique behaviour, if it's your first time with java swing, check component page docs.
Now let's see how to build the UI, for this I've created a single use isolated method, components listeners will be added in another one.

/**
  * Init Swing graphics UI 
  */
 private void init()
 {
  //MainView
  setTitle("Music Player - Java - 1.0");
  int _H = 300;
  int _W = 330;
  setSize(_W,_H);
  setLocationRelativeTo(null);
  setDefaultCloseOperation(EXIT_ON_CLOSE);
  //setResizable(false);
  //Container
  container.setLayout(null);
  getContentPane().add(container);
  //Buttons
  int btn_h = 35;
  int line1 = 80;
  JPanel contBtns = new JPanel();
  contBtns.setBounds(0, line1, 180, btn_h);
  btnPrev.setText("<<");
  btnPrev.setBounds(0, 0, 50, btn_h);
  btnPlay.setText(">");
  btnPlay.setMnemonic(KeyEvent.VK_SPACE);
  btnPlay.setBounds(0, 0, 50, btn_h);
  btnNext.setText(">>");
  btnNext.setBounds(0, 0, 50, btn_h);
  btnAdd.setText("Add Song");
  btnAdd.setBounds(_W-80,line1,70,btn_h);
  contBtns.add(btnPrev);
  contBtns.add(btnPlay);
  contBtns.add(btnNext);
  container.add(contBtns);
  container.add(btnAdd);
  //Now Playing Panel
  JPanel panelNP = new JPanel();
  panelNP.setLayout(new BoxLayout(panelNP, BoxLayout.PAGE_AXIS));
  panelNP.setToolTipText("Now Playing");
  panelNP.setBorder(BorderFactory.createMatteBorder(1, 0, 2, 0, Color.gray));
  panelNP.setBounds(5, line1-25, _W-15, 20);
  //JLabel lblnp = new JLabel("Now Playing:");
  lblplaying.setText("Now Playing: ");
  lblplaying.setBounds(5, 0, 100, 40);
  //panelNP.add(lblnp);
  panelNP.add(lblplaying);
  container.add(panelNP);
  //SongList
  int h_list = 100;
  //jSongList.setBounds(0, line1+50, _W, h_list);
  JScrollPane listScroller = new JScrollPane(jSongList);
  listScroller.setPreferredSize(new Dimension(_W-10,h_list));
  listScroller.setBounds(0, line1+50, _W-10, h_list);
  container.add(listScroller);
  //container.add(jSongList);
  //2Row Buttons
  int line2 = line1+h_list+50;
  JPanel contBtns2 = new JPanel();
  //contBtns2.setLayout(new BoxLayout(contBtns2, BoxLayout.PAGE_AXIS));
  contBtns2.setBounds(0, line2, 220, 50);
  //contBtns2.setBackground(Color.lightGray);
  btnShSt.setText("STAT");
  btnShWf.setText("ShWf");
  btnShDi.setText("ShDi");
  contBtns2.add(btnShSt);
  contBtns2.add(btnShWf);
  contBtns2.add(btnShDi);
  container.add(contBtns2);
  //DelBtns
  btnDel.setBounds(_W-55, line2+5, 45, 30);
  btnDel.setText("X");
  container.add(btnDel);
  //Labels song time
  JPanel contSlbl = new JPanel();
  contSlbl.setBounds(10, 15, _W-20, 20);
  contSlbl.add(lblst);
  contSlbl.add(lblet);
  lblst.setText("00:00");
  lblst.setBorder(new EmptyBorder(0, 0, 0, 200));
  lblet.setText("00:00");
  container.add(contSlbl);
 }

The code should be easy to read, I've used a JPanel as a general container, then by using other panels and setbounds I've created the UI. Pay a closer look about the JList and JScrollPane components though. Also, take a read here if you want to know more about layouts, by default a new Jpanel creates a BoxLayout (that's how I've made the row of buttons).

Next time we'll see how to add some functionality to our UI.