AppInventor: HOWTO: Dynamic Scrolling Image List with Titles using webviewer (with select)

Been working on this for a while, time to share the fruits of my labours!
There are many different ways to achieve much the same thing, but I wanted to have a go at building things up from scratch, just use pure javascript, and provide some user functionality in the process.
Youtube video to start things off:
How it works:
The Ai2 blocks feed the html file with all the data: image files, file locations, titles and subtitles, shape of image (square/circle), colour scheme.
The html file pulls all this information in through the webviewstring, and then by creating arrays from the webviewstring, dynamically builds a “card” for each image.
Note the use of classes from the w3.css and w3mobile.css to assist with the cards layout
A click on the image returns the file to the AI2 app and displays it.
Developers can choose to set all the variables to their liking, or can also provide a settings area for the user to do likewise (further demo hopefully coming on this!)
A couple of Taifun’s wonderful extensions used.
BLOCKS
HTML

aia attached 🙂  ImagePicker2

2 thoughts on “AppInventor: HOWTO: Dynamic Scrolling Image List with Titles using webviewer (with select)

  1. Hi, Nice sample, how to do the same but with infinite scrolling/paginate list?
    i need to do the same but i have a list wit 10000+ elements to display (with images taken from web)

    • You probably do not want to try to load 10000+ items all at the same time. You will need to break your dataset into batches for display, then move to the next batch to load

Leave a Reply to Davide Cancel reply

Your email address will not be published. Required fields are marked *