[F/OS] ListViewImageText Extension for Kodular And App Inventor Based

Extensions
,
1

ListViewImageText is a high-performance Kodular/App Inventor extension that lets you build smooth, scrollable lists without writing a single line of Java. Each list item can display:

  • An image (with a configurable “generic” fallback URL when none is provided)
  • A title and subtitle (customizable font, size, color, bold/italic, and optional HTML)
  • Left or right image alignment in three preset sizes
  • Search filtering by title or subtitle text

Under the hood, it uses an optimized adapter pattern and preloads views for smooth scrolling, while images load asynchronously on a background thread and are stored in an in-memory cache. This means once an image is fetched, it will immediately appear again without another download—perfect for responsive, data-driven apps. All configuration and event handling (Click/LongClick) are done with simple Kodular blocks.

1. Getting Started

  1. Import the AIX: In Kodular Designer, go to Extensions → Import Extension and select com.bosonshiggs.listviewimagetext.aix (32.0 KB) or GitHub.
  2. Add to Screen: Drag ListViewImageText from the Extensions palette onto your screen.
  3. Anchor: Use the AnchorTo block to place it into any layout (e.g., a VerticalArrangement).
  4. AIA File: wait…

:memo: Specifications

:package: Package: com.bosonshiggs.listviewimagetext
:floppy_disk: Size: 32,00 KB
:gear: Version: 1.0
:mobile_phone: Minimum API Level: 7
:date: Updated On: 2025-06-20T03:00:00Z
:laptop: Built & documented using: FAST v3.7.0

2. Basic Blocks

Events:

ListViewImageText has total 2 events.

1. Click

Fired when an item is clicked
A block of visual programming code triggers an action when the ListViewImageText1 component is clicked, retrieving the position, title, subtitle, and image data from the clicked item. (Captioned by AI)

Parameter Type
position number
title text
subtitle text
image text

2. LongClick

Fired when an item is long-clicked
LongClick_Event

Parameter Type
position number
title text
subtitle text
image text

Methods:

ListViewImageText has total 7 methods.

1. AnchorTo

Anchors this component into the given container
AnchorTo_Call_Method

Parameter Type
container any

2. AddItem

Adds an item with optional image URL, uses generic image if empty.

AddItem_Call_Method
AddItem_Call_Method309×105 5.82 KB

Parameter Type
image text
title text
subtitle text

3. AddItemFromList

Adds multiple items from a YailList of [title, subtitle, url], uses generic image if empty.
AddItemFromList_Call_Method

Parameter Type
list list

4. ClearList

Clears all items and cache
ClearList_Call_Method

5. RemoveItem

Removes item at the specified position
RemoveItem_Call_Method

Parameter Type
position number

6. UpdateItem

Updates existing item, uses generic image if URL empty.

UpdateItem_Call_Method
UpdateItem_Call_Method334×130 7.17 KB

Parameter Type
position number
image text
title text
subtitle text

7. Search

Filters list by query (case-insensitive)
Search_Call_Method

Parameter Type
query text

Designer:

ListViewImageText has total 14 designer properties.

1. GenericImageUrl

GenericImageUrl_Get_Property

  • Input type: string

2. TitleHTML

TitleHTML_Designer

  • Input type: boolean
  • Default value: false

3. SubtitleHTML

SubtitleHTML_Designer

  • Input type: boolean
  • Default value: false

4. BackgroundColor

BackgroundColor_Designer

  • Input type: color
  • Default value: &H00FFFFFF

5. TitleFontBold

TitleFontBold_Designer

  • Input type: boolean
  • Default value: False

6. SubtitleFontBold

SubtitleFontBold_Designer

  • Input type: boolean
  • Default value: False

7. TitleFontItalic

TitleFontItalic_Designer

  • Input type: boolean
  • Default value: False

8. SubtitleFontItalic

SubtitleFontItalic_Designer

  • Input type: boolean
  • Default value: False

9. TitleFontSize

TitleFontSize_Designer

  • Input type: float
  • Default value: 16.0

10. SubtitleFontSize

