[FREE] Custom List Picker Extension

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

image
image

Instructions

image
Shows and Dismisses the list picker dialog.

image
Returns selection and selection index after picking

image
Property setter blocks to customize dialog properties.

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

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

Added property to set search hint text.

Download

AIX v4 CustomListPicker.aix (28.3 KB)

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

12 Likes

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

Can you add FontSize ?

can you add section height ?

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.

Yes, I will add.

Do you mean, height of each list item section?

Yes (irrespective of font size) :slight_smile:

1 Like

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

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

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

2 Likes

Thanks for your suggestions. I will do this!

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

Suggest any new functions or modifications.

2 Likes

UPDATED

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

Upcoming Feature: Multiple choice list picker dialog!

1 Like

UPDATED

2 Likes

That was awesome, I love this extension. :heart_eyes:

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 :grin: :+1:

blocks (1)

1 Like

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

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

1 Like

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

See this.

You need to change your app theme other than Classic.

2 Likes

It works perfectly, thank you very much @The_K_Studio

2 Likes

Updated: As requested by some user.

1 Like

Ugh.. I am not a fan of the other themes. I do like this extension and am building an app with it but I sure do wish there was a fix for this. The color schemes of the other themes is messing me up!

I did see that some users are requesting features.. something that would help me without having to change the Theme would be to have a way to change the text color of the hints in a text box.. is this possible?

I also notice that the Title Bar has changed when I use this extension. Any way to edit the text size?

Hi, for which dialog you are trying to set theme colors?