About TextField with a small icon

Question

I want to code a TextField component with icon. So the behavior is as follow:

If the TextField contains an empty string, I use "lens.png".
Otherwise, i use "cross.png".

using the JavaFX Scene Builder, I added a TextFiled and an ImageView in the stack pane. My code is the following:

    @FXML
    private TextField textSearch;
    @FXML
    private ImageView imageView;
    final Image lensIcon = new Image("/issue/images/lens.png");
    final Image crossIcon = new Image("/issue/images/cross.png");

    //initialize () method 
     textSearch.textProperty().addListener(obs -> {
            final String text = textSearch.getText();
            Image icon = (text==null || text.isEmpty()) ? lensIcon : crossIcon;
            imageView.setImage(icon);
            imageView.setMouseTransparent(icon == lensIcon);
        }
        );
        imageView.setOnMouseClicked(evt -> textSearch.setText(null));

my issue is the following: How to prevent writing caracters below the icon (ImageView). the following figure illustrate my issue.

enter image description here

Have tried using `fx-padding` styling on the `TextField`? Something like `fx-padding: 0 20 0 0;` might give you what you want. I don't know how well that would hold up under resizing though. A more correct approach might be a custom skin or, as @UlukBiy suggests, moving the image outside the `TextField`. — OttPrime, Apr 02 '15 at 13:01
As an alternate you can take a look at [ControlsFX](http://controlsfx.bitbucket.org) project and its CustomTextField. It seems to already have all you need... — Inge, Apr 02 '15 at 14:51
As an aside, you probably want `textSearch.textProperty().isEmpty()` in place of `text==null`; that will test for either an empty string or `null`. I'm not sure `TextField.textProperty().get()` ever returns `null` unless you explicitly set it as such. — James_D, Apr 02 '15 at 19:24

score 0 · Answer 1 · answered Jul 09 '17 at 19:31

ControlsFX is an JavaFX API that supplies a ton of advanced controls UI that didn't come with JavaFX out of the box.

ControlsFX - http://fxexperience.com/controlsfx/

FontAwesomeFX supplies hundreds of icons (such as a cross in your case above)

FontAwesomeFX - https://bitbucket.org/Jerady/fontawesomefx/downloads/

Here is a demo solution to your problem after importing both these fantastic APIs

public class TextFields_Demo extends Application {

    private Parent createContent() {
        Pane root = new Pane();
        CustomTextField customTextField = new CustomTextField();
        FontAwesomeIconView icon = new FontAwesomeIconView(FontAwesomeIcon.CLOSE);
        customTextField.setRight(icon);
        root.getChildren().add(customTextField);
        return root;
    }

    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(createContent());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

About TextField with a small icon

1 Answers1