App Development using MIT APP Inventor Platform
All tutorialsHomepage
  • πŸ“±Mobile App Development using MIT APP Inventor Platform
  • 🐭User Interface and User Experience
  • πŸ”Setup
  • πŸ¦‘MIT App Inventor Interface
  • πŸ˜ƒTutorial#1: Image Hide-and-Seek
    • Building your First Mobile App: App Design
    • Building your First Mobile App: App Logic
    • Testing the app
      • Testing the app using USB
    • Extension activity 1: Improving button stability
    • Extension activity 2: Adding sound asset to the app
    • Final Remarks
  • πŸ—ΊοΈTutorial#2: Creating a multi-screen SOS App
Powered by GitBook
On this page

Was this helpful?

  1. Tutorial#1: Image Hide-and-Seek

Building your First Mobile App: App Logic

PreviousBuilding your First Mobile App: App DesignNextTesting the app

Last updated 1 year ago

Was this helpful?

The app logic is responsible for toggling the visibility of the image and updating the button text accordingly. Follow these steps to implement the logic:

  1. Navigate to the Blocks tab above the Properties panel.

  2. Click on Button1 in the Blocks panel and drag the when Button1.Click block.

  3. Drag an if then else block from the Control section into the when Button1.Click block.

  4. Drag an equal block from the Logic section and drop it into the if statement.

  5. Use the Button1.Text block from the Button1 section, placing it in the first section of the equal operation.

  6. Drag an empty text block from the Text section into the second part of the equal operation. Type Hide in the empty block.

  1. Click on the Image1 block and drag and drop set Image1.Visible to on your screen. From the Logic section grab the False block. Connect them together.

  2. Similarly, click on the Button1 block and drag and drop set Button1.Text to on your screen. From the Text section grab the empty text block and type Show. Connect them together.

  3. Move these two blocks inside the if statement.

  1. Right-click on the first set block, choose Duplicate, and move the duplicated block inside the else statement. Change False to True and Show to Hide.

  2. Duplicate the other block, move it into the else statement, and change the text to Hide. The final code is as follows:

  1. Congratulations, you are done! Test your app to see the logic in action.

πŸ˜ƒ
App logic
App condition
Completed if block
Final code