SubtitleFontSize_Designer

  • Input type: float
  • Default value: 14.0

11. SubtitleFontTypeface

SubtitleFontTypeface_Designer

  • Input type: typeface
  • Default value: 0

12. TitleFontTypeface

TitleFontTypeface_Designer

  • Input type: typeface
  • Default value: 0

13. TitleTextColor

TitleTextColor_Designer

  • Input type: color
  • Default value: &HFF000000

14. SubTitleTextColor

SubTitleTextColor_Designer

  • Input type: color
  • Default value: &HFF000000

Setters:

ListViewImageText has total 15 setter properties.

1. GenericImageUrl

Sets the default generic image URL for empty image entries.
GenericImageUrl_Designer

  • Input type: text

2. DividerColor

Divider color of the list
DividerColor_Set_Property

  • Input type: number

3. DividerHeight

Divider height in pixels
DividerHeight_Set_Property

  • Input type: number

4. ImageSide

Sets image side: 1=Left,2=Right
ImageSide_Set_Property

  • Input type: number

5. ItemSize

Item size: 1=Normal,2=Small,3=Large
ItemSize_Set_Property

  • Input type: number

6. TitleColor

Title text color
TitleColor_Set_Property

  • Input type: number

7. SubtitleColor

Subtitle text color
SubtitleColor_Set_Property

  • Input type: number

8. TitleFontBold

Define se o título (Title) ficará em negrito.
TitleFontBold_Designer

  • Input type: boolean

9. SubtitleFontBold

Define se o subtítulo (SubTitle) ficará em negrito.
SubtitleFontBold_Designer

  • Input type: boolean

10. TitleFontItalic

Define se o título (Title) ficará em itálico.
TitleFontItalic_Designer

  • Input type: boolean

11. SubtitleFontItalic

Define se o subtítulo (SubTitle) ficará em itálico.
SubtitleFontItalic_Designer

  • Input type: boolean

12. TitleFontSize

Define o tamanho da fonte do título (Title) em sp.
TitleFontSize_Designer

  • Input type: number

13. SubtitleFontSize

Define o tamanho da fonte do subtítulo (SubTitle) em sp.
SubtitleFontSize_Designer

  • Input type: number

14. SubtitleFontTypeface

Define a fonte (typeface) do subtítulo (SubTitle).
SubtitleFontTypeface_Designer

  • Input type: text

15. TitleFontTypeface

Define a fonte (typeface) do título (Title).
TitleFontTypeface_Designer

  • Input type: text

Getters:

ListViewImageText has total 9 getter properties.

All blocks

blocks
blocks1798×520 118 KB

Examples

image
image786×112 15.8 KB

image
image744×191 19.2 KB

image
image842×182 23.6 KB

8 Likes
2

Awesome work :clap: :clap::clap:
You might want to upload missing PNGs for designers & properties.

2 Likes
3

Welldone for this extension!!

Is there any difference between existing listviewimage component and this extension?

1 Like
4

The main difference is that the native component does not have native filtering functionality. The other differences are more technical.

5

I don’t see anything new from already existing one

1 Like
6

I was referring to the native Kodular component. Another difference is that it is open source, so any Dev can add their own modifications. My focus is always on solving my problems and sharing them so that others can adapt as well.

5 Likes
7

Thanks a lot for your contributions

1 Like
8

It reduced my work, thanks

🧩 ListViewImageText

An extension for MIT App Inventor 2.
Music playlist ListView with 1‑based indices, play/pause indicator, ID‑based duplicate prevention, corner radius fix, programmatic control, customizable row height, scroll animation, individual button colors, refresh, fixed scrolling/position tags, bottom‑reached event, clear‑and‑replace, select with playing state, and JSON liked‑by helpers. Call AnchorTo() to place it. Music playlist designed

:memo: Specifications

:package: Package: com.bosonshiggs.listviewimagetext
:floppy_disk: Size: 40.48 KB
:gear: Version: 23.2
:mobile_phone: Minimum API Level: 14
:date: Updated On: 2026-02-27T18:30:00Z
:laptop: Built & documented using: FAST v5.6.0-premium

Docs

