Extension activity 1: Improving button stability

While testing your app, you might have observed that the show/hide button exhibits a noticeable jump on the screen when clicked. Although it may seem minor, delivering a seamless user experience is crucial. Let's address this issue and enhance the app's usability.

Proceeding may result in code loss. To safeguard your code, navigate to the Blocks tab, right-click on your code, and select Add to Backpack. This action saves the code in the backpack for retrieval later.

Fixing the jumping button issue

1. Return to the Designer tab and remove the Image and Button from the screen, leaving it empty.

   You may encounter a warning message; click on Save the empty screen now to proceed.

   
2. Click on the Layout tab in the left panel (Panel 1) and drag two VerticalArrangement blocks onto the screen.

   Layouts serve as containers for arranging multiple components, facilitating the organisation of buttons, navigation panels, etc.

3. Adjust the properties of the first container: set Height to 80% and Width to fill parent.

4. Modify the properties of the other container: set Width to fill parent.

5. Drop an Image component into the first container. Click on VerticalArrangement1 in the components panel and align it to the center both horizontally and vertically.

6. Place a Button component into the other container. Click on VerticalArrangement2 in the components panel and align it to the center both horizontally and vertically.

7. Click on the Image component and select the uploaded image.

   Optionally, adjust the Height property of the image if needed.

8. Set the button's Width to fill parent and change the Text to Hide.

9. Navigate to the Blocks screen and click on the backpack icon. Drag and drop the saved code into the code area.

10. You are done! Test the app to ensure the button now operates smoothly without any jumping issues.