[FREE] Custom List Picker Extension

[The_K_Studio]

Description

Custom List Picker shows different types of list picker dialog to pick a list item with customization of list picker dialog.

It is different from inbuilt list picker component, list picker component shows list items in a new activity/screen with less customization where custom list picker shows a dialog and you can customize its appearance.

Blocks

Instructions

Shows and Dismisses the list picker dialog.

Returns selection and selection index after picking

Property setter blocks to customize dialog properties.

Property getter blocks.

Sample Blocks

Default/Light Theme

Dark Theme

Version 2

Added Single Choice Picker dialog which shows a dialog with radio buttons to select a item from it and returns selected item and index.

Added Multi Choice Picker dialog which shows a dialog with check boxes to select multiple items from the list and returns a list of selected items and their indices.

For both of these dialog radio button, checkbox, positive button and negative button color is depends on your app accent color. Dialog background color depends on app theme. You can set dialog title text and positive/negative button text.

Added properties to set positive/negative button text and dialog cancellable, when set false then dialog can not be dismissed unless clicked on Cancel.

Download

AIX v2 com.thekstudio.CustomListPicker.aix (18.9 KB)

Note: It doesn't work with App Inventor Classic theme.

[TIMAI2]

Switching from using dark theme to default theme causes a dark background with black text ?

Can you add FontSize ?

can you add section height ?

[The_K_Studio]

@TIMAI2

Switching from using dark theme to default theme causes a dark background with black text ?

Yes because we are not setting background color for default theme so when you first show dark theme and switch to default theme it takes background color of dark theme. If you are trying in companion then you need to refresh it before switching.

This is not a bug, but just experimental thing.

@TIMAI2

Can you add FontSize ?

Yes, I will add.

@TIMAI2

can you add section height ?

Do you mean, height of each list item section?

[TIMAI2]

@The_K_Studio

Do you mean, height of each list item section?

Yes (irrespective of font size)

[The_K_Studio]

Okay, thanks for testing and suggestions. I will try!

[The_K_Studio]

@TIMAI2

(irrespective of font size)

Irrespective of font size? Ideally it should adjust item height as per the item font size. I have managed to do this.

[Taifun]

Thank you for your contribution
A probably better name for the SetList property might be Elements, similar to the default listpicker...
Also you might consider to add an ElementsFromString property

Elements

Specifies the list of choices to display.

ElementsFromString

Set the list of choices from a string of comma-separated values.

Taifun

[The_K_Studio]

Thanks for your suggestions. I will do this!

[The_K_Studio]

UPDATED

Added properties to set:

1. Font size,
2. Item height (set 0 for automatic),
3. Font bold,
4. Elements from string,
5. Renamed SetList to Elements.
6. AfterPicking event will now return both selection and selection index.

Added getter properties

@The_K_Studio

Property getter blocks.

Suggest any new functions or modifications.

[The_K_Studio]

UPDATED

Added dialog height property to set custom dialog height in pixels. Set 0 for automatic.

Upcoming Feature: Multiple choice list picker dialog!

[The_K_Studio]

UPDATED

@The_K_Studio

Version 2

Added Single Choice Picker dialog which shows a dialog with radio buttons to select a item from it and returns selected item and index.

Added Multi Choice Picker dialog which shows a dialog with check boxes to select multiple items from the list and returns a list of selected items and their indices.

For both of these dialog radio button, checkbox, positive button and negative button color is depends on your app accent color. Dialog background color depends on app theme. You can set dialog title text and positive/negative button text.

Added properties to set positive/negative button text and dialog cancellable, when set false then dialog can not be dismissed unless clicked on Cancel.

[Salman_Dev]

That was awesome, I love this extension.

maybe in the future you can add a TextDialog where the TextBox can be customized and can be added as much as needed.

I think it might be easier if you develop it from an existing component in ai2 so it will be more efficient

[The_K_Studio]

Thanks buddy. For showing Text dialog, DaffyDialog extension is already there. My extension focuses on list picker.

[Salman_Dev]

Oh okay then, I hope in the future there will be an extension that focuses on TextDialog made by you

[Joejsanz]

@The_K_Studio
I get this error with the app already installed.

[The_K_Studio]

@The_K_Studio

Note: It doesn't work with App Inventor Classic theme.

See this.

You need to change your app theme other than Classic.

[Joejsanz]

It works perfectly, thank you very much @The_K_Studio