## Events: ListViewImageText has total 8 events.

1. ItemSelected

Fired when an item is clicked. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
liked boolean

2. ItemLongClick

Fired when an item is long-clicked. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
liked boolean

3. LikeClicked

Fired when the like button is clicked. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
liked boolean

4. DownloadClicked

Fired when the download button is clicked. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text

5. PlayPauseClicked

Fired when the play/pause button is clicked. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
isPlaying boolean

6. ItemSwipedLeft

Fired when the user swipes an item from right to left. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
liked boolean

7. ItemSwipedRight

Fired when the user swipes an item from left to right. Position is 1‑based.

Parameter Type
position number
id text
title text
artist text
image text
duration text
liked boolean

8. BottomReached

Fired when the list is scrolled to the bottom (last item becomes visible).

Methods:

ListViewImageText has total 24 methods.

1. AnchorTo

Anchors this component into the given container

Parameter Type
container component

2. RefreshList

Forces the list to refresh (redraw).

3. ClearAndReplaceWithList

Clears the entire list and replaces it with items from a YailList of [id, title, artist, imageUrl, duration, likedByList]. Duplicate IDs are ignored within the new list.

Parameter Type
list list

4. AddMusicItemWithId

Adds a music item with a unique ID, image, title, artist, duration, and a list of users who liked it. Duplicates (same ID) are ignored.

Parameter Type
id text
image text
title text
artist text
duration text
likedBy list

5. AddMusicItemWithLikesJson

Adds a music item with a unique ID, image, title, artist, duration, and a JSON string representing the list of users who liked it. Duplicates (same ID) are ignored.

Parameter Type
id text
image text
title text
artist text
duration text
likedByJson text

6. AddMusicItem

Legacy: Adds a music item without ID.

Parameter Type
image text
title text
artist text
duration text
liked boolean

7. AddMusicItemWithLikes

Legacy: Adds a music item without ID. Duplicates (same title & artist) are ignored.

Parameter Type
image text
title text
artist text
duration text
likedBy list

8. AddItem

Legacy: Adds an item (image, title, subtitle).

Parameter Type
image text
title text
subtitle text

9. ClearList

Clears all items and image cache.

10. RemoveItem

Removes item at the specified 1‑based position.

Parameter Type
position number

11. UpdateMusicItemWithLikes

Updates an existing music item with new likedBy list. Position is 1‑based.

Parameter Type
position number
image text
title text
artist text
duration text
likedBy list

12. UpdateMusicItem

Updates an existing music item with simple liked flag (for current user). Position is 1‑based.

Parameter Type
position number
image text
title text
artist text
duration text
liked boolean

13. SetLikedBy

Sets the list of users who liked the specified item. Position is 1‑based.

Parameter Type
position number
likedBy list

14. GetLikedBy

Returns the list of users who liked the specified item. Position is 1‑based.

  • Return type: list
Parameter Type
position number

15. GetLikedByJson

Returns the list of users who liked the specified item as a JSON string. Position is 1‑based.

  • Return type: text
Parameter Type
position number

16. SetPlaying

Sets the playing state of the item at the given 1‑based position (true = playing, false = paused).

Parameter Type
position number
playing boolean

17. GetPlaying

Returns the playing state of the item at the given 1‑based position.

  • Return type: boolean
Parameter Type
position number

18. SelectItemByIdTitleArtist

Selects the item matching the given id, title, and artist and optionally scrolls to it.

Parameter Type
id text
title text
artist text
scrollToIt boolean

19. SelectItemWithPlaying

Selects the item at the given 1‑based position, sets its playing state, and optionally scrolls to it.

Parameter Type
position number
playing boolean
scrollToIt boolean

20. SelectItemByIdTitleArtistWithPlaying

Selects the item matching id, title, artist, sets its playing state, and optionally scrolls to it.

Parameter Type
id text
title text
artist text
playing boolean
scrollToIt boolean

21. Search

Filters the list by query (case‑insensitive) on title and artist. Empty query shows all items.

Parameter Type
query text

22. SelectItem

Selects the item at the given 1‑based position and optionally scrolls to it.

