Open Source & Free  

Tutorial: Building A Cross Platform Mobile Chat App for Android, iOS (iPhone) With Codename One Part I

Tutorial: Building A Cross Platform Mobile Chat App for Android, iOS (iPhone) With Codename One Part I

Header Image

In this tutorial we will cover the basics of building a good looking chat application with Codename One that
will work on all mobile OS’s. We will cover everything from design to social network login and the actual
chat behavior. This tutorial is for a hand coded application mostly because GUI builder tutorials require video
and are thus less searchable.

This project is created with the new Java 8 support to make the code simple and short.

Creating The New Project

We create a new Codename One project and select the new flat blue theme.

New Project

Theme

Once finish is clicked we have a new project in place, so we need some files to get started. First place the file
fontello.ttf in the src directory. This font file contains image font icons which we will
use to provide icons in the UI.

Next you will need to save this image to your hard drive for use in the first form.

Login UI

Now that we have all the rest in order its time to launch the designer by double clicking the theme file. In the designer
we need to click the Images→Quick Add Multi Images option, then select the image you downloaded to the disk.

When prompted leave the default of Very High, this will effectively create a multi image which stores the image
in multiple different resolutions and deliver the properly sized image based on the device density at hand.

Now we can just create the main form which is the entry point to the app, this will end up looking as such:

Final Result

To achieve this we select the main theme and click the add button to add a new entry. We then type in MainForm
in the top area and design the form:

  • In the first tab we uncheck ‘derive’ and select the type as IMAGE_SCALED_FILL. This effectively means we will
    use an image as the background and scale it across the screen. We also make sure to select the multi image that
    we just added.

  • In the Derive tab we uncheck derive (slightly confusing), then select Form in the combo box. This means that the
    MainForm style inherits the basic settings from the Form style.

Add another UIID called Padding so we can space the buttons away from the sides/bottoms of the form:

  • In the color tab uncheck the Derive Transparency and set the value to 0. This will make the container invisible.

  • In the padding section uncheck derive and enter 2 millimeters for all entries except for the bottom where we need 8 millimeters for extra spacing.
    This will space out the various pieces, its important to use millimeters otherwise the result will be too different on various devices based
    on their density.

MainForm UIID Styling

Initial Code

In the code we open the main SocialChat class and replace the start method with this:

public void start() {
    if(current != null){
        current.show();
        return;
    }
    showLoginForm();
}

private void showLoginForm() {
    Form loginForm = new Form();

    // the blue theme styles the title area normally this is good but in this case we don't want the blue bar at the top
    loginForm.getTitleArea().setUIID("Container");
    loginForm.setLayout(new BorderLayout());
    loginForm.setUIID("MainForm");
    Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    cnt.setUIID("Padding");
    Button loginWithGoogle = new Button("Signin with Google");
    Button loginWithFacebook = new Button("Signin with Facebook");
    cnt.addComponent(loginWithGoogle);
    cnt.addComponent(loginWithFacebook);
    loginWithGoogle.addActionListener((e) -> {
        doLogin(GoogleConnect.getInstance());
    });
    loginWithFacebook.addActionListener((e) -> {
        doLogin(FacebookConnect.getInstance());
    });
    loginForm.addComponent(BorderLayout.SOUTH, cnt);
    loginForm.show();
}

void doLogin(Login lg) {
    // TODO...
}

You will end up with something that looks like this:

Basic styling

To get the buttons to the right color we and add the icons we will need to go back to the designer…​.

Customizing The Buttons

Lets start with the icons, since we use an icon font this is pretty easy…​ Just add a new style UIID to the theme called
IconFont.

  • In the color section click Derive Foreground and type in ffffff to set the foreground to white, then click
    Derive Transparency and set it to zero.

  • In the Font tab uncheck the Derive flag and select the fontello.ttf font (make sure you downloaded it and placed it
    in the src directory as instructed earlier). Select the True Type Size as Large.

Icon Font

To get the buttons to work nicely we need to create an image border add 2 new UIID’s named LoginButtonGoogle &
LoginButtonFacebook. Both should be identical with the exception of the color for the background…​

  • In the color tab set the foreground to ffffff and transparency to 0 (naturally uncheck derive in both cases).

  • In the Alignment tab uncheck derive and define the alignment as Center.

  • In the padding and margin tabs define all top/bottom/left/right paddings/margins to be 1 millimeter.

  • In the font tab define the system font to be large.

  • In the border section click the Image Border Wizard button. For the Facebook button enter 3B5999 to all the color fields
    for the Google button enter DD4B39 to all the color fields. Increase the arc width/height to 15 and then move to the
    Cut Image section. Enter 14 for the top/bottom/left & right values and press OK. This will effectively cut 9 multi images
    out of the given image and make a border out of them!

Image Border Start

Image Border Cutting

Integrating These Changes

Now we can easily integrate the above changes in the code by just changing these lines:

Button loginWithGoogle = new Button("Signin with Google");
loginWithGoogle.setUIID("LoginButtonGoogle");
Button loginWithFacebook = new Button("Signin with Facebook");
loginWithFacebook.setUIID("LoginButtonFacebook");
Style iconFontStyle = UIManager.getInstance().getComponentStyle("IconFont");
loginWithFacebook.setIcon(FontImage.create(" ue96c ", iconFontStyle));
loginWithGoogle.setIcon(FontImage.create(" ue976 ", iconFontStyle));

These effectively assign the new UIID and create two icons with the given font defined within the icon font style!

This is a multi-part series of posts including the following parts:

You can check out the final source code of this tutorial here.

11 Comments

  • Nigel Chomba says:

    Lets move on Shai…..whats next?

  • Shai Almog says:

    We will post it when its ready.

  • Nigel Chomba says:

    Great sir

  • Michael du Plessis says:

    I notice in the documentation that you recommend not using .getTitleArea().setUIID(“Container”); anymore because it allowed hacks.
    How can we remove the TitleArea now?

  • Shai Almog says:

    getTitleArea() is deprecated because it was used as getTitleArea().removeAll(); getTitleArea().addComponent(myCmp);

    That was a hack we allowed in some cases but now that we have the toolbar it’s redundant & messy. Even when we allowed the hack it was discouraged because it relies too much on implementation details. However, setting the UIID doesn’t rely as much on the implementation details.

    You can avoid this though by adding a UIID TitleArea and overriding the styling to make it transparent, without a border, padding or margin.

  • Michael du Plessis says:

    Ah I understand! Thank you for the explanation. I will also play around with the customisation of TitleArea within the Theme Editor.

  • Francesco Galgani says:

    About “FontImage.create(” ue96c “, iconFontStyle)”, what is the meaning of ” ue96c “? How is chosen or generated this string? Thank you.

  • Shai Almog says:

    This tutorial was written before we had material design icons integrated into Codename One so I used the fontello fonts which include various icons. When you download a font from fontello you get an HTML with all the codes in the font. I explained this here: [https://www.codenameone.com…](https://www.codenameone.com/blog/using-icon-fonts-such-as-fontello.html)

  • Francesco Galgani says:

    I’ve just seen that interesting tutorial, useful if I need custom icons not included in the material icons set. Thank you

  • Do I need to be a JAVA expert to go through this course …??

  • Shai Almog says:

    No. But you should know Java language syntax.