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

[Passos_0213]

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…

---

Specifications

---

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

---

2. Basic Blocks

Events:

ListViewImageText has total 2 events.

1. Click

Fired when an item is clicked

Parameter	Type
position	number
title	text
subtitle	text
image	text

2. LongClick

Fired when an item is long-clicked

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

Parameter	Type
container	any

2. AddItem

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

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.

Parameter	Type
list	list

4. ClearList

Clears all items and cache

5. RemoveItem

Removes item at the specified position

Parameter	Type
position	number

6. UpdateItem

Updates existing item, uses generic image if URL empty.

Parameter	Type
position	number
image	text
title	text
subtitle	text

7. Search

Filters list by query (case-insensitive)

Parameter	Type
query	text

Designer:

ListViewImageText has total 14 designer properties.

1. GenericImageUrl

• Input type: string

2. TitleHTML

• Input type: boolean
• Default value: false

3. SubtitleHTML

• Input type: boolean
• Default value: false

4. BackgroundColor

• Input type: color
• Default value: &H00FFFFFF

5. TitleFontBold

• Input type: boolean
• Default value: False

6. SubtitleFontBold

• Input type: boolean
• Default value: False

7. TitleFontItalic

• Input type: boolean
• Default value: False

8. SubtitleFontItalic

• Input type: boolean
• Default value: False

9. TitleFontSize

• Input type: float
• Default value: 16.0

10. SubtitleFontSize

• Input type: float
• Default value: 14.0

11. SubtitleFontTypeface

• Input type: typeface
• Default value: 0

12. TitleFontTypeface

• Input type: typeface
• Default value: 0

13. TitleTextColor

• Input type: color
• Default value: &HFF000000

14. SubTitleTextColor

• 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.

• Input type: text

2. DividerColor

Divider color of the list

• Input type: number

3. DividerHeight

Divider height in pixels

• Input type: number

4. ImageSide

Sets image side: 1=Left,2=Right

• Input type: number

5. ItemSize

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

• Input type: number

6. TitleColor

Title text color

• Input type: number

7. SubtitleColor

Subtitle text color

• Input type: number

8. TitleFontBold

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

• Input type: boolean

9. SubtitleFontBold

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

• Input type: boolean

10. TitleFontItalic

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

• Input type: boolean

11. SubtitleFontItalic

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

• Input type: boolean

12. TitleFontSize

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

• Input type: number

13. SubtitleFontSize

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

• Input type: number

14. SubtitleFontTypeface

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

• Input type: text

15. TitleFontTypeface

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

• Input type: text

Getters:

ListViewImageText has total 9 getter properties.

All blocks

Examples

[JEWEL (Extension Developer 🧩)]

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

[Still-learning (1-2-3-4...)]

Welldone for this extension!!

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

[Passos_0213]

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

[The_K_Studio (Karan M.)]

I don’t see anything new from already existing one

[FREE] Image List Viewer Extension - A Fully Customizable List View with...

[Passos_0213]

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.

[husnain_bashir (Edu Pakistan)]

Thanks a lot for your contributions