Developing Slideshow App

05 May

In this tutorial I’ll cover how you can develop a a simple Slideshow app that will rotate over set of images.


This tutorial introduces:

  • Canvas
  • Checkbox
  • Slider
  • Clock
  • List
  • Procedure

The completed app will look like the following allowing you to create a slideshow rotating between selected images. It will contain a checkbox that when checked, will start the slideshow and when unchecked, will stop it. It will also include a slider allowing you to change the delay between slides.

We will be working toward the design shown in figure blow:


The figure below shows how the components are arranged in the design editor. It also shows you the non-visible component (Clock):



We define 2 global variables.

  • listImages– a list variable to hold list of images for the slideshow
  • index – a variable that holds the current slide indexes. We default it to 1; first image in the list

We now create a procedure that can be invoked when the app is started (initialized). The procedure is called “setCanvasImage” and as argument, it takes slideNumber. This procedure sets the background of the canvas to the slideNumber (index of the list). We also invoke this procedure from screen initialization so that first image is set into canvas background. Also, in our initialize block, we convert the initial value of Slider thumbPosition to millisecond by multiplying it by 1000.


Next, we implement ability to allow user to indicate start or stopping of the slideshow by use of a Checkbox. For this, we have created a procedure (resetTimer) that starts or stops a timer (Clock). The procedure takes accepts a boolean parameter that we use to start or stop our timer. Whenever the status of checkbox is changed, we pass the status ( checked (true) or unchecked (false) )  to our procedure.


When the timer is enabled, in the Timer event, we check to see if the last picture is shown. If so, we loop to first image. This is accomplished by adding 1 to our variable (index) and checking to see if it is greater than our list of image size. If so, we reset our index to 1. After our index check, we invoke setCanvasImage procedure (see above) to change the Canvas background to the new image.


Lastly, we have used a Slider component with following values of min=1, max=5, thumbPosition=3. We use these values for our slideshow delay (in seconds), allowing user to change delay by dragging the slider thumb. Since values are in seconds, we convert to Milliseconds and then change TimerInterval using below block.


What’s Next?

You can use TinyDB component to store last image shown, slider position, image description text

Mobile App Development


Posted by on May 5, 2014 in Uncategorized


11 responses to “Developing Slideshow App

  1. Jay

    October 26, 2015 at 11:25 pm

    Any chance you have a .aia file available for this that I can upload as a starting point for a more extensive project I am getting ready to start? It would really save me time and be greatly appreciated.

  2. Marcos

    February 6, 2015 at 11:13 am

    friend ;
    I am developing an application for a pizzeria and I was asked to make an image slideshow . Just wanted to thank you because your tutorial is very helpful for me to do this . hugs.

  3. venkatesh

    May 9, 2014 at 7:24 am

    Sir can u plz tell me hw to prepare a talking tom using app inventor 2

  4. mohammad

    May 7, 2014 at 6:41 pm

    nice and good work but i want ask you about if you can make project use tinydb and how i can connect with the data base and thanks

    • M. Hossein Amerkashi

      May 7, 2014 at 9:46 pm

      tinydb is pretty simple to use for simple data structures. However, if your data structure gets complicated, so does your tinydb CRUD operations

  5. Omer Rosenbaum

    May 6, 2014 at 3:20 am

    Is there a way to pull the images from the stored images in the user’s device?

  6. Venkatesh

    May 6, 2014 at 3:04 am

    Thank u so much sir


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: