Fixing the jumping button

You may have noticed that, the button is jumping up and down on the screen. Let's fix it!

• Right click on your code and choose Add to backpack This will save the code.

⏰ Important: If you do not save your code at this stage, you are going to lose it in the next step.

• Delete the code! Accept all warning messages.

• Go back to the Designer tab, and delete the Image and the Button blocks. To delete, select the block from the component tree and press Del on the keyboard. We are now starting with an empty screen.

• From Layout drag and drop two Vertical Arrangement blocks on the screen.

• For the first vertical arrangement, set the width to fill the parent, the height to 80%, and the horizontal and vertical alignment to the center.

• For the second vertical arrangement, set the width to fill parent and the horizontal and vertical alignment to center.

• Drag and drop an Image block inside the first vertical arrangement, and style it to Scale Picture To Fit with the width and height set to Fill parent

• Drag and drop a Button component inside the second vertical alignment. Style it by changing the text to "Hide" and setting the width to Fill parent

• Click on the Blocks tab, click on the backpack icon and drag and drop your code.

• 🎉 Test your app! For more information on testing, check Test your app