[FREE] Custom List Picker and Choice Picker Extension

The_K_Studio · June 25, 2023, 12:55pm

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.

This extension provides two separate aix files.

Custom List Picker which shows a customizable list picker dialog.

Choice Picker which shows single choice picker dialog and multi choice picker dialog.

1. Custom List Picker

Blocks

image806×1150 82.1 KB

image812×1052 80.7 KB

Preview

IMG_20240502_1304591080×1289 80.2 KB

IMG_20240502_1304431080×1261 76.1 KB

Download

Custom List Picker Aix V1: com.thekstudio.CustomListPicker.aix (18.9 KB)

2. Choice Picker

Blocks

image734×1158 72 KB

image730×1128 80.1 KB

Preview
Single Choice Picker

IMG_20240502_1305141080×1218 104 KB

Multi Choice Picker

IMG_20240502_1305301080×1194 100 KB

Download

Choice Picker Aix V1: com.thekstudio.ChoicePicker.aix (19.1 KB)

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

TIMAI2 · June 25, 2023, 1:06pm

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 · June 25, 2023, 1:10pm

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?

TIMAI2 · June 25, 2023, 1:11pm

Yes (irrespective of font size)

The_K_Studio · June 25, 2023, 1:12pm

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

The_K_Studio · June 25, 2023, 3:20pm

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

Taifun · June 25, 2023, 4:02pm

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 · June 25, 2023, 4:07pm

Thanks for your suggestions. I will do this!

The_K_Studio · June 25, 2023, 6:24pm

UPDATED

Added properties to set:

Font size,

Item height (set 0 for automatic),

Font bold,

Elements from string,

Renamed SetList to Elements.

AfterPicking event will now return both selection and selection index.

Added getter properties

Suggest any new functions or modifications.

The_K_Studio · July 2, 2023, 4:22am

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 · July 5, 2023, 11:32am

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.

image724×317 31.2 KB

IMG_20230705_1651211080×1276 96.8 KB

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.

image751×306 31.9 KB

IMG_20230705_1651041080×1292 93.1 KB

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 · July 6, 2023, 10:41am

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

blocks (1)

The_K_Studio · July 6, 2023, 10:47am

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

Salman_Dev · July 6, 2023, 11:00am

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

Joejsanz · July 18, 2023, 8:45am

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

The_K_Studio · July 18, 2023, 8:53am

See this.

You need to change your app theme other than Classic.

Joejsanz · July 18, 2023, 10:03am

It works perfectly, thank you very much @The_K_Studio

The_K_Studio · November 23, 2023, 10:54am

Updated: As requested by some user.

Carl_Aydelotte · December 12, 2023, 4:20am

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?

The_K_Studio · December 12, 2023, 7:27am

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