ListView filling with image

I cant understand (and nowhere cant find it) how to add by Blocks (not manually) the images to ListView.

I can only add one "item" that contain pure text to List then associate it with ListView.

How to add by Blocks (programmly) image to ListView?

1 Like


First, go to the ListView and in the Designer, find ListViewLayout. You will see some options.


  • MainText is the title/main text of an element, for example, in a list of search results, the title of each search result can be the MainText.

  • DetailText is the caption of an element, which describes the MainText, for example, in a list of search results, you can set the DetailText of each element to the descriptions of each MainText.

  • Image is the image of each element.

Be careful when selecting the options.

This is the correct way of adding an element into the ListView:

If you would like to add more elements to the list at the same time, then:

  • in the "add items to list" block, click on the little image symbol.

  • you will see a little "item" block, and a "list" block with an "item" block snapped in the middle.


if you want to add 2 more elements, then drag out 2 little "item" blocks on the left side to the "list" block.

  • click on the blue wheel again.

then, you can use these:


Hi Gordon,

Im really grateful for you help, thanks!


Please may you advice how to store such list to database (tinyDb?)
I need to store values like a texts with separator? Or i can store a whole List element at once? Thanks

You can store the entire list in a sinlge tag in the tinydb if you want, but note that images will only be stored as the file paths, the actual image is not stored.


I use the next blocks and as result in ListView output i get raw texted values like

How can i get normal view after store/get database procedures?

1 Like

A simple example,


How to extract image from ListView?
There is no such field in it (main and detailtext is present).

1 Like

What's wrong with this one?

1 Like

I dont see where i can pick the image of selected element.
Its so not intuitive so need special studying of "simple and fast coding" :frowning: :frowning:
Android Studio is much more intuitive.

Read this. Why didn't you use this?

What i must connect to input of ListElement?
App inventor refuse to connect any selection-related blocks.

I see how the Selection block won't fit into the block that extracts parts of the ListView Selection.

Here is a working work around ...

listviewWithDynamicData.aia (111.9 KB)

The screen in question is the third screen. (All others are empty. I stole the images from another project and it was easier to copy the whole project and just keep the images.)

1 Like

A post was split to a new topic: How to make listview show different results on screen2 when i click different elements?