CODE CHALLENGE 1

Make a Slideshow

Designing your screen

For this app you will create a slideshow that allows your user to navigate through different images. When you design your screen, you will put an image and buttons for your user to click to move to a different image. You'll need to set this up first in the designer screen.

1. Add an image to your screen.
   • Make it fits your screen by changing the width and the height!
   • We choose to make our image “fill parent”. When you select “fill parent” you are telling the component to fill the space of whatever it is in. Image1 is inside of the screen, but the buttons are inside the container of the horizontal arrangement. You can see which things are inside other things by how they are listed in the components menu.
2. Add a horizontal layout to your screen below the image.
3. Drag and drop two buttons into the horizontal layout.
   • Click on the buttons in the component menu
     • Edit the text to make the buttons say ‘Previous’ and ‘Next’.
     • You should also change the names of your buttons to help you remember what they are supposed to do! We changed ours to ‘Previous’ and ‘Next’. You can do this by pressing “rename” under components.
4. Upload a picture you want to use in your slide show!
5. Select the picture you want to use on the first screen of your slide show.
   • Click on “Image1” in the “Components” menu and then “Picture” in the properties menu. You can then select the picture you uploaded.
6. Add at least two more screens. For our slideshow we used three screens but you can add as many as you like.
   • For now you do not need to do anything with those screens, but after you code the blocks you will add buttons and images to them just like you did for this screen.

Programming the blocks

Explanation: Now that you have your screen set up, you need to make it do something. When the user presses the buttons, you want your app to open another screen that has another image on it. To do this you will use the button event handlers.

1. Click on button you named ‘Previous’ to see all the blocks you can use. Grab the when button.click block and drag it to your workspace.
2. Click on ‘control’ and find the open another screen screenName block.
3. Get an empty text box and click it into the open another screen screenName block. Type the name of the last screen that will be in your slide show. For us, it was Screen3.
4. Click on your "Next" button and grab the when button.click block again
5. Get another open another screen screenName block from control.
6. Get an empty text block and type in the next screen that will appear in your slide show. (For us, that was Screen2.)

Check Point!

Before moving on, let’s make sure the code you just created works. It is a good habit to check bits of your code before you write an entire app, to make sure it is working. Otherwise you might make the entire app that has many features that do not work and it might be difficult to find out why it doesn’t work!

Pair up App Inventor with your phone, tablet and emulator. Do your buttons work like you expect them to? Our buttons worked: “Previous” brought us to a blank Screen3 and “Next” brought us to a blank Screen2. If your buttons do not do what you expect them to, try going back and making sure your code is correct.

Hint: Because there is nothing on Screen 2 or Screen 3 yet, we returned to screen 1 by moving back to it using App Inventor on our computer. App Inventor allows you to navigate through different screens on your connected phone or emulator using your computer. This will be a good trick to use later on.

Finishing your app

Explanation: Now that you have successfully set up one screen and programmed it, you can code the rest of the screens! You can add more screens if you want your slideshow to have more pictures, but make sure you always have at least three. The diagrams below show the flow of the screens and how the buttons control them.

1. Repeat steps 1-12 for each screen of your slideshow. Make sure the ‘Next’ button always leads you to the next screen and the ‘Previous’ button takes you back to the previous screen.

Final Check Point!

Make sure your app works! Test every "Next" and every "Previous" button. Do they each take you to a new screen? If not, check your work and make sure you've typed the names of your screens correctly.

Congratulations! You just completed your first coding challenge! You should feel very accomplished! Not many people have ever coded an app before!

Still Stuck? Download our source code. Here are instructions on how to download and use source codes: source code instructions