Dynamic Image view

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:

procedures_callnoreturn


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:

procedures_callnoreturn (1)


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?

blocks (63)

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 :grinning: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
:stuck_out_tongue_winking_eye:
Mohamed Tamer

10 Likes

Great work :heart:

1 Like

Thanks for your feedback :heart_eyes: @Zia_Choudhary

1 Like

Was this guide helpfull?

  • Yes
  • No
  • Prefer not to say

0 voters

I am working on a app for which I also have done similar design.

2 Likes

The grid view one is the same as mine but your logic and algorithm different. You are using Vertical arrangement, which is the same as this post:

The different thing is you add images inside.

1 Like

Wow @Maayur i didn’t see your design before but it’s amazing :heart_eyes:…It looks like my design…But you don’t set your image to fixed value i think…

1 Like

Hi @WatermelonIce i saw your guide and i didn’t copy your design as it’s logic is completely different… The logic of the grid view is mine and i didn’t get it from any where else…Also this guide you posted use a different logic,different method and different functionally…Sow we can’t say that it’s as same a i done…Any way, i didn’t see it before :no_mouth:…The vertical arrangement is the same as if i used a horizontal arrangement it will not be vertical i think :thinking:

Thanks for every one was this guide helpful for him…As that means for me a lot as i’m new here (67 day only) in the community and this is my first guide here…Thanks :heart_eyes:

I only said the logic is the same but I didn’t say you copy from that. Besides, that guide is not from me. I have a full functional and customizable grid view guide. If you combine mine and yours, I am sure it can be much better :smiley:

This is mine, mine doesn’t need any manually added vertical arrangement.

Then you create the horizontal arrangement dynamically?

1 Like

I only used this as it uses less blocks… Any way…I mentioned your guide in the topic above…

@WatermelonIce :arrow_up:

1 Like

I added manully to use less blocks and to make the guide length readable … But it can be added of course :+1:

1 Like

Thank you very much!

1 Like

You are welcome :grinning:

1 Like

hello everyone, i need some help, im doing dynamic cardviews with a dynamic image inside, i just could set corner radius of the card, but i cant set corner radius to the dynamic image into the card. can someone help me?
thanks a lot

1 Like

Hi @Alejandro_Sanjuan!
You can see this blocks:

if you clicked on it will expand and you will be able to view the complete blocks.You will find set AnyCardView cornerRadius block to .This will help you set the card view radius :wink:

Awesome job man!

1 Like

thanks you Mohamed . I just could set the corner of the cardview, but my dynamic image still straight, this are my blocks, what can i change?

1 Like