Step 2: Adding Buttons

In this step of tutorial 2 we will add two buttons to the application and use different PNG files to give them a dedicated look.

Adding Buttons

Add a button to the Screen by clicking the Button Widget in the Widgets tab. Move the new Widget by dragging it with the mouse. Position the button at x=40, y=60. Name the new Widget "buttonUp". Add another Button at position x=40, y=150. Name this Widget "ButtonDown".

The project now looks like this:

Adding two Buttons

You can use the small up/down button on the X and Y properties to fine-tune the position of the Widgets.

Changing the look

We will now change the look of the Buttons. A Button is made up of two images. One image is shown when the button is pressed, and another images is shown when the button is not pressed (released).

Go to the Images tab as in previous step and click the "plus" icon to import some images. This time import the images: "button_down_pressed.png", "button_down_released.png", "button_up_pressed.png", and "button_up_released.png".

Now select "buttonUp". For that button, start by selecting "No-Style" for the Style property. Select "button_up_released.png" for the Release Image property. Select "button_up_pressed.png" for Pressed Image.

You can immediately see the look of the button on the canvas in the TouchGFX Designer.

Setting bitmaps for a Button

For "buttonDown" select again "No-Style" for Style, "button_down_released.png" for Release Image, "button_down_pressed.png" for Pressed Image.

You have now finished setting up the Buttons. Click "Run Simulator" to try your application.

Try both buttons to verify that the Buttons are configured correct.

Running the simulator

In the next step, we will insert a large number. Move on to the next step when ready.