Resolution independent GUI- Java Tutorial

Hello everyone, I am back with more exciting design tutorials that will really help you to develop a desktop application. In the previous tutorial I have provided java code for developing a simple login page GUI. In this tutorial I am going to explain that how we can achieve the resolution independency using Dimension class in java which is a prebuild library.  The reason of this tutorial is to make our application resolution independent i.e. we will execute our application on low resolution systems even if it is developed on high resolution systems  It will  So let's start.

Step 1: As usual you need the design ready with you using Adobe photoshop. This time you need not to define any specific size of size because we will make it resolution independent. I have used this picture as background, you can choose or create your own as you will be known to the software very much, I Hope SO.

Step 2: Next step is to start creating Jframe with some components as shown below:

1. JLabel
2. ImageIcon
3. Image

An additional class this time is the Dimension class which I have initialized in class as well:

"Dimension d=Toolkit.getDefaultToolkit().getScreenSize();"

This is the class that will make a difference in our previous codes where could not accessed resolution of our screen but here we will retrieve the resolution of the screen from the object we have created i.e. d. We can make it as follows:

Frame.setBounds(0,0,d.width,d.height);

Look's easy right!

Step 3:

Once we have got the components and resolution of the screen we can start our remaining short code by filling the Jlabel with the image with the help oh ImageIcon object. But it is not a scalable icon. If you directly use image as icon to Jlabel then you will get the background but not the independency on other computers. For that purpose we have used Image class as follows for grabbing the image:

backI = ImageIO.read(new File("F:/Pics/SUCCESS.jpg"));        

This line belongs to image acquisition form disk and below is the code snippet to scale the image to adjust the reolution mapping to image. This is an automatic scaling.

backI = backI.getScaledInstance(back.getWidth(), back.getHeight(),Image.SCALE_REPLICATE);

That's the code explanation that how we will make a resolution independent GUI in java. With the help of these you can develop any type of application for any resolution system. Here is the complete code:

import java.awt.*;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.*;


public class Resolution_independent {
   
    //declaration of components and frame
    public static JFrame frame;
    public static Container container;
    public static JLabel back;
    public static Image backI;
    public static ImageIcon backi;
    public static Dimension d=Toolkit.getDefaultToolkit().getScreenSize(); //for resolution independency

   
    public Resolution_independent() throws Exception{
        frame=new JFrame();
        container=frame.getContentPane();
        container.setLayout(null);
        back=new JLabel();
        //Set bounds of all controls
        frame.setBounds(0, 0, d.width, d.height);
        back.setBounds(0,0,frame.getWidth(),frame.getHeight());
       
        //background image
        backI = ImageIO.read(new File("F:/Pics/SUCCESS.jpg"));   
        backI = backI.getScaledInstance(back.getWidth(), back.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        back.setIcon(backi);//set icon as image
       
       
        //adding Jlabel to container
        container.add(back);
       
        frame.setUndecorated(true);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       
    }

    public static void main(String[] args) throws Exception {
        Resolution_independent re=new Resolution_independent();

    }

}

And here is the image I have used:

Happy Designing!