Parameter Type
position number
scrollToIt boolean

23. ScrollToPosition

Scrolls the list to make the given 1‑based position visible.

Parameter Type
position number

24. ScrollToBottom

Scrolls the list to the last item.

Designer:

ListViewImageText has total 40 designer properties.

1. HighlightColor

  • Input type: color
  • Default value: E0E0E0

2. RowHeight

  • Input type: non_negative_integer
  • Default value: 0

3. ImageWidth

  • Input type: non_negative_integer
  • Default value: 64

4. ImageHeight

  • Input type: non_negative_integer
  • Default value: 64

5. CornerRadius

  • Input type: non_negative_integer
  • Default value: 0

6. TitleTextColor

  • Input type: color
  • Default value: 000000

7. TitleFontSize

  • Input type: float
  • Default value: 16.0

8. TitleFontTypeface

  • Input type: typeface
  • Default value: 0

9. TitleFontBold

  • Input type: boolean
  • Default value: False

10. TitleFontItalic

  • Input type: boolean
  • Default value: False

11. TitleHTML

  • Input type: boolean
  • Default value: false

12. ArtistTextColor

  • Input type: color
  • Default value: 444444

13. ArtistFontSize

  • Input type: float
  • Default value: 14.0

14. ArtistFontTypeface

  • Input type: typeface
  • Default value: 0

15. ArtistFontBold

  • Input type: boolean
  • Default value: False

16. ArtistFontItalic

  • Input type: boolean
  • Default value: False

17. ArtistHTML

  • Input type: boolean
  • Default value: false

18. DurationTextColor

  • Input type: color
  • Default value: 888888

19. DurationFontSize

  • Input type: float
  • Default value: 12.0

20. DurationFontTypeface

  • Input type: typeface
  • Default value: 0

21. DurationFontBold

  • Input type: boolean
  • Default value: False

22. DurationFontItalic

  • Input type: boolean
  • Default value: False

23. DownloadButtonText

  • Input type: string
  • Default value: ?

24. LikeButtonText

  • Input type: string
  • Default value: ?

25. LikedButtonText

  • Input type: string
  • Default value: ?

26. PlayIconText

  • Input type: string
  • Default value: ?

27. PauseIconText

  • Input type: string
  • Default value: ?

28. DownloadButtonColor

  • Input type: color
  • Default value: 000000

29. LikeButtonColor

  • Input type: color
  • Default value: 000000

30. LikedButtonColor

  • Input type: color
  • Default value: FF0000

31. PlayButtonColor

  • Input type: color
  • Default value: 000000

32. ButtonTextSize

  • Input type: float
  • Default value: 18.0

33. ScrollAnimationEnabled

  • Input type: boolean
  • Default value: True

34. BackgroundColor

  • Input type: color
  • Default value: FFFFFF

35. DividerColor

  • Input type: color
  • Default value: FFFFFF

36. DividerHeight

  • Input type: non_negative_integer
  • Default value: 1

37. ImageSide

  • Input type: integer
  • Default value: 1

38. PlaceholderImageUrl

  • Input type: string
  • Default value: https://cdn-icons-png.flaticon.com/512/7500/7500224.png

39. ErrorImageUrl

  • Input type: string
  • Default value: https://cdn-icons-png.flaticon.com/512/2748/2748558.png

40. GenericImageUrl

  • Input type: string
  • Default value: https://cdn-icons-png.flaticon.com/512/7500/7500224.png

Setters:

ListViewImageText has total 41 setter properties.

1. CurrentUser

Sets the current username for like detection.

  • Input type: text

2. HighlightColor

Background color of the selected item.

  • Input type: number

3. RowHeight

Sets the row height in pixels (0 = wrap content).

  • Input type: number

4. ImageWidth

Sets the image width in pixels.

  • Input type: number

5. ImageHeight

Sets the image height in pixels.

  • Input type: number

6. CornerRadius

Sets the corner radius for images in pixels (0 = square).

  • Input type: number

7. TitleTextColor

Sets the title text color.

  • Input type: number

8. TitleFontSize

