▷ Código JAVA: Agregar imagen de fondo a un JFrame

Código JAVA anterior:
Cargar JCombobox con registros de una base de datos

-------------------------------------------------------------------------------------------

En el siguiente post vamos a  aprender como agregar o mostrar una imagen de fondo en una ventana JFrame, lo cual nos será de gran utilidad ya que es algo que en ocasiones se nos hace necesario agregar a nuestros proyectos, ya sea por petición del cliente o simplemente para embellecer nuestra interfaz gráfica(GUI), solo nos bastara con agregar unas pocas líneas de código y ya tendremos una imagen de fondo que mostrar.

Clase VentanaPrincipal.java(JFrame)

package ventanaconimagen;

import java.awt.BorderLayout;
import java.awt.Dimension;
import javax.swing.JFrame;

public class VentanaPrincipal extends JFrame{
    
    panelImage panel = new panelImage();
       
    public VentanaPrincipal(){
        
        this.setTitle("Ventana con Imagen");
        this.setSize(new Dimension(700, 700));        
        this.setLocationRelativeTo(null);
        
        this.add(panel, BorderLayout.CENTER);
    }

    public static void main(String [] args){

        VentanaPrincipal frame = new VentanaPrinciapl();

        frame.setVisible(true);

    }
    
    
}

Clase panelImage (JPanel):

package ventanaconimagen;

import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class panelImage extends JPanel{

    @Override
    public void paint(Graphics g){
        Dimension dimension = this.getSize();
        ImageIcon icon = new ImageIcon(getClass().getResource("/imagenes/image1.jpg"));
        g.drawImage(icon.getImage(), 0, 0, dimension.width, dimension.height, null);
        setOpaque(false);
        super.paintChildren(g);
    }
 
    
}

VÍDEO TUTORIAL (PASO A PASO)

Instrucciones y Recomendaciones 

1. Iniciemos con lo básico,  esto será explicar la estructura de nuestro proyecto, que en realidad es una estructura muy sencilla pero muy importante ya que el entender cómo se encuentra dividida esta, nos ayudara a comprender todo el desarrollo de la misma.

•  ventanaConImagen(Nombre del proyecto)
  •  SourcePackages
    • imagenes (Paquete donde almacenamos las imagenes)
      •  image1.jpg
    •  ventanaconimagen (paquete que contendrá todas las clases)
      •  VentanaPrincipal.java
      •  panelImage.java
  •  TestPackages
    •  <DefaultPackage>
  •  Libraries (Librerías requeridas)
    •  JDK 1.8 (Default)
  •  Test Libraries

Lo que acabamos de ver como bien dijimos es la estructura de nuestro proyecto, la cual posee dos paquetes que serán el núcleo de nuestro desarrollo, tenemos el paquete imagenes donde vamos almacenar la imagen que vamos agregar de fondo, y tenemos el paquete ventanaconimagen, en este irán las clases que vamos a crear, que serán: la clase del JFrame(VentanaPrincipal) y la clase del JPanel(panelImage), en un momento ampliaremos aún más como trabajaran estas dos clases.

2. Iniciamos con la clase principal, lo primero que debemos hacer es aplicar el concepto de herencia y así poder utilizar los componentes, objetos, métodos y procedimientos de la clase JFrame, la primera línea de código quedaría de la siguiente manera:

public class VentanaPrincipal extends JFrame{

Solamente necesitamos escribir la palabra clave extends, seguido del nombre de la clase que en este caso será JFrame, de suma importancia importar el paquete al cual pertenece la clase, para esto en la parte superior de nuestra clase debemos escribir lo siguiente:

import java.awt.BorderLayout;
import java.awt.Dimension;
import javax.swing.JFrame;

3. Una vez hecho lo básico debemos crear el método constructor de la clase y de esta manera agregar los atributos que llevara nuestra ventana JFrame, por ejemplo: el título, las dimensiones que tendrá la ventana JFrame, la ubicación que llevará la ventana y el layout con el que trabajaremos para distribuir los componentes, para este ejemplo trabajaremos con BorderLayout, un layout muy fácil de usar así que no tendremos muchos problemas con este. 

