[FREE] Custom List View - An Extension for making Image and text list view with a lot of customization

Extensions
, ,
#39

Hi @plumedours
May you please translate your blocks to English language? I could not understand your blocks. As far I understand, When list image is clicked then you show 5 images and when user will click one of them then you want to update the image of list with the clicked image’s picture. You can use UpdateImage block for this.

Also, it seems that extension is not working to load images from assets or path. Version 3 of extension will soon released with some new blocks and these bugs will be fixed in that update. Then you won’t need to use Image Utility component for loading images from assets.

My exams has been finished. Now I can focus again here. :smiley:

5 Likes
#40

Oh, sorry @iamwsumit , I forgot to do this before uploading my png blocks! There it’s done :

blocks
blocks(1)
blocks(2)

blocks(3)
blocks(3)846×1382 188 KB

blocks(4)
blocks(5)

If I use a direct url to display the image, can it work? Rather than using the assets?

#41

Extension isn’t working to load offline image(from asset and storage) currently as I said above. You must use LoadImage with image utility component to load offline images. But make sure you have unchecked the LoadImage property if it’s enabled then LoadImage event will never get invoked.

In your blocks, I can see that you have used global select_avatar as image path. However, you have used the same block in for each loop as list. It’s too confusing me.

Then you won’t need to use image utility component anymore to load images.

But the bug is fixed, offline image will now load with new update and I am working on some new things to make extension more better. I will make update as soon as possible I can.
Let me know if anyone wants to suggest any feature. I’ll try to add it.

2 Likes
#42

Thank you very much, I’ll watch this when I have a little more time. It’s really great, very good work, thank you again!

#43

So, I checked the “load image” option, and used urls instead of images in the assets, and it seems to work!

Thanks again :grin: I look forward to updating your extension from

1 Like
#45

Version 3

Version 3 of the extension is here.

What’s New

  • A Checkbox :white_check_mark: is added to the list view. It will be shown below the secondary text.

  • A lot of block has been added to make the list more customizable.

  • Now you can decorate item background while swiping at specific position.

  • Now you can control the swipe and drag of item at different position.

  • A Swiping event has added. This event will help you to know the offset of item that is being swiped.

  • You can control the size and stroke of the image at specific position.

  • Now you can customize the text(title, subtitle…) for specific position. ex, text color and text size…

  • Default Item Animation by Android recycler View can be disabled now.

  • Items can be dragged and swiped by your command.

Bug Fixes

  • Offline Images was not showing. It is fixed now.

Blocks Added

component_event (1)

This event raises when the item being swiped. You can get swipe offset from this event.

component_method (1)

This block helps you to set the size and stroke property of image at specific position.

component_method (2)

This block helps you to set the text size and color of the title at specific position.

component_method (3)

This block helps you to set the text size and color of subtitle at specific position.

component_method (4)

This block helps you to set the text size and color of secondary text view at specific position.

component_method (5)

This block customize the checkbox for specific position. background Color specify the background color of the checkbox, color specify the checkbox color and checked if set to true then checkbox will be checked and visible specify the visibility of checkbox.

component_method (6)

This block control the dragging of the item for specific position.

component_method (7)

This block control the swiping of the item for specific position. for ex, if leftSwipeable is set to true and rightSwipeable false then the item will only able to be swiped in left direction.

component_method (8)

This block helps you to decorate the background view of the item when item being swiped. You should use this block on Swiping event. It will help you to change the background view when the offset is changed.

component_method (9)

This block helps you to swipe the item at any event. For ex, Item can be swiped when user long click on any item but if you want to start the swipe on item click then just call this block with position and the item will be started to swipe on user thumb.

component_method (10)

This block helps you to drag the item at any event. For ex, user need to hold the item to drag it and if you want to drag the item on a simple click or touch on the item then call this block with position and the item will be started to be dragged.

image

These block list the info of all items of list view.

component_method (11)

This block returns true if the checkbox is checked at given position.

image

If disabled then no animation will be occurred on item update, moving, and item removing. It is checked by default.

Preview

Let see preview of new thing that has added and changes that are occurred.

Animation Enabled

See How it works when animation is enabled.

Removing Item

Remove

Moving Item

Move

Updating Item

Update

Animation Disabled

See how it works when the animation is disabled.

Updating Item

Update without anim

Moving Item

Move without anim

Decorating Item Background

Decorate

Updated Extension

Download com.sumit1334.listview.aix (134.7 KB)

Kindly update the extension in order to get latest features

Thanks @Henry for suggesting Checkbox design in list view.
Thanks @Angelo_Angius and @charlesaccount for their donation

Thank you all for using my extension. I am still wondering to see that old version link has got 230+ clicks even in the despite of newer version . It seems that peoples are liking older version more than newer. I hope you’re enjoying the extension 🥲

Thank you
Sumit​:wink:

17 Likes
[PAID AIA] DISCORD CLIENT MADE WITH KODULAR! App that connects to Discord! AIA
#46

Keep it Up @iamwsumit
And fantastic update

1 Like
#47

Add support for App inventor please

#48

This is amazing work Sumit, thanks very much! This is a very versatile extension and great updates :grinning: I am using this in my app currently, and it is works well.

#49

Hi @Star_DZ

Extension was not working in App Inventor due to some Designer Property issue. I have fixed it and updated the above downloading links. But, the extension will still not work at all in App Inventor. It can do all the job except dragging and swiping the items. If you enabled these properties then you will face a failed resolution error in companion and will crash your APK. This error comes because of library resources that are not compiled in extension. Currently App Inventor does not support AAR file in extensions. However, this error does not comes in kodular because Recycler View AAR is already present in kodular sources. I hope you got my point and I believe that it could be used in App Inventor well. Here is a screenshot of list view that I made in App Inventor.

Only version 3 will work in AI2. Another 2 versions would not work and will crash the APK.

IMG_20211002_220711
IMG_20211002_2207111080×899 119 KB

Thanks Django for your donation. :slightly_smiling_face:

2 Likes
#50

Is there the possibility of putting the rectangular image that is above the title and subtitle?
image

#51

How do I show the whole list? I have a list with 23 items, and only 11 items show up. I have to use “ScrollBottom” to get access to the rest of the list

#52

Is Custom List view a recycled view? Please tell

#53

You can use Picasso extension to load the image from URL. Then the image will not be rounded.
I have already posted it above.

Also, I think there should be a property for this. So user can use circle and rectangle image both. It would be added in future updates.

What do you mean by whole list?? Can you elaborate please?

Yes. Almost all list view component and extension are made with recycler view. You can check the sources of List View component here.

appinventor-sources/ListView.java at master · mit-cml/appinventor-sources (github.com)

#54

My list contains 23 items, when I use your extension, it doesn’t have a “Scroll” so I have to use the “ScrollBottom” so I can see the rest of the list, and as if it split into two pairs.

#55

Just WoW :heart: :heart: :exploding_head:

1 Like
#56

Wow its recycler view , but what is the limit of recycler view 100000000 or 10000000000

#57

Do you want to revive the missing library of Alexandria?

4 Likes
#58

Awesome Extension! I have a question though… Is there a way to search/filter what i looking for?

#59

Thanks for extension!! I like it! :grinning:

And one question, when you click in an item, I would like to show the image more, how can I do that?

Thank you :slight_smile:

Solve:

I solve the problem. You can use this block
blocks

1 Like