The Image component allows your app to display the contents of supported image files of various sizes.
This exercise shows 3 sources of images for an Image component (inside the app, on the device's sdcard, and the from internet.
Title this project lrn_img_imgsrc
Screen Designer:
Drag out 3 Image components to the Viewer layout.
Download the sample image file attached to this tutorial to your computer, then upload it to the Screen Designer's Media list for this project now.
- it will be used by the first 2 Image components in the tutorial.
- the first Image component will reference an image file uploaded from your computer to the AI project and stored in the Screen Designer's Media list.
- this type of file is usually referenced by the file name only like this: Desert.png (no internet connection is needed)
- the second Image component will reference the file at /mnt/sdcard/AppInventor/assets/Desert.png in the emulator or device
- the following picture shows the 3 Image components and that the image file has been added to the Media list:
Blocks Editor:
Drag out the Screen1.Initialize block.
- Screen1.Initialize executes it's blocks when the app starts
Drag out 3 Image1.Picture blocks and drop them inside the Screen1.Initialize block.
Drag out 3 text blocks and attach them to the image Picture blocks.
For the first block, change the text to Desert.png (this picture file is located in the Media list and will be included in the packaged app.
For the second block, change the text to /mnt/sdcard/AppInventor/assets/Desert.png (the file is stored here during development on the emulator or device)
For the third block, change the text to http://aiapis.co.cc/shared/Desert.png (the file will be available if there is an internet connection)
Test the app in either the emulator or on a connected device and the output should look similar to this:
END.
Challenge:
Experiment with changing the properties of one of the Image components.
How can you make the picture fill the screen horizontally?
Is the aspect ratio (ratio of width to height) maintained when either the width or height is changed. If not, how would you maintain it?
