▷ Código JAVA: Colocar icono en un JButton y un JLabel

Código JAVA anterior: 
Centrar una ventana (JFrame) en la pantalla.

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

Este artículo está orientado a la aplicación e implementación de un fragmento de código JAVA, que nos permitirá asignar una imagen (icono) a los elementos (JButton y JLabel) que hacen parte de los formularios de nuestra aplicación JAVA:

Clase del JFrame (Formulario):

public class Formulario extends javax.swing.JFrame{
  
    ImageIcon iconobtn = new ImageIcon("src/Imagenes/guardar.png");
    ImageIcon iconolbl = new ImageIcon("src/Imagenes/user.png");
    
    public Formulario() {
                 
        initComponents(); 

btnGuardar.setIcon(iconobtn);
        btnGuardar.setIconTextGap(2);
        btnGuardar.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        btnGuardar.setVerticalAlignment(javax.swing.SwingConstants.CENTER);
        btnGuardar.setHorizontalTextPosition(javax.swing.SwingConstants.RIGHT);
        btnGuardar.setVerticalTextPosition(javax.swing.SwingConstants.CENTER);
        
        lblUsuario.setIcon(iconolbl);
        lblUsuario.setIconTextGap(1);
        lblUsuario.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        lblUsuario.setVerticalAlignment(javax.swing.SwingConstants.CENTER);
        lblUsuario.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
        lblUsuario.setVerticalTextPosition(javax.swing.SwingConstants.BOTTOM);


    }

} 

VIDEO TUTORIAL (PASO A PASO)

Instrucciones y Recomendaciones 

1-Antes de implementar el código que presentamos en este post, deberás copiar y pegar la siguiente librería, la cual es sumamente necesaria para que el código funcione sin inconvenientes.
Recuerda pegarla después de la línea de código que representa el nombre del paquete (ej. package Formularios;) y sobre la línea de código que identifica el nombre de tu Clase (ej. public class Formulario{...):

import javax.swing.ImageIcon;

2-Copia y pega las líneas de código resaltadas en azul, inmediatamente después de la llave de apertura "{" de la Clase del JFrame, en el cual se encuentran los componentes con los que trabajaremos (JButton y JLabel). 

3-Lo que se hace en este par de líneas, es preparar los iconos que hemos de asignarle a cada elemento; para ello, se procede a crear e instanciar dos objetos del tipo "ImageIcon", a los cuales les damos un nombre para identificar cual aplicaremos al JButton (iconobtn), y cual al JLabel (iconolbl); seguidamente, les pasamos a cada uno de ellos, un parámetro que consiste en la ruta de la imagen (icono) que hemos de aplicar.
Teniendo en cuenta lo anteriormente explicado, nuestras líneas de código quedarán de la siguiente forma:

ImageIcon iconobtn = new ImageIcon("src/Imagenes/guardar.png");
ImageIcon iconolbl = new ImageIcon("src/Imagenes/user.png");

¡NOTA IMPORTANTE!: 
Se recomienda que en todos tus proyectos, te acostumbres y/o tomes el hábito de crear un paquete donde guardes todas las imágenes que utilizarás en tus formularios, reportes, y demás. 

4-Copia y pega el fragmento de código resaltado en color lila, dentro del método Constructor del JFrame en el que estás trabajando. 

Se recomienda que todo código que se coloque dentro del método constructor de un JFrame, se haga después de la línea de código "initComponents();". 

5-Como podremos observar, la forma de asignar un icono tanto en el JButton, como en el JLabel, es la misma; para ello, sólo basta con llamar a cada componente; es decir, "btnGuardar" (es el nombre de un JButton del formulario) y "lblUsuario" (es el nombre de un JLabel del formulario); posteriormente, se les aplicará a cada uno de ellos, el método ".setIcon()", al cual se le pasará como parámetro, el objeto "ImageIcon" que corresponda (iconobtn para el JButton, e iconolbl para el JLabel). 

Implementando lo que hemos dicho en el párrafo anterior de este punto (5), ya sería suficiente para que nuestros elementos tengan su icono respectivo; sin embargo, en nuestras aplicaciones no debemos jamás de descuidar el diseño y la presentación, por lo cual se hace necesario y aconsejable usar unas cuantas líneas de código más, que nos permitirán organizar el texto e icono que se muestran en cada componente: 

La primera línea, consiste en llamar al componente (btnGuardar - lblUsuario) e invocar el método ".setIconTextGap()", al cual le pasaremos un parámetro de tipo "int", esto nos permitirá establecer una distancia (en píxeles) entre el texto y el icono del componente:

btnGuardar.setIconTextGap(2);

lblUsuario.setIconTextGap(1);

La segunda línea, nos permitirá alinear el contenido del componente con respecto al "eje X" (horizontal); para ello, le aplicamos a nuestro elemento, el método ".setHorizontalAlignment();", y le pasaremos como parámetro, una  de las constantes definidas en la librería de JAVA "SwingConstants", la cual determinará la posición deseada, por ejemplo:
"javax.swing.SwingConstants.CENTER"
Tenemos la posibilidad de usar otras constantes como: LEFT (izquierda), RIGHT (derecha), LEADING (al inicio), o TRAILING (al final):

btnGuardar.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);

