Kametrixom
Kametrixom

Reputation: 14973

JavaFX: How can I display Emoji?

I've been struggling with this problem a lot now and I can't seem to figure it out. I need some way of displaying Emoji's (as in WhatsApp) in a JavaFX Application.

I tried it with awt and Swing and I haven't had any success now (EDIT: swt works but probably just for Mac's) I tried it with extended Unicode and Codepoints but this didn't help. I hope it's even possible, because Windows usually doesn't let you display Emoji's (I myself use a Mac).

Today I stumbled over this post about Emoji's in JavaFX 8. There a guy says he has implemented a way of displaying Emoji's in JavaFX by extending the javafx.scene.text.TextFlow class. There is also a link to a little presentation and from the 57th slide upwards it explains these so called EmojiFlow objects a little. However I can't seem to find a download!

Thanks to everyone answering, I've been struggling so long with this one, maybe it even is impossible

Here is a little not working example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage stage) {
        VBox root = new VBox();

            // I used TextFlow here because the article suggested
            // extending this class, but I know it's not working
            // just like this
        TextFlow textFlow = new TextFlow(new Text("Should be alien smiley: "
                + (char) 0xF47D));

            // casting a hex number to a char is equal to using "\uF47D"
        root.getChildren().add(textFlow);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

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

Upvotes: 10

Views: 8470

Answers (3)

Atharva Gulve
Atharva Gulve

Reputation: 34

Follow these steps to add Emoji as a text:

  1. head to https://apps.timwhitlock.info/emoji/tables/unicode Search for any emoji you want and check its byte code (eg. \xF0\x9F\x98\x81)

  2. create a byte array and add byte code to it eg. I am using this emoji: 😁 and Its byte code is \xF0\x9F\x98\x81 so,


byte[] emojiByteCode = new byte[]{(byte)0xF0, (byte)0x9F, (byte)0x98, (byte)0x81};

  1. create a new string,

String emoji = new String(emojiByteCode, Charset.forName("UTF-8"));

  1. You can use this string as a label, button, etc. to display the emoji.

Upvotes: -2

user14023280
user14023280

Reputation: 99

There is a project on github pavlobu/emoji-text-flow-javafx it is a library for JavaFX the main purpose of which is to allow users to use extended TextFlow to display emojis. It helps to display consistent emoji images on different platforms where JavaFX application runs.

I had developed it to solve the problem of consistent cross-platform emoji displaying in JavaFX based UI applications. It also helps you to use different emoji images packs, you just need to download .jar with emoji pack that you want to use. Here is a link

Currently it is packed with one of these emoji style packs:

  1. openmoji
  2. twemoji
  3. emojitwo

You can even compile this library with your own emoji pack. The instructions how to do so are in README.md

Upvotes: 3

Marcel
Marcel

Reputation: 1768

There are two ways to do that:

  1. take an font that displays emiticons (less recomand)
  2. Use a Textflow and parse the Text like in the example below:

(I only did it so far for hyperlinks)

https://bitbucket.org/kogs/javafx-xmpp-client/src/660b12b5c514034ce78e1f653ea265cd74a645c6/src/main/java/de/kogs/xmpp/client/controller/MessageParser.java?at=master

and

https://bitbucket.org/kogs/javafx-xmpp-client/src/660b12b5c514034ce78e1f653ea265cd74a645c6/src/main/java/de/kogs/xmpp/client/TextParsing/?at=master

Simpler said:

Lookup the text for emoticons (":)",":P"...) and if you found one add a Imageview to the textflow and if not add a TextNode to the TextFlow

-->

"This text is passed :P to the parser"

  • This -> TextNode
  • text -> TextNode
  • ...
  • :P -> ImageView with the :P Image in it
  • to -> TextNode

Upvotes: -2

Related Questions