Dynamic Image view
Description
This guide represents two methods of building image views which you can view images in dynamically…It can be used with images stored on assets,phone or retrieved from database…
Note :While creating it doesn’t make any lag…
Important: if you use image paths then remove @DevYB image loader extension and use set any image picture instead…
Tip:Click on the description word after each block…And you will find a complete description for each block…
Method1:
(Recommended for landscape images…)
Design:
We only need 1 vertical arangment:
Properties:
width : Full parent
Also we need dynamic components extension and image loader extension ( can be replaced with image utilities component)
Blocks:
Procedure:
Procedure Blocks:
Block description
-it deletes all the items created so we avoid duplicates…(procedure will be shown later)
-Initializes local variable named ID to 0…
-For each item in the list ( image url it makes {
-Create card view in vertical arrangement 1…It’s ID is c_{id}
-Set width and height to 100 and 185px (can be changed to any value or to -1 for automatic) ,respectively
-Set padding (bottom,top,right,left) to 0…
-Set full clickable to true…So it consumes any clicks on any component place inside the card view…
-Set the corner radius to 100…You can change it as you want…
-Now it creates image component in the card view component that we created before…It’s ID is I_{Id)…
-Set’s the width percent to 100%,185px (can be changed to any value or to -1 for automatic) of the image,respectively…
-Loads the image from URL given to image component we created Asynchronously…
-Finally It sets Scale picture to fit property to true…So our picture scales to the width and height given…
And so on…
Method2
(Recommended for portrait pictures)
Design:
This Method design is quite diferent…
1- Vertical arrangement 1 :
Width :Full parent
2-Horizontal arrangement 1:
Width :Full parent
Align Horizntal :3 (center)
3-Vertical Arrangement 2:
Width:Full parent
4- Vertical Arrangement 3:
Width:Full parent
And Dynamic component extension and image loader extension…
Procedure:
Procedure Blocks:
Block description
-it deletes all the items created so we avoid duplicates…(procedure will be shown later)
-Initializes local variable named ID to 0…
-For each item in the list ( image url it makes {
-Create card view with a complicated way so it’s placed one time in VA2 and one time in VA3…How it’s created?It checks if VA2 is = true then it sets VA2 var to false and returns HorizontalArrangment1…Else it sets VA2 var to true and returns HorizontalArrangment2 …It’s ID is c_{id}
-Set width and height to 100% and 50%(can be changed to any value or to -1 for automatic),respectively
-Set padding (bottom,top,right,left) to 0…
-Set full clickable to true…So it consumes any clicks on any component place inside the card view…
-Set the corner radius to 100…You can change it as you want…
-Now it creates image component in the card view component that we created before…It’s ID is I_{Id)…
-Set’s the width percent to 100%,50%(can be changed to any value or to -1 for automatic) of the image,respectively…
-Loads the image from URL given to image component we created Asynchronously…
-Finally It sets Scale picture to fit property to true…So our picture scales to the width and height given…
And so on…
How to delete all?
Description
When this procedure is called {
for each item in list of used IDs… It removes the ID…
And so on…
How to detect clicks and get the index to the clicked item?
Important: I used the if condition in this event only to avoid errors because i have another card views in the screen that isn’t create dynamically…It maybe help any one have another card views in the screen…
Description
When any card views clicked{
It checks if the card view not equals card view 1…
If it doesn’t equal then it show toast message that join you clicked item with the index of the number…
How to get the index of the item?
The app get the id from the component…Ex: if it returned c_4…Then it splits this value at the underscore (_) So it returns a list of ( c 4)…Now we select item number 2 which is 4…So the final value is 4…Then it will Suppress this toast message: “You clicked item 4”…
Final Design:
ScreenShots:
Download links:
AIA: DynamicImageListView (2).aia (237.1 KB)
APK: DynamicImageListView (19).apk (5.2 MB)
AIS DynamicImageListView_Screen1.ais (14.9 KB)
Improvments
You can use @WatermelonIce guide to create the card views and the arrangements dynamicly and not manually…And refer to my guide in setting properties,Creating images and deleting it ,etc… I made it manually to use less blocks…
Guide link : Simple Dynamic Grid View Using Dynamic Extension…
Credits
Thanks for reading 
Finally we reached the end of this guide…If you like it please leave a comment or like…Also Please tell me if you have any suggestions to improve the guide or if i made something wrong…Also thanks for @DevYB and @yusufcihan for their amazing extensions…
Also thanks for https://pinmg.com/originals/ and https://steamcommunity.com/ for there images…I found them on google as i don’t have time to create one
…
Mohamed Tamer
…The vertical arrangement is the same as if i used a horizontal arrangement it will not be vertical i think 
