In this step of tutorial 2 we will add a large TextArea Widget to the application.

Adding Text

All text is shown using a TextArea Widget, but before we add a TextArea to the application, we will add another Image to give the text a better background.

Text Background

Import another image file, "counter_box.png". Insert a new Image Widget, name it "textBackground", and position it at x=250, y=59. Set the property Style to "No-Style", and Image to "counter_box".

Added background for text

Adding the text

We are now ready to add a TextArea Widget. Click the Text Area icon in the Widgets tab. Rename the Widget to "textCounter" and move the Widget to position x=250, y=90.
We want the Widget to show a big number, so un-check the "auto-size" property, and set the size to a fixed width=152, and height=90.

Added a TextArea

The default color of a TextArea Widget is black, which is rather dark on our background. Select the Color property of "textCounter", and change the color to white:

Changing text color

Changing the Text Typography

We want the text to be bigger. The way to do that is to change the typography used for the text. A typography defines the font, e.g. Verdana, the size, and the alignment, left, right, or center, for a text.

Select the Texts tab in the top of the TouchGFX Designer, click Typographies, and update the size of the Default typography to 80:

Changing typography size

Going back to the Screen (by clicking the "Canvas" tab in the top), we see that the text is much bigger now. In fact we cannot read the complete text "New Text". Click the centered icon under the "Alignment" property to get the text centered.

Setting alignment to centered

Using a wildcard text

We want the TextArea to show a number that we can change with the buttons. To do that, we must change the text to include a "wildcard". A wildcard is a marker, "<d>" in the text that can be substituted with something else at runtime. We just want to show a number, so we will change the text to just "<d>". In other projects you can combine the dynamic parts with a fixed text, e.g. "Temperature: <temp> °C".

Configure the wildcard text

Click "Run Simulator" to try your application.

Running the simulator

In this step we learned how to insert TextArea Widgets in your user interface and how to change the size of the typography. Read more about using texts in TouchGFX here in the article Using texts and fonts.

In the next step, we will use the buttons to change the number. Move on to the next step when ready.