Sets the title font size in sp.

  • Input type: number

9. TitleFontTypeface

Sets the title font typeface.

  • Input type: text

10. TitleFontBold

Sets whether the title is bold.

  • Input type: boolean

11. TitleFontItalic

Sets whether the title is italic.

  • Input type: boolean

12. TitleHTML

Sets whether the title text should be interpreted as HTML.

  • Input type: boolean

13. ArtistTextColor

Sets the artist text color.

  • Input type: number

14. ArtistFontSize

Sets the artist font size in sp.

  • Input type: number

15. ArtistFontTypeface

Sets the artist font typeface.

  • Input type: text

16. ArtistFontBold

Sets whether the artist text is bold.

  • Input type: boolean

17. ArtistFontItalic

Sets whether the artist text is italic.

  • Input type: boolean

18. ArtistHTML

Sets whether the artist text should be interpreted as HTML.

  • Input type: boolean

19. DurationTextColor

Sets the text color for the duration field.

  • Input type: number

20. DurationFontSize

Sets the text size (in sp) for the duration field.

  • Input type: number

21. DurationFontTypeface

Sets the font typeface for the duration field.

  • Input type: text

22. DurationFontBold

Sets whether the duration is bold.

  • Input type: boolean

23. DurationFontItalic

Sets whether the duration is italic.

  • Input type: boolean

24. DownloadButtonText

Text for the download button (Material icon or custom).

  • Input type: text

25. LikeButtonText

Text for the like button when not liked.

  • Input type: text

26. LikedButtonText

Text for the like button when liked.

  • Input type: text

27. PlayIconText

Text for the play icon (Material icon).

  • Input type: text

28. PauseIconText

Text for the pause icon (Material icon).

  • Input type: text

29. DownloadButtonColor

Color for the download button.

  • Input type: number

30. LikeButtonColor

Color for the like button when not liked.

  • Input type: number

31. LikedButtonColor

Color for the like button when liked.

  • Input type: number

32. PlayButtonColor

Color for the play/pause button.

  • Input type: number

33. ButtonTextSize

Text size for download/like/play buttons (in sp).

  • Input type: number

34. ScrollAnimationEnabled

Enable/disable slide-in animation when items become visible.

  • Input type: boolean

35. BackgroundColor

Background color of the list.

  • Input type: number

36. DividerColor

Sets the divider color.

  • Input type: number

37. DividerHeight

Sets the divider height in pixels.

  • Input type: number

38. ImageSide

Sets image side: 1=Left, 2=Right.

  • Input type: number

39. PlaceholderImageUrl

Sets the placeholder image URL shown while loading.

  • Input type: text

40. ErrorImageUrl

Sets the error image URL shown when loading fails.

  • Input type: text

41. GenericImageUrl

Sets the generic image URL used when an item’s image URL is empty.

  • Input type: text

Getters:

ListViewImageText has total 42 getter properties.

1. CurrentUser

Sets the current username for like detection.

  • Return type: text

2. SelectedPosition

Returns the currently selected position (1‑based, -1 if none).

  • Return type: number

3. HighlightColor

Background color of the selected item.

  • Return type: number

4. RowHeight

Sets the row height in pixels (0 = wrap content).

  • Return type: number

5. ImageWidth

Sets the image width in pixels.

  • Return type: number

6. ImageHeight

Sets the image height in pixels.

  • Return type: number

7. CornerRadius

Sets the corner radius for images in pixels (0 = square).

  • Return type: number

8. TitleTextColor

Sets the title text color.

  • Return type: number

9. TitleFontSize

Sets the title font size in sp.

  • Return type: number

10. TitleFontTypeface

Sets the title font typeface.

  • Return type: text

11. TitleFontBold

Sets whether the title is bold.

  • Return type: boolean

12. TitleFontItalic

Sets whether the title is italic.

  • Return type: boolean

13. TitleHTML

Sets whether the title text should be interpreted as HTML.

  • Return type: boolean

14. ArtistTextColor

Sets the artist text color.

  • Return type: number

15. ArtistFontSize

Sets the artist font size in sp.

  • Return type: number

