Adding an image next to a csv file in a listview

hello, I'm doing a school project which consists into creating a project where I can order breakfast, I have a csv file with all the description of the products, with their price, a row consists of product name, price and an image that is next to the price, Every product and price is in a listview. I want to know on how I can put an image beside the text
Thank you in advance
GOOGLE SHEETS (WHERE I GOT THE CSV)
image
BLOCKS PART


MY IDEA

1 Like

in designer view, select Listview, change property ListViewLayout to Image Main text, DetailText.

But your block to setup elements have problems.

1 Like

what should I do next? I'm asking because I'm not good at this and it's my first month of creating apps

Hello Abdul. We can't do your homework for you. You have done well, just follow Kevin's hint. You could try making a mini test project that just uses three or four items of text along with matching images. Ensure that the images you use are free to use.

Can I at least get a hint on what's the problem with the element block?

You have the entire list 'lista' going into one main text of the List View? That should be a List Item (Select List Item). What happens when you run your App in the Companion? Does the result not tell you something is wrong?

it just shows all the products with prices but no images

When you tap on 'muffin' does it highlight on it's own?

it highlights when touched, but then It goes back on the screen 1 because I didn't do the screen 2 with all the other things


The names (e.g. muffin) should be the 'Main Text', the price (e.g. €2.29) should be the 'Detail Text'

see the docs:
http://ai2.appinventor.mit.edu/reference/components/userinterface.html#ListView

oh, now I understand, thank you

1 Like

Hello, I'm currently working on doing an application to order breakfast, I did the sweets and I wanted to put a picture rapresenting the sweets, the problem is that all the sweets are saved in a google sheets file and that file is converted into csv that I put in a Listview, I watched everywhere but I can't find a solution on how I can insert an image next to the product description and price
Can someone help me please?

BLOCKS

GOOGLE SHEETS PRODUCTS
image

MY IDEA

Where do you plan on getting those images from?

I don't know yet, any type of source will be okay because I have the url of all images (I can upload them locally too)

Depending on how static your images and names will be, either:

  • download and shrink them and rename them to match the food names, into the Media folder (tedious but simple), or
  • add URLs to column C of your sheet and hope the ListView pictures will work. (I have not tried that.)

Best to download them, make them all the same size and convert to WebP format - needing a connection to the cloud is a risk - the website(s) might change their pages and make the URL null and void - or have a different picture for a different subject.

It's very important to ensure there are no copyright issues. You could take your own photos.......

oh ok, I can create them from Photoshop and download them in webp

hello, it's me again, I want to know if I upload every image in drive and open them as image it will be better cause the url won't change, and I want to know if 1080x1080 would be okay for the webp images

Hello Abdul

1080 x 1080 is far too large. The images should be scaled down to just over the size they will be on the phone. In a Listview, experiment with something like 100 to 200 pixels. See my general guidelines on images:

https://www.professorcad.co.uk/appinventortips#TipsImages
https://www.professorcad.co.uk/appinventortips#TipsGui

hey! i am working in something very similar to urs. Did you figure out a way for the images to show when someone searches them? if yes can you pls explain how or share with me your file? Thank you!