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):
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():
Removes all items from the list.
SetItemTextColor(index, mainColor, subColor, detailColor):
Changes the text colors of a specific item. The index is 1-based (the first item is index 1).
ClearItemTextColor(index):
Resets the text colors of a specific item to the default component colors.
Displaying the Popup
Show():
Displays the popup dialog on the screen.
Hide():
Closes and dismisses the popup dialog.
Event Handling
ItemSelected(index, mainText, subtitle, detail):
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():
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():
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):
Sets the rounded corner radius for the entire popup dialog.
SetItemCornerRadius(radius):
Sets the rounded corner radius for each individual list item.
SetInternalBackgroundColor(color):
Sets the background color of the popup.
SetSelectionColor(color):
Sets the background color of a list item when it is selected by the user.
SetListHeight(height, unit):
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):
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):
Aligns all item text to the LEFT (1), CENTER (2), or RIGHT (3).
SetImagePosition(position):
Positions the image for all list items. Valid values are left, right, or center.
SetImageSize(size, unit):
Sets the size of all images. unit can be PX or PERCENT.
SetImagePadding(left, top, right, bottom):
Adds padding (space) around the images in pixels.
Customizing Search and Buttons
EnableSearchBar(enabled):
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):
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)