16. ArtistFontTypeface

Sets the artist font typeface.

  • Return type: text

17. ArtistFontBold

Sets whether the artist text is bold.

  • Return type: boolean

18. ArtistFontItalic

Sets whether the artist text is italic.

  • Return type: boolean

19. ArtistHTML

Sets whether the artist text should be interpreted as HTML.

  • Return type: boolean

20. DurationTextColor

Sets the text color for the duration field.

  • Return type: number

21. DurationFontSize

Sets the text size (in sp) for the duration field.

  • Return type: number

22. DurationFontTypeface

Sets the font typeface for the duration field.

  • Return type: text

23. DurationFontBold

Sets whether the duration is bold.

  • Return type: boolean

24. DurationFontItalic

Sets whether the duration is italic.

  • Return type: boolean

25. DownloadButtonText

Text for the download button (Material icon or custom).

  • Return type: text

26. LikeButtonText

Text for the like button when not liked.

  • Return type: text

27. LikedButtonText

Text for the like button when liked.

  • Return type: text

28. PlayIconText

Text for the play icon (Material icon).

  • Return type: text

29. PauseIconText

Text for the pause icon (Material icon).

  • Return type: text

30. DownloadButtonColor

Color for the download button.

  • Return type: number

31. LikeButtonColor

Color for the like button when not liked.

  • Return type: number

32. LikedButtonColor

Color for the like button when liked.

  • Return type: number

33. PlayButtonColor

Color for the play/pause button.

  • Return type: number

34. ButtonTextSize

Text size for download/like/play buttons (in sp).

  • Return type: number

35. ScrollAnimationEnabled

Enable/disable slide-in animation when items become visible.

  • Return type: boolean

36. BackgroundColor

Background color of the list.

  • Return type: number

37. DividerColor

Sets the divider color.

  • Return type: number

38. DividerHeight

Sets the divider height in pixels.

  • Return type: number

39. ImageSide

Sets image side: 1=Left, 2=Right.

  • Return type: number

40. PlaceholderImageUrl

Sets the placeholder image URL shown while loading.

  • Return type: text

41. ErrorImageUrl

Sets the error image URL shown when loading fails.

  • Return type: text

42. GenericImageUrl

Sets the generic image URL used when an item’s image URL is empty.

  • Return type: text

I modified this code because am in need of simple playlist with more features, i know this can be possible with RecyclerList but i can’t survive :laughing: so java was my last option, since my issue with music player was solve am now working on it. As of now i wasn’t able to add aia, but in few day i will.

A Spotify playlist displaying multiple songs by Teddy Misdad, including tracks titled 'Gayanorupa-O-Pokya Mac-01,' 'Baby Dubsun Desire,' and 'Sending,' with play and pause icons shown next to some tracks. (Captioned by AI)
A Spotify playlist displaying multiple songs by Teddy Misdad, including tracks titled 'Gayanorupa-O-Pokya Mac-01,' 'Baby Dubsun Desire,' and 'Sending,' with play and pause icons shown next to some tracks. (Captioned by AI)1080×1987 264 KB

When i have more time i will make it look more better but for now that’s enough for me

Aix
com.bosonshiggs.listviewimagetext.aix (40.5 KB)

Source Code
ListViewImageText.java (61.2 KB)

Thanks @Jewel for Fast CLI. The premium version did an amazing job—really fast and efficient. Great work!

4 Likes
9

I recommend opening a pull request rather than sharing the Java file directly here.

1 Like
10

Yes, Your code appears like this.

A screenshot of a computer screen displaying a web browser with multiple tabs open, showing a webpage with extensive Chinese text covering the entire visible area. (Captioned by AI)
A screenshot of a computer screen displaying a web browser with multiple tabs open, showing a webpage with extensive Chinese text covering the entire visible area. (Captioned by AI)1245×449 127 KB

or share it as text file

2 Likes
11

Okay

Here its working, strange.

Screenshot 2026-03-01 at 14-03-53
Screenshot 2026-03-01 at 14-03-531600×767 13.3 KB

I will follow Jewel’s idea

1 Like