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

Custom List View

This extension allow you to create a custom list view with an Image, Title , Subtitle and a secondary text elements. It comes with a lot of features such as Drag and Drop and Swipe item with both sides. You can use extension to load images. You can customize the list view with designer properties.

Thanks @Henry for sponsoring the extension :blush:

Let see some blocks and their documentation.

All Blocks

There are 8 events, 17 method blocks and 28 set properties tht makes this list view fully customisable.

All Events

All Methods

All Designer Properties

Documentation

component_event (1)

This event raises when any item clicked with position of the clicked item.

component_event (2)

This event raises when any item long clicked with position of the clicked item.

component_event (3)

This event raises when your item’s image need to be loaded. You can use Image Utility component to load the image or some extension(not all).

component_event (4)

This event raises when item’s images is clicked with the position of the clicked image.

component_event (5)

This event raises when item’s image is long clicked with the position of the clicked image.

component_event (6)

As I said the list view have drag and drop feature. This event raises when an item is dragged to another place. It gives you two parameter fromPosition is the position from where the item has been dragged or toPosition where the item has been dragged(new position). You would need to enable the Draggable property for making able to drag your views.

component_event (7)

This event raises when the item is swiped to left side. It will give you the position of the item in parameter. You will need to enable the LeftSwipeAble property otherwise item would not be able to swiped.

component_event (8)

This event raises when the item is swiped to right side. It will give you the position of the item in parameter. You will need to enable the RightSwipeAble property otherwise item would not be able to swiped.

component_method (6)

This block create the list view to given container. If the list view is already added to any container then nothing will happen.

component_method (7)

This block add an item to the list view with title,subtitle, image and secondary text. They can be nullable.

component_method (8)

This block do the same above job but it add the item at given position.

image

These block can be used to update the item with position.

component_method (10)

This block move the item to given position from given position. You will see an animation while item are switiching.

component_method (11)

This block removes the item from specific position. You will see here an animation too.

component_method (12)

This block removes all the items from list view.

image

These block are used to control scroll of list view.

image

These blocks helps you to get the item details from specific position.

image

Set the item’s background color.

image

Set to true then item can be dragged. You need to control them by blocks then.

image

Set the size of item’s image. Default is 60.

image

Set the icon that will be shown when the item is swiped to left direction.

image

Set the text that will be shown when the item is swiped to left direction.

image

If set to true then the list will be reversed.

image

Set the icon that will be shown when the item is swiped to right direction.

image

Set the background color that will be shown when the item is swiped to left direction.

image

If set to true then item would be able to swipe in right direction.

image

Set the background color that will be shown when the item is swiped to right direction.

image

Set the text that will be shown when the item is swiped to right direction.

image

Set the custom font typeface of the secondary text of an item.

image

Set the vertical alignment of the secondary text of items.

image

Set the secondary text color of items.

image

Set the font size of the secondary text of items.

image

If set to true then a divider will be shown between items.

image

Set the stroke property of the item’s image view.

image

Set the subtitle property of the items

image

Set the custom font typeface of the label that will be shown when the view is swiped.

image

Set the text color of the labels that will be shown when the item is swiped.

image

Set the properties of the title of items.

Usage

Let see little usage so you can understand how to use it.

Adding an Item

blocks (19)

ItemAdd

Updating the item

blocks (20)

Moving the Item

blocks (21)

IMG_qhsr9o

Removing the Item

blocks (22)

Remove

Dragging Items

Make sure to check the Draggable property

blocks (23)

Enable Swiping of Items

Make sure to check the following properties.

blocks (24)

For enabling the swipe in left direction.

blocks (25)

For enabling the swipe in right direction.

image
image

We have set the icon on both sides.

Swipe Actions

How will you move or remove item while swiping or dragging.

blocks (26)

When the item will swiped right, we will remove that item by position.

IMG_w94gnd

blocks (27)

When the item is swiped in left direction, we will move the item to the top position.

IMG_94vg8d

blocks (28)

When the item is dragged we will move the item from it’s older place to it’s new place.

IMG_akqwqj

Loading Image

We can load the image by picasso extension by @vknow360 and can use Image Utility component to load the images.

However, if you uses picasso extension then you won’t get rounded circle image.

Download

Version 1 [Not working]

Download AIX

You can download latest version from here :

Donate

If you liked my any work or the extension, you can support by donating some amount.

Paypal: paypal.me

UPI: iamwsumit@kotak

Credit

Thanks @Shreyash for the super powerfull Rush .

Worked very hard for this long extension so like the extension if you like it :+1:

Suggestion and issue are welcome

Thanks you
Sumit​:wink:

99 Likes

Your extension are always great ! :fire:

5 Likes

Epic work :star_struck:

5 Likes

Awesome work @iamwsumit

2 Likes

Amazing Extension :clap: :clap: :star_struck:

2 Likes

in a word, perfect :heart_eyes:

1 Like

Brilliant, thank you!

1 Like

Very good job, man:upside_down_face:

1 Like

Extremely great extension, thanks alot :star_struck:, came right one time :sweat_smile: but unfourtunately its not working on app inventor :no_mouth:

I haven’t published the extension on AI2 yet. I think it would require some libs work then it should work on AI2. I will publish the extension soon. You should wait for it.

3 Likes

ListView changed a lot in MIT App Inventor and we are awaiting next releases to fix bugs

Read updated documentation for the ListView

2 Likes

Fortunately this is possible with upcoming release.

3 Likes

Great :fire::fire::fire:

Blow Your Mind Wow GIF by Product Hunt

4 Likes

Awesome work once again. Thanks. Are you planning to add search in listview to the extension?

Version 2

What’s New

  • Image will be loaded own in the extension with Universal Image loader library. But still you can use older method for loading images with extension and Image utility component

  • Divider Color property has been added now

  • Divider Height is also added.

  • You can set background color of specific item with position.

  • You can set margin and paddings of specific item with position.

  • You can customise the divider for specific position.

Bug Fixes

  • Divider was not seeing on items that is now fixed.

Changes

  • Extension has renamed to CustomListView from ListView as it was causing error while dragging the list view component. It may break your whole blocks. So kindly make a backup of the older project please. It was necesary to change the extension name.

  • Extension has increased from 40kb to 130kb due to extra features and own image loading libary.

  • LoadImage event would only occurred when LoadImage property is not enabed.

Blocks Added

component_method (6)

Set the background color of the specific item with position.

component_method (7)

Set the divider properties of the specific item with position.leftMargin and rightMargin are deprecated currently. It would not work in all cases.

component_method (8)

Set the margin of the item for specific item with position. margins parameter accepts a string that contains four values joined by commas. For ex, 2,4,7,5 .

component_method (9)

Set the padding of the item for specific item with position. paddings parameter accepts a string that contains four values joined by commas. For ex, 2,4,7,5 .

Properties Added

image

Updated Extension

Download AIX

Kindly update the extension in order to get latest features. But make sure to read above changes closely please.

Thanks @charlesaccount for their suggestions.
Thanks @Henry for your donation :smiley:

Thank you all for using my extension. Download link got 60 clicks in only 2 days of publication. Very happy to see this. I hope you’re enjoying the extension 🥲

Thank you
Sumit​:wink:

9 Likes

No. I think you should go with custom search bar as you can modify and make it according to your needs.
Many guides are available for making search bar. You should search on community.
One is here

4 Likes

Keep up your very good work, dear Sumit1334 !
Very nice extension,
Thanks a lot for the update !

1 Like

This is wonderful, thanks Sumit!

1 Like

Thank you my friend, excelent job.

1 Like

I Saw This Topic Late But This Extension Is Nice

1 Like