Trying To Make Gallery App

I am trying to create an app that:

  1. can use camera to take and save multiple pictures
  2. shows all pictures taken on screen

Similar to the Android gallery app.
I have tried so many different things but haven't figured it out yet. Can anyone help?

Hello Josh,

What problem do you have with your project?

I have only figured out how to take one picture and display it on screen, but I want to take multiple and display them. The "Camera.TakePicture" and "set Image.Picture to get image" combo will just set the image component to the new image and delete the old one. I assume Dynamic Components would be utilized here, as I would need to make a new image component with every picture taken, but I'm not entirely sure how it would work. I'm a beginner to complex app making like this so it has been hard to figure out.

Is this possible? Are there any other extensions I should use?

You can search in the community for a huge amount of similar examples:

and how to display them in a table:

1 Like

Worry more about keeping track of the picture files in your storage.

You don't need to grow an extra head every time you buy a hat.

This might be a dumb question so please forgive me but how would I input the HTML code shown in the Metric Rat AI2 site? I've seen it before but I avoided it because I didn't understand how to implement it into App Inventor...

Which html code? Provide a link.

I was looking at this one in particular: METRIC RAT AI2 - Image Grid with HTML

click the arrow and download the html, no need to edit it.
upload it to media panel as assets.

Thank you!
This code seems to work fine, though right now my images look like this for some reason:

The thing I'm having trouble with now is: the TaifunFile code from the camera.aia example seems to save to shared folders (I don't know where this actually saves to on my device?) however the Image Grid HTML code pulls the images from ASD. Does anyone know of a way I could combine these two to utilize the same place?

You need to add more blocks to this section:


and probably in the getImages procedure as well.

in order to pull in directories in Shared Storage.

If I get some time today, I will have a look at this for you.

Thank you so much!


This needed a bit of thought, but got to the bottom of it eventually.

All the changes to make this work are in the blocks.
I have not changed the content or location of the html file.

Tested with companion and compiled app on Android 13, Google Pixel 4a.

The compiled app will ask for some permissions on first run.

I have @ 500 full size camera images stored on my phone. This takes quite some time to load all of them. Photos taken in portrait may be rotated by 90 degrees when viewed in the image component, but they display correctly in the html.

htmlImageGridv2.aia (9.5 KB)

Thank you for asking for this, it is a useful upgrade to this method :+1:

1 Like

This looks like it'll work perfectly, thank you so much! Really appreciate it :slight_smile:

Sorry, another question:
I have too many images in my Shared folders that it crashes the AI companion. I made a new folder called MitApp in my Internal Storage and this code successfully saves the camera images there:
However, I can't seem to pull the images from this folder using your code, and it gives the "there are no images in this folder" error message. Is there something I'm missing? I added the MitApp folder to the dirlist here:

  1. I am surprised you can create and use that directory /mitapp. What android version are you using? Is this working with a compiled app ?

  2. In your first image you use /mitapp. In your second image you use /MitApp. Directory and File names are case sensitive.

If you want help on rhis, then provide a screenshot of your relevant blocks...
Did you test this after building the app, too?


I am using Android version 8.1.0. I'm not sure what you mean by compiled app? I just ran the picture taking/saving code using the AI companion, and it worked fine.
I changed the name in the dirlist but it still doesn't work. The folder is named MitApp in my files, but in the Taifun camera code I used "/mitapp" so I had assumed the case didn't matter. Here's a screenshot of where the folder is if it helps:

Usually you use the companion app only to test. Then you build the app to get an apk file and install it on your device.


I haven't made the apk yet, I will try it!
As for the blocks, not sure what other blocks are relevant. I only used the code that TIMAI2 provided. I'll still screenshot it and send here:

The code below is my code that works: