[Free] PopupListView

Overview

The PopupListView is a non-visible component that creates a customizable popup dialog with a list of items. It's designed to be used in Android applications to provide a rich, interactive user interface for selecting items from a list. The extension supports:

  • A customizable list of items with multiple text fields and an image.
  • A built-in search bar to filter items.
  • Individual styling for each item's text color.
  • A fully customizable appearance for the popup dialog, list items, search bar, and buttons.
  • Two optional, fully customizable bottom buttons.

Key Features and Blocks

Adding and Managing Items

  • AddItem(mainText, subtitleText, detailText, imagePath):
    AddItem_Call_Method

Use this block to add a new item to the list. mainText, subtitleText, and detailText are the three lines of text that will be displayed. imagePath can be an asset name (e.g., "my_icon.png") or a URL (e.g., "https://example.com/image.jpg").

  • Clear():
    Clear_Call_Method

Removes all items from the list.

  • SetItemTextColor(index, mainColor, subColor, detailColor):
    SetItemTextColor_Call_Method

Changes the text colors of a specific item. The index is 1-based (the first item is index 1).

  • ClearItemTextColor(index):
    ClearItemTextColor_Call_Method

Resets the text colors of a specific item to the default component colors.

Displaying the Popup

  • Show():
    Show_Call_Method

Displays the popup dialog on the screen.

  • Hide():
    Hide_Call_Method

Closes and dismisses the popup dialog.

Event Handling

  • ItemSelected(index, mainText, subtitle, detail):
    ItemSelected_Event

This event is triggered when a user taps on an item in the list. The event returns the 1-based index of the selected item and its corresponding text content.

  • BottomButtonClicked():
    BottomButtonClicked_Event

This event is triggered when the first bottom button is clicked. Use this event to define the button's action, such as calling the Hide() block to close the popup.

  • SecondBottomButtonClicked():
    SecondBottomButtonClicked_Event

This event is triggered when the second bottom button is clicked. Use this for another action, like confirming a selection.

Customizing Appearance

The PopupListView has numerous blocks to control its appearance.

  • SetCornerRadius(radius):
    SetCornerRadius_Call_Method

Sets the rounded corner radius for the entire popup dialog.

  • SetItemCornerRadius(radius):
    SetItemCornerRadius_Call_Method

Sets the rounded corner radius for each individual list item.

  • SetInternalBackgroundColor(color):
    SetInternalBackgroundColor_Call_Method

Sets the background color of the popup.

  • SetSelectionColor(color):
    SetSelectionColor_Call_Method

Sets the background color of a list item when it is selected by the user.

  • SetListHeight(height, unit):
    SetListHeight_Call_Method

Adjusts the height of the list view area. unit can be PX or PERCENT. Use AUTO for the default behavior.

Styling Text and Images

  • SetMainTextStyle(size, color, bold):
    SetMainTextStyle_Call_Method

Sets the font size, color, and bold style for the main text of all list items. Similar blocks exist for subtitles and detail text.

  • SetTextAlignment(alignment):
    SetTextAlignment_Call_Method

Aligns all item text to the LEFT (1), CENTER (2), or RIGHT (3).

  • SetImagePosition(position):
    SetImagePosition_Call_Method

Positions the image for all list items. Valid values are left, right, or center.

  • SetImageSize(size, unit):
    SetImageSize_Call_Method

Sets the size of all images. unit can be PX or PERCENT.

  • SetImagePadding(left, top, right, bottom):
    SetImagePadding_Call_Method

Adds padding (space) around the images in pixels.

Customizing Search and Buttons

  • EnableSearchBar(enabled):
    EnableSearchBar_Call_Method

Shows or hides the search bar.

  • EnableBottomButton(enabled): Shows or hides the first bottom button.
  • SetBottomButtonStyle(...): Fully customizes the first bottom button's text, colors, and font style. A similar block exists for the second button.
  • SetDividerHeight(height): Sets the thickness of the divider lines between list items in pixels.
  • SetDividerColor(color):
    SetDividerColor_Call_Method

Sets the color of the divider lines.

Sample output:
Change image position into left side and also you can assign specific color using Index

Change image position into right side

Assign image position into center.

Sample Block code:

If you find this extension useful and wish to support further development, you can support us via:

License: Developed by Kenneth Morales using Fast builder.
You can download the aix extension provided bellow.
popuplistview aix extension Download Link:
Latest version:
com.kenmor.popuplistview.aix (24.8 KB)

8 Likes

This looks useful :smiley:

1 Like

Yeah it'll help to save space in interface.

The image is not loading. What could be the problem?