> For the complete documentation index, see [llms.txt](https://caseytechschool.gitbook.io/app-development-using-mit-app-inventor-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://caseytechschool.gitbook.io/app-development-using-mit-app-inventor-platform/tutorial-1-image-hide-and-seek/extension-activity-1-improving-button-stability.md).

# 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.

{% hint style="danger" %}
**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.**
{% endhint %}

#### Fixing the jumping button issue

1. Return to the <mark style="color:green;">**`Designer`**</mark> tab and remove the <mark style="color:green;">**`Image`**</mark> and <mark style="color:green;">**`Button`**</mark> from the screen, leaving it empty.

   > You may encounter a warning message; click on <mark style="color:green;">**`Save the empty screen now`**</mark> to proceed.

   >

   <figure><img src="/files/Xz9a17XsqoPBoJ8uPImX" alt="" width="375"><figcaption></figcaption></figure>
2. Click on the <mark style="color:green;">**`Layout`**</mark> tab in the left panel (Panel 1) and drag two <mark style="color:green;">**`VerticalArrangement`**</mark> 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 <mark style="color:green;">**`Height`**</mark> to 80% and <mark style="color:green;">**`Width`**</mark> to *fill parent*.
4. Modify the properties of the other container: set <mark style="color:green;">**`Width`**</mark> to <mark style="color:green;">**`fill parent`**</mark>.
5. Drop an <mark style="color:green;">**`Image`**</mark> component into the first container. Click on <mark style="color:green;">**`VerticalArrangement1`**</mark> in the components panel and align it to the center both horizontally and vertically.
6. Place a <mark style="color:green;">**`Button`**</mark> component into the other container. Click on <mark style="color:green;">**`VerticalArrangement2`**</mark> in the components panel and align it to the center both horizontally and vertically.
7. Click on the <mark style="color:green;">**`Image`**</mark> component and select the uploaded image.

   > Optionally, adjust the <mark style="color:green;">**`Height`**</mark> property of the image if needed.
8. Set the button's <mark style="color:green;">**`Width`**</mark> to <mark style="color:green;">**`fill parent`**</mark> and change the <mark style="color:green;">**`Text`**</mark> to <mark style="color:green;">**`Hide`**</mark>.
9. Navigate to the <mark style="color:green;">**`Blocks`**</mark> 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://caseytechschool.gitbook.io/app-development-using-mit-app-inventor-platform/tutorial-1-image-hide-and-seek/extension-activity-1-improving-button-stability.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.