Hour of Code Challenge: Make an Image Gallery

Technovation Girls:
Make a Digital Art Gallery 

2019 Hour of Code Challenge 

Technovation Girls Hour of Code Activity: An illustration of a girl holding a smartphone with a gallery of dog pictures

Challenge: Make an Image Gallery

Create an app that allows someone to view at least three different pictures. The app should have a "gallery" feel, so the user should be able to view each picture, one at a time.

This project is organized into an introduction, a planning activity, and then building your digital app gallery. We also share solutions in App Inventor and Thunkable, block-based coding languages! (But you can use any programming language you like to build your gallery.)

Challenge: Build a Digital Gallery

Welcome to our Hour of Code challenge! This is an opportunity to explore coding by building an app that creates an image gallery. You can solve this challenge in App Inventor, Thunkable or any language of your choice!

Click the button below to learn how to get started with App Inventor or Thunkable, and keep scrolling for our solutions for creating an Image Gallery. 

Learn how to set up App Inventor or Thunkable and start coding

Activity: Plan your app

Before you start coding, it will be helpful to write out what  you want your app to do. Writing out what you want to do in plain language will help guide you as you build your app with code.

 Here’s an example that we wrote out before creating our solution.

  1. There will be 3 buttons on the screen
  2. When a button is clicked, an image appears
  3. When another button is clicked, a different image appears

App Inventor Solution

Here’s a video tutorial made by Technovation alumni Jennifer. 

Click the button below to see our solution in the App Gallery

Written out Instructions

Part 1: Designing your User Interface

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 see different images. You’ll need to create your user interface first in the designer screen.

  1. Add an image to your screen.
    • Make it fit 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 three buttons into the horizontal layout.
    • Click on the buttons in the component menu and edit the text to make the buttons say Picture 1, Picture 2, and Picture 3
      • You should also change the names of your buttons to help you remember what they are supposed to do! We changed ours to ‘Picture 1’, ‘Picture 2’, and ‘Picture 3’. You can do this by pressing “rename” under components.
  4. Upload the pictures you want to use in your gallery!

Part 2: Programming the Blocks

Explanation: Now that you created your user interface, you need to make it do something. When the user presses the buttons, you want your app show different images. To do this, you will use the button event handlers.

  1. Click on button you named ‘Picture 1’ to see all the blocks you can use. Grab the when button.click block and drag it to your workspace.
  2. Click on Image1 to see all the blocks you can use for the image.  Grab the ‘set Image1.picture to’. Put this block inside of the when.button.click event handler.
  3. Grab an empty text block and type in the name of your picture. Attach this block to the set Image1.picture to block.
    • Hint: The name has to match exactly. For instance our picture was named “Picture-1.png”
  4. Repeat this for each one of your buttons

Thunkable Solution

Here is a video solution from the Thunkable Team.

Click the button below to see the source code for the Thunkable solution:

Written out Instructions

Part 1: Designing your User Interface

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 see different images. You’ll need to create your user interface first in the design screen.

  1. Drag an image component into the app builder. 
  2. Set the image’s height to 50%, and set the width to “90%”.  
  3. Drag and drop a row component into the app builder. The row component will act as a container, and allow you to add and organize buttons inside the container.
  4. Drag and drop three buttons into the row component.
  5. Click on each of the buttons and rename them to say Image 1 Button, Image 2 Button and Image 3 Button.
  6. Next, change the text of the buttons to say Image 1, Image 2 and Image 3. 
  7. Upload the pictures you want to use in your gallery! You don’t have to use the pictures that we selected. To do this, click on the image component, and in the picture section, you can upload pictures.

Part 2: Programming the Blocks

You just created a user interface, hooray good for you! Now you need to program how the user interface works. To do this, you will use blocks. Click on the blocks section.

  1. Click on the block options for the “Image 1 button” to see all the blocks you can use. Drag and drop the “when Image 1 Button click do” block into the blocks editor.
  2. Click on the block options for Image 1. Drag and drop the “from Image1 set picture to” block into the blocks editor. Put this block inside of the “when.Image 1 Button click” block.
  3. Copy and paste this block combination 2 times. You should now have 3 block combinations in total. Go to the second block combination. In the drop down menu of the first block, set the block to say, “when Image 2 Button Click”. Next, click the drop down menu of the set image block. Have the block set the image to be Malala.jpg.
  4. Go to the third block combination. In the drop down menu on the first block, set the block to say, “when Image 3 Button Click”. Next, click the drop down menu of the set image block. Set the block to RBG.jpg. 
  5. Open up the Thunkable Live App on your mobile device. Make sure you are signed in with the same account that you used on your computer. Click live test on your computer to test the app on your mobile device!

Reflect

You just completed a coding challenge! Take a minute to reflect on what you learned – consider the following questions?

  1. Can you suggest any improvements that could be made to slideshow app that would make it more fun and useful?
  2. How might you redesign this app for a user that did not have the ability to touch a button?
  3. Is it possible to add a picture to your slideshow by taking a picture with the phone’s camera? What App Inventor programming features would you need? How could you learn how to build that into your app?  

Congratulations!

Great Job – you've finished an hour of code!
Download a certificate from Hour of Code to document your accomplishments.

Share your accomplishments on social media!
“I’ve done an Hour of Code with @Technovation! Have you? #HourOfCode”

Did you enjoy this challenge?

Join us for the 2020 Technovation season!
You'll create an app that solves a problem in your community and learn how to market your app.