    public VentanaPrincipal(){
        
        this.setTitle("Ventana con Imagen");
        this.setSize(new Dimension(700, 700));        
        this.setLocationRelativeTo(null);
        
        this.add(panel, BorderLayout.CENTER);
    }

Tenemos el método constructor, la primera línea de código será para agregar un título a nuestra ventana JFrame.

La segunda línea de código será para agregar las dimensiones de nuestra ventana tanto en ancho como en alto, para esto hacemos uso de la clase Dimension y le pasamos dos parámetros que equivalen a las dimensiones de la ventana JFrame(700, 700).  

La tercera línea de código la utilizaremos para que la ventana JFrame a la hora de ejecutar nuestra aplicación aparezca en el centro de la pantalla, para esto hacemos uso del método setLocationRelativeTo, y le pasamos como parámetro null.  

La ultima línea de código la utilizaremos para agregar un componente a nuestra ventana JFrame, este componente será el JPanel que contiene la imagen de fondo, para esto hacemos uso del método add, al cual le pasamos dos parámetros: el primero sera nuestro JPanel(panel) y el segundo será el layout que vamos a utilizar para distribuir ese componente, este ejemplo lo vamos a trabajar con BorderLayout y agregamos dicho componente en el centro de nuestra ventana y de esta manera ocupará todas las dimensiones de la misma.

Fuera del método constructor debemos crear un objeto de la clase panelImage la cual hereda de la clase JPanel este será el componente que agregaremos a la ventana JFrame.

panelImage panel = new panelImage();

4. Siguiendo en la clase VentanaPrincipal.java lo que restaría por hacer seria agregar el método main, en el cual simplemente vamos a crear una instancia de la clase, seguido a esto llamamos al método setVisible y de esta manera nuestra ventana JFrame se visualizara.

public static void main(String [] args){
  VentanaPrincipal frame = new VentanaPrinciapl();
  frame.setVisible(true);
}

5. A partir de aquí vamos a estar trabajando con la clase panelImage.java, esta será la clase donde agregaremos las líneas de código que nos permitirá tener una imagen de fondo en nuestro JPanel.
Iniciamos con lo básico, aplicamos el concepto de herencia y para esto escribimos la palabra clave extends, seguido a esto escribimos el nombre de la clase que en este caso es JPanel, de esta manera nuestra clase panelImage.java hereda los métodos, procedimientos y propiedades que esta posee. 

public class panelImage extends JPanel{

6. Aquí tenemos el método donde se realizara toda la operación para agregar la imagen; vamos a estar explicando linea por linea, les resultara fácil comprender la idea. 

@Override
public void paint(Graphics g){
   Dimension dimension = this.getSize();
   ImageIcon icon = new ImageIcon(getClass().getResource("/imagenes/image1.jpg"));
   g.drawImage(icon.getImage(), 0, 0, dimension.width, dimension.height, null);
   setOpaque(false);
   super.paintChildren(g);
}

a. Iniciamos con la primera línea la cual es la estructura de un método tipo void o procedimiento al cual llamamos paint, este método llevara un parámetro que no es mas que un objeto perteneciente a la clase Graphics, el cual hemos llamado g.  

public void paint(Graphics g){

b. Lo siguiente que haremos será crear un objeto de tipo Dimension, el cual  le asignaremos las dimensiones que tiene nuestro JPanel haciendo uso del metodo getSize.

Dimension dimension = this.getSize();

c. Hemos llegado a un punto crucial, y este es la creación de nuestra imagen de fondo, para esto creamos un objeto de tipo ImageIcon al cual le vamos agregar nuestra imagen, para acceder a la imagen que vamos a agregar debemos especificar la ruta en que esta se encuentra, lo hacemos a través del metodo getResource y le pasamos como parámetro el nombre de nuestro paquete y seguido a esto el nombre de nuestra imagen, por esta razón es recomendable que a la hora de trabajar con imágenes en nuestros proyectos siempre estén dentro del mismo, ya que si tenemos una imagen en una ruta externa el proceso seria un poco mas complicado, yo siempre recomiendo crear un paquete para almacenar todas la imágenes que vayamos a agregar. 

ImageIcon icon = new ImageIcon(getClass().getResource("/imagenes/image1.jpg"));

d. Ahora vamos a dibujar esa imagen en nuestro JPanel para esto hacemos uso del objeto Graphics y llamamos al método drawImage este llevara los siguientes parámetros: 
*El primer parámetro sera nuestro objeto de tipo ImageIcon como bien sabemos este contiene la imagen que vamos a agregar.
*El segundo y tercer parámetro serán dos valores enteros que equivalen a la posición en el eje de las x y las y, en nuestro ejemplo ambos valores serán  cero(0).
*El cuarto y quinto parámetro serán las dimensiones que tendrá nuestra imagen, para este ejemplo las dimensiones sera iguales a las dimensiones de nuestro JPanel de esta manera garantizamos que la imagen tenga el mismo tamaño de nuestra ventana JFrame.
*El ultimo parámetro solamente pasamos un valor null 

g.drawImage(icon.getImage(), 0, 0, dimension.width, dimension.height, null); 

e. Para finalizar debemos hacer algo muy importante, cuando trabajos con imágenes de fondo necesitamos que los componentes que vayamos agregar se puedan visualizar o superponer a la imagen, por lo tanto debemos hacer uso del método setOpaque y pasar como parámetro false, de esta manera no tendríamos problemas a la hora de agregar componentes a nuestro JPanel. 

setOpaque(false);

7. Aquí tenemos una captura del proyecto ya terminado. 

Ventana JFrame con imagen de fondo

Hemos finalizado. 
Puedes seguir disfrutando de todas las entradas que tenemos  disponibles para ti, para que sigas fortaleciendo conocimientos y aprendiendo tips en todo lo relacionado al mundo de java, próximamente volveremos con mas contenido para seguir aprendiendo aun mas. 

Suscríbete a nuestro blog, vía Email o RSS; además puedes seguirnos a través de nuestras redes sociales como: Facebook, Twitter, y Google+.

¿Conoces una forma más óptima de realizar el anterior procedimiento?, no dudes en compartir tu conocimiento con todos nuestros amigos de la web.

Si te fue de gran ayuda esta información, no olvides compartirla con tus amigos y en las redes sociales.
Si tienes dudas o sugerencias al respecto, abajo puedes dejarnos tus comentarios.
Bendiciones...

Comparte este código