How to add background image to JTextField?

Question

I know how to add background image to JPanel (creating ImagePanel class that extends JPanel and overload it's paintComponent() method), BUT this trick with JTextField not working properly: Displays image, but not text. So, how to add background image to JTextField properly?

score 7 · Accepted Answer · answered Jan 15 '14 at 04:02

7

You need to add the text field to the label. Something like:

JTextField textField = new JTextField(10);
textField.setOpaque( false );
JLabel label = new JLabel( new ImageIcon(...) );
label.setLayout( new BorderLayout() );
label.add( textField );

answered Jan 15 '14 at 04:02

camickr

321,443
19
166
288

And one more question: can i do the same with JComboBox text field? – RussianVodka Jan 15 '14 at 04:10

score 1 · Answer 2 · answered Jan 15 '14 at 00:47

1

Found this online for you.

import java.awt.*;  
import javax.swing.*;  
class Testing extends JFrame  
{  
  public Testing()  
  {  
    setDefaultCloseOperation(EXIT_ON_CLOSE);  
    JPanel p = new JPanel(new BorderLayout());  
    JTextField tf = new JTextField(5);  
    JLabel label = new JLabel(new ImageIcon("Test.gif"));  
    label.setOpaque(true);  
    label.setBackground(tf.getBackground());  
    label.setPreferredSize(new Dimension(label.getPreferredSize().width,tf.getPreferredSize().height));  
    p.setBorder(tf.getBorder());  
    tf.setBorder(null);  
    p.add(label,BorderLayout.WEST);  
    p.add(tf,BorderLayout.CENTER);  
    JPanel p1 = new JPanel();  
    p1.add(p);  
    getContentPane().add(p1);  
    pack();  
    setLocationRelativeTo(null);  
  }  
  public static void main(String[] args){new Testing().setVisible(true);}  
}

answered Jan 15 '14 at 00:47

mjkaufer

4,047
5
27
55

now i have white background and text still not displays. Theres a [code](http://pastebin.com/U1PhKU91). Don't worry: panels added to JFrame. – RussianVodka Jan 15 '14 at 01:07
Now i changed some [code](http://pastebin.com/330meV64) and images are showing up, but still can't see text in JTextField and now can't even focus on it. – RussianVodka Jan 15 '14 at 01:14
@user3190596 Dude above code works fine for me. It shows up image as well as text also. Check your code again. Thanks!! – ravibagul91 Jan 15 '14 at 03:08
@ Jugadu Ahh... You did not understand me! I want a background image, but not the icon. I copied the code above and saw that my image is attached to the left side of the JTextField, but I want it to be background of JTextField. – RussianVodka Jan 15 '14 at 03:39

Izzy Kiefer · Answer 3 · 2022-02-10T11:52:38.493

Create a new Class and extend to JComponet Below is a newly created component that styles an textfield. of course with the background image attached. Save attached image as input_field.png and save it in your project root.

public class InputField extends JComponent
{

    JTextField textField = new JTextField();

    Color componentColor = Color.decode("#FF9933");
    Font componentFont = new Font(Font.MONOSPACED, Font.PLAIN, 14);


    InputField()
    {
        this.setOpaque(false);
        this.setBackground(Color.decode("#4D4D4D"));

        textField.setBounds(8, 2, 550, 27);
        textField.setCaretColor(Color.WHITE);
        textField.setOpaque(false);
        textField.setFont(componentFont);
        textField.setForeground(componentColor);
        textField.setBackground(Color.WHITE);
        textField.setBorder(BorderFactory.createEmptyBorder());

        this.add(textField);
    }

    @Override
    protected void paintComponent(Graphics g)
    {
               g.drawImage(Toolkit.getDefaultToolkit().getImage("input_field.png"), 0, -1, this);
    }
}

input_field.png [Save this]

HERES HOW IT LOOKS LIKE. THE BORDER IS A LIGHT COLOR SO IT MAY NOT BE VERY VISIBLE UNLESS PUT ON A DARK BACKGROUND.

How to add background image to JTextField?

3 Answers3

Linked