lblUsuario.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);

La tercera línea, funciona igual que la segunda línea, sólo que en este caso nos permitirá alinear el contenido del componente con respecto al "eje Y" (vertical); para ello, le aplicamos a nuestro elemento, el método ".setVerticalAlignment();", y le pasaremos como parámetro, una constante de las definidas en la librería de JAVA "SwingConstants", la cual determinará la posición deseada, por ejemplo:
"javax.swing.SwingConstants.CENTER"
Tenemos la posibilidad de usar otras constantes como: TOP (superior), o BOTTOM (inferior):

btnGuardar.setVerticalAlignment(javax.swing.SwingConstants.CENTER);

lblUsuario.setVerticalAlignment(javax.swing.SwingConstants.CENTER);

La cuarta línea, nos alineará el texto contenido en el componente con respecto al icono (de forma horizontal); para ello, le aplicamos a nuestro elemento, el método ".setHorizontalTextPosition();", y le pasaremos como parámetro, una constante de las definidas en la librería de JAVA "SwingConstants", la cual determinará la posición deseada, por ejemplo:
"javax.swing.SwingConstants.RIGHT"
Tenemos la posibilidad de usar otras constantes como: LEFT (izquierda), CENTER (centro), LEADING (al inicio), o TRAILING (al final):

btnGuardar.setHorizontalTextPosition(javax.swing.SwingConstants.RIGHT);

lblUsuario.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);

La quinta línea, nos dará la posibilidad de alinear el texto contenido en el componente con respecto al icono (de forma vertical); para ello, le aplicamos a nuestro elemento, el método ".setVerticalTextPosition();", y le pasaremos como parámetro, una constante de las definidas en la librería "SwingConstants", la cual determinará la posición deseada, por ejemplo:
"javax.swing.SwingConstants.BOTTOM"
Tenemos la posibilidad de usar otras constantes como: TOP (superior), o CENTER (centro):

btnGuardar.setVerticalTextPosition(javax.swing.SwingConstants.CENTER);

lblUsuario.setVerticalTextPosition(javax.swing.SwingConstants.BOTTOM);

Aplicando todo lo anteriormente dicho, el fragmento de código quedaría así: 

btnGuardar.setIcon(iconobtn);
btnGuardar.setIconTextGap(2);
btnGuardar.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
btnGuardar.setVerticalAlignment(javax.swing.SwingConstants.CENTER);
btnGuardar.setHorizontalTextPosition(javax.swing.SwingConstants.RIGHT);
btnGuardar.setVerticalTextPosition(javax.swing.SwingConstants.CENTER);
        
lblUsuario.setIcon(iconolbl);
lblUsuario.setIconTextGap(1);
lblUsuario.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
lblUsuario.setVerticalAlignment(javax.swing.SwingConstants.CENTER);
lblUsuario.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
lblUsuario.setVerticalTextPosition(javax.swing.SwingConstants.BOTTOM);

6-Ahora sólo basta con ejecutar tu proyecto y hacer las respectivas pruebas:

¿Quieres aprender más de JAVA?

Si deseas ver cómo llevar a cabo la implementación de este y otros códigos más, usando un IDE como NetBeans, no olvides de revisar los tips de JAVA y seguir el Curso: Cómo lo hago en JAVA?

Accede a todos los fragmentos de código que hemos publicado en este lenguaje hasta el momento, dando clic en el siguiente enlace:

Ver listado de códigos JAVA

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; puedes dejarnos tus comentarios.
Bendiciones...

Comparte este código