B4A Library [B4X] [XUI] AS Settings

Introducing a new library that allows you to create your own settings page with minimal code. This library comes equipped with automatic saving and loading features, making it incredibly easy to manage your settings. It supports booleans, free text, numbers, comboboxes, action buttons and more, giving you a wide range of options to customize your settings page. With this library, you can quickly and easily create a professional-looking settings page for your application or app without having to worry about complicated coding.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)

The library is still in a beta phase, things can still change and there are still bugs that need to be fixed.

0rd1h6TCbjutla3ADFpfnlNKLNLonsrapOqePHBJZJ9A3UGOd8.png
FTZzgV4CZDcESNrYZIq5EviLuJFH2gGZ8o09ODFHc5Fe4IrWdZ.png

It uses conditional symbols in order to avoid adding dependencies when a feature is not required.

Feature
Tutorial
Comments
Boolean
1707943894885.png
Action
1707944593392.png
ActionClean
1707945094272.png
Text
1707945883946.png
ComboBox
AS_SettingsComboBoxExample.gif
SelectionList
(58) mage.png
SegmentedTab
68Gwy24byC6t25EmoUFMaYjmLsEYswKie0vfOyuZOTV6f7d8za.jpeg
PlusMinus
v0BTloye7NooRlNQ2mttxAJNMxCj91k9VvdTs8NrvBMGG3gj2b.jpeg
DatePicker
1691938825906.png
TimePicker
1691938910255.png
DescriptionItem
1707947177351.png

Examples:
B4X:
    AS_Settings1.MainPage.AddGroup("Basic","Basic Settings")
 
    AS_Settings1.MainPage.AddDescriptionItem("","Show sync help: when enabled, you'll see an explanation alert every time you tap 'Sync' on the Today tab.")
 
    'Boolean
    AS_Settings1.MainPage.AddProperty_Boolean("Basic","PropertyName_1","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    AS_Settings1.MainPage.AddProperty_Boolean("Basic","PropertyName_2","Boolean Property False","Description Long Long Long Long Long Long Long Long Long Long Long Long Long Long Test Text",Null,False)

    AS_Settings1.MainPage.AddProperty_Boolean("Basic","PropertyName_3","Boolean Property True with a long text","",Null,True)
    'Action Button
    AS_Settings1.MainPage.AddProperty_Action("Basic","PropertyName_4","Action Property","",Null,"English")
    AS_Settings1.MainPage.AddProperty_Action("Basic","PropertyName_5","Icon","",AS_Settings1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White),"English, German, Italian, Spanish, Swedish")
    AS_Settings1.MainPage.AddProperty_ActionClean("Basic","PropertyName_6","Delete Account","",AS_Settings1.FontToBitmap(Chr(0xE92B),True,34,xui.Color_White))
    AS_Settings1.MainPage.AddProperty_Action("Basic","PropertyName_7","Pro Feature","",Null,"Pro")
 
    AS_Settings1.MainPage.AddGroup("Advanced","Advanced Settings")
 
    'Numeric Example
    AS_Settings1.MainPage.AddProperty_Text("Advanced","PropertyName_8","Text Example","",Null,"Test",100dip,AS_Settings1.InputType_Text)
    AS_Settings1.MainPage.AddProperty_Text("Advanced","PropertyName_9","Numeric Example","",Null,24,60dip,AS_Settings1.InputType_Numeric)
    AS_Settings1.MainPage.AddProperty_Text("Advanced","PropertyName_10","Decimal Example","",Null,24.24,100dip,AS_Settings1.InputType_Decimal)
    'ComboBox
    AS_Settings1.MainPage.AddProperty_ComboBox("Advanced","PropertyName_11","ComboBox Example","",Null,1,Array("Option 1","Option 2","Option 3","Option 4"))
 
    AS_Settings1.MainPage.BottomText = "Alexander Stolte" & CRLF & "V1.0.2"
 
    AS_Settings1.MainPage.Create
 
 
    'Second Page
    SettingPage2.Initialize(AS_Settings1,"Page #2")
 
    SettingPage2.AddGroup("Page2","Page 2 Settings")
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_1","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_2","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_30","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_31","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_32","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_33","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
    SettingPage2.AddProperty_Boolean("Page2","PropertyName_34","Overview in the morning","Your goals for today: Goal1, Goal2, Goal3",Null,True)
Get and Set Properties at every place in your app:
'You can call this anywhere in your app without initializing the view first
AS_Properties.GetProperty("PropertyName_1")
AS_Properties.GetPropertyDefault("PropertyName_1",True)
AS_Properties.PutProperty("PropertyName_1",True)
B4j: jXUI,jSQL,xCustomListView,XUI Views
B4a: XUi,SQL,xCustomListView,XUI Views
B4i: iXUI,iSQL,xCustomListView,XUI Views
AS_Settings
Author: Alexander Stolte
Version: 1.00
  • ASSettings_CustomDrawProperty
    • Fields:
      • Group As ASSettings_Group
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Property As ASSettings_Property
      • PropertySettingViews As ASSettings_PropertySettingViews
      • PropertyViews As ASSettings_PropertyViews
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSettings_Group
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Key As String
      • Name As String
      • Properties As List
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSettings_Property
    • Fields:
      • DisplayName As String
      • Group As ASSettings_Group
      • Icon As B4XBitmap
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • isLast As Boolean
      • ItemList As List
      • PropertyName As String
      • Value As Object
      • ValueType As String
      • ValueTypeTextProperties As ASSettings_ValueTypeTextProperties
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSettings_PropertySettingViews
    • Fields:
      • ActionButtonArrowLabel As B4XView
      • ActionValueLabel As B4XView
      • BackgroundPanel As B4XView
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSettings_PropertyViews
    • Fields:
      • BackgroundPanel As B4XView
      • IconImageView As B4XView
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NameLabel As B4XView
      • RootBackgroundPanel As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSettings_ValueTypeTextProperties
    • Fields:
      • Color As Int
      • CornerRadius As Float
      • Height As Float
      • InputType As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • Width As Float
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_Properties
    • Functions:
      • GetProperty (PropertyName As String) As Object
      • GetPropertyDefault (PropertyName As String, DefaultValue As Object) As Object
        Gets a property value, if no value has been stored by this property yet, the default value is returned
      • Initialize As String
      • process_globals
      • PutProperty (PropertyName As String, Value As Object) As String
  • AS_Settings
    • Events:
      • ActionClicked (Property As ASSettings_Property)
      • CustomDrawProperty (CustomDrawProperty As ASSettings_CustomDrawProperty)
      • ValueChanged (Property As ASSettings_Property, Value As Object)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddGroup (Key As String, Name As String) As String
      • AddProperty_Action (GroupKey As String, PropertyName As String, DisplayName As String, Icon As B4XBitmap, DefaultValue As Object) As String
      • AddProperty_ActionClean (GroupKey As String, PropertyName As String, DisplayName As String, Icon As B4XBitmap) As String
      • AddProperty_Boolean (GroupKey As String, PropertyName As String, DisplayName As String, Icon As B4XBitmap, DefaultValue As Boolean) As String
        <code>AS_Settings1.AddProperty_Boolean("General","PropertyName_1","Boolean Property True",Null,True)</code>
      • AddProperty_ComboBox (GroupKey As String, PropertyName As String, DisplayName As String, Icon As B4XBitmap, DefaultValue As String, ItemList As List) As String
      • AddProperty_Text (GroupKey As String, PropertyName As String, DisplayName As String, Icon As B4XBitmap, DefaultValue As Object, Width As Float, InputType As String) As String
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • Create
      • CreateASSettings_CustomDrawProperty (Group As ASSettings_Group, Property As ASSettings_Property, PropertyViews As ASSettings_PropertyViews, PropertySettingViews As ASSettings_PropertySettingViews) As ASSettings_CustomDrawProperty
      • CreateASSettings_Group (Key As String, Name As String, Properties As List) As ASSettings_Group
      • CreateASSettings_Property (PropertyName As String, DisplayName As String, Icon As B4XBitmap, ValueType As String, Value As Object, ItemList As List, ValueTypeTextProperties As ASSettings_ValueTypeTextProperties) As ASSettings_Property
      • CreateASSettings_PropertySettingViews (BackgroundPanel As B4XView, ActionButtonArrowLabel As B4XView, ActionValueLabel As B4XView) As ASSettings_PropertySettingViews
      • CreateASSettings_PropertyViews (RootBackgroundPanel As B4XView, BackgroundPanel As B4XView, IconImageView As B4XView, NameLabel As B4XView) As ASSettings_PropertyViews
      • CreateASSettings_ValueTypeTextProperties (Width As Float, Height As Float, xFont As B4XFont, TextColor As Int, Color As Int, InputType As String, CornerRadius As Float) As ASSettings_ValueTypeTextProperties
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
      • getBackgroundColor As Int
      • getCornerRadius As Int
      • getGroupHeight As Float
      • getGroupNameBackgroundColor As Int
      • getHapticFeedback As Boolean
      • getInputType_Decimal As String
      • getInputType_Numeric As String
      • getInputType_Text As String
      • getPadding As Float
      • getPropertyColor As Int
      • getPropertyHeight As Float
      • getPropertySeperator As Boolean
      • getPropertySeperatorColor As Int
      • getSaveMode As String
        <code>AS_Settings1.SaveMode = AS_Settings1.SaveMode_Automatic</code>
      • getSaveMode_Automatic As String
      • getSaveMode_Manual As String
      • getSwitchFalseColor As Int
      • getSwitchThumbColor As Int
      • getSwitchTrueColor As Int
      • getValueType_Action As String
        Displays an arrow, the user can click on it and can be redirected to another page
      • getValueType_ActionClean As String
        Same as Action, but without an arrow and description
      • getValueType_Boolean As String
        Switch or Checkbox
      • getValueType_ComboBox As String
        Mit hoch Runter Icon
      • getValueType_Custom As String
      • getValueType_Text As String
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Refresh As String
      • setBackgroundColor (Color As Int) As String
        Background Color of the view
      • setCornerRadius (Radius As Int) As String
        The corner radius of a group
      • setGroupHeight (Height As Float) As String
        Height of a group name
      • setGroupNameBackgroundColor (Color As Int) As String
        The Background Color of the group name
      • setHapticFeedback (Enabled As Boolean) As String
        Haptic feedback of the switches and click actions
      • setPadding (Padding As Float) As String
        The Padding Left and Right
        Default value: 10dip
      • setPropertyColor (Color As Int) As String
        Background Color of a property
      • setPropertySeperator (Show As Boolean) As String
        If true a seperator is shown under a property
      • setPropertySeperatorColor (Color As Int) As String
        Color of the seperator
      • setSaveMode (Mode As String) As String
      • setSwitchFalseColor (Color As Int) As String
      • setSwitchThumbColor (Color As Int) As String
      • setSwitchTrueColor (Color As Int) As String
    • Properties:
      • BackgroundColor As Int
        Background Color of the view
      • CornerRadius As Int
        The corner radius of a group
      • GroupHeight As Float
        Height of a group name
      • GroupNameBackgroundColor As Int
        The Background Color of the group name
      • HapticFeedback As Boolean
        Haptic feedback of the switches and click actions
      • InputType_Decimal As String [read only]
      • InputType_Numeric As String [read only]
      • InputType_Text As String [read only]
      • Padding As Float
        The Padding Left and Right
        Default value: 10dip
      • PropertyColor As Int
        Background Color of a property
      • PropertyHeight As Float [read only]
      • PropertySeperator As Boolean
        If true a seperator is shown under a property
      • PropertySeperatorColor As Int
        Color of the seperator
      • SaveMode As String
        <code>AS_Settings1.SaveMode = AS_Settings1.SaveMode_Automatic</code>
      • SaveMode_Automatic As String [read only]
      • SaveMode_Manual As String [read only]
      • SwitchFalseColor As Int
      • SwitchThumbColor As Int
      • SwitchTrueColor As Int
      • ValueType_Action As String [read only]
        Displays an arrow, the user can click on it and can be redirected to another page
      • ValueType_ActionClean As String [read only]
        Same as Action, but without an arrow and description
      • ValueType_Boolean As String [read only]
        Switch or Checkbox
      • ValueType_ComboBox As String [read only]
        Mit hoch Runter Icon
      • ValueType_Custom As String [read only]
      • ValueType_Text As String [read only]
Changelog
  • 1.00
    • Release
  • 1.01 (read more)
    • AS_Settings
      • BugFixes
      • Add AddProperty_SegmentedTab - You can now add the AS_SegmentedTab
      • Add AddProperty_PlusMinus - You can now add the AS_PlusMinus
      • Add get ValueTypeTextProperties - Change the appearance of the text edits
      • Breaking Change - Add Description Property to all AddProperty_ functions
        • You can now display a short descripton to your properties
      • Add Designer Property ShowMadeWithLove - Shows the Made with Love in B4X Badge at the end of the list
        • Default: False
      • Add Designer Property MadeWithLoveTextColor - Text Color of the Made with Love Badge
        • Default: White
      • Add Designer Property BottomText - a custom text on the end of the list
        • Default: ""
      • Add Designer Property BottomTextTextColor
        • Default: White
    • AS_Properties
      • Add RemoveProperty - Removes a property from the db
      • Add ClearProperties - Clears all properties from the db
  • 1.02 (read more)
    • AS_Properties
      • Breaking change - For the intern database i'm now using the KeyValueStore lib.
        • This means that all settings are reset by the update
      • ClearProperties renamed to DeleteAllProperties
      • Add get KeyValueStore
    • AS_Settings
      • BugFixes in Property_SegmentedTab
        • AS_SegmentedTab V1.18+ needed
      • Add AddProperty_Chooser - looks like an AddProperty_Text, but is a label with click event
      • Add Event ChooserTextFieldClicked - Is triggered when you click on an AddProperty_Chooser
      • Add AddProperty_Custom - Is a CustomDrawProperty field, the CustomDrawProperty event is triggered, there you can add your own layout
      • Add Event CustomDrawProperty - You can now add your custom property layout
      • Add CustomDrawProperty_Add - You can add any view with this function and It is automatically added to the layout, you don't have to worry about where to put it
      • Add CustomDrawProperty_AddChooser - A chooser view is created
      • Add CustomDrawProperty_AddText - A simple text item
  • 1.03
    • AS_Settings
      • Add ResetGroups - Removes the groups, so that you can fill the view with new groups, without the groups that were previously visible
  • 1.04
    • AS_Settings
      • Description BugFixes
  • 1.05
    • AS_Settings (read more)
      • B4J Focused TextField at start bugfix
      • Add SetProperty_Boolean - Sets the value of a property as if the user had clicked the switch
        • The _ValueChanged event is triggered
      • Add GetProperty - Gets the property object
  • 2.00 (read more)
    • AS_Settings
      • Add AddSpaceItem
      • Add AddDescriptionItem
      • Add multi page support
      • Events should be added again, as all type names have changed
  • 2.01 (read more)
    • AS_SettingsPage
      • Add AddProperty_SelectionList - You can create single choice or multiple choice options
        • MultiSelect - If true more than one item can selected. If false only one item is selected if you click, it deselect the previous item
        • CanDeselectAll - If false, then the last item cannot be deselected, it need min one selected
    • AS_Settings
      • Add Designer Property SelectionItemSelectionColor - Color of the selection indicator
        • Default: White
      • Add Type AS_Settings_Property_SelectionList
      • Add Type AS_Settings_SelectionListItem
      • Add CreateSelectionListItem - Needed to build the items
  • 2.02
    • AS_SettingsPage
      • Added seperators to the SelectionList property
      • The ValueChanged event works now with the SelectionList Property
      • The .Refresh function is now smooth
      • BugFixes on the PropertyName height and Description height
  • 2.03 (read more)
    • AS_Settings
      • BugFixes and Improvemets
      • Add CreateList - Creates an list with just one line of code
      • Add Designer Property PropertyTextColor
      • Add set Theme
      • Add get Theme_Dark
      • Add get Theme_Light
      • Add Designer Property ThemeChangeTransition
        • Default: Fade
  • 2.04
    • AS_SettingsPage
      • if you now specify your own width for the property AddProperty_Text, you can now use more space
      • BugFixes
  • 2.05
    • AS_SettingsPage
      • SelectionList is now using more space
      • Add Property Custom
      • Add Event CustomDrawCustomProperty
    • AS_Settings
      • Add Event GroupHeaderClicked
  • 2.06
    • AS_SettingsPage
      • Add AddProperty_ComboBox2 - The value is displayed in the ComboBox and the key is used for selection and stored in the database
    • AS_Properties
      • Add SetDefaultValue - Defines the default value globally for this property
        • You can call GetProperty and this specified value is taken as the default value
        • No need to call GetPropertyDefault anymore
      • Add GetDefaultValue - Returns the default value that was set with SetDefaultValue
  • 2.07
    • AS_SettingsPage
      • BugFix on Refresh
  • 2.08
    • AS_SettingsPage
      • BugFix - The ComboBox display text can now be multiline
Have Fun :)
 

Attachments

  • AS Settings Example.zip
    179 KB · Views: 312
  • AS_Settings.b4xlib
    22.1 KB · Views: 36
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Planned features
  • Custom Views
    • Offer the possibility to integrate your own views
    • 1681481068479.png
  • ✅AS_SegmentedTab
    • 1681480967212.png
  • ✅AS_PlusMinus
    • 1681481168785.png
  • ✅Property Description
    • 1681481132400.png
  • Orientation changes
  • Another view with which it should be possible to select multiple choices, another page when you have clicked on an action button
 
Last edited:

GMan

Well-Known Member
Licensed User
Longtime User
Just have an App completed with my old, time-expensive Setup-Enchilada.🙄

Will give yours a try in the next version 🤘

And as always - good job 🤩
 

Alexander Stolte

Expert
Licensed User
Longtime User
pls add ip setting.
IP Setting ?
You can already store IP addresses. The only question is how you will let the user change them.
There are 3 possibilities:
-With the TextField
-ActionButton and open another page where the user can then select or enter the IP
-ComboBox where he can select one of the IP addresses
 

Xfood

Expert
Licensed User
congratulations, fantastic idea and fantastic library, it would be nice to add:
1- color selector,
2- date selector,
3- time selector
 

GMan

Well-Known Member
Licensed User
Longtime User
Give all ;-)
 

AnandGupta

Expert
Licensed User
Longtime User
Month, Year selector.

Example subscription paid from Apr 2023 to Mar 2024. Here we just need drop down for month and year, and not a full date calendar.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • AS_Settings
      • BugFixes
      • Add AddProperty_SegmentedTab - You can now add the AS_SegmentedTab
      • Add AddProperty_PlusMinus - You can now add the AS_PlusMinus
      • Add get ValueTypeTextProperties - Change the appearance of the text edits
      • Breaking Change - Add Description Property to all AddProperty_ functions
        • You can now display a short descripton to your properties
      • Add Designer Property ShowMadeWithLove - Shows the Made with Love in B4X Badge at the end of the list
        • Default: False
      • Add Designer Property MadeWithLoveTextColor - Text Color of the Made with Love Badge
        • Default: White
      • Add Designer Property BottomText - a custom text on the end of the list
        • Default: ""
      • Add Designer Property BottomTextTextColor
        • Default: White
    • AS_Properties
      • Add RemoveProperty - Removes a property from the db
      • Add ClearProperties - Clears all properties from the db
AddProperty_SegmentedTab
68Gwy24byC6t25EmoUFMaYjmLsEYswKie0vfOyuZOTV6f7d8za.jpeg

AddProperty_PlusMinus
v0BTloye7NooRlNQ2mttxAJNMxCj91k9VvdTs8NrvBMGG3gj2b.jpeg

Add Description Property to all AddProperty_ functions
nn0OHauGexwkO9TVHgvbuCRjA3033T0QuZnqxepf36o0KnoGFH.jpeg

ShowMadeWithLove and BottomText
p6L8GayVdNJHsCiFLINZQeJRVEkwvZTlJESCmSnEgVUf6gdgFG.jpeg
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.02
    • AS_Properties
      • Breaking change - For the intern database i'm now using the KeyValueStore lib.
        • This means that all settings are reset by the update
      • ClearProperties renamed to DeleteAllProperties
      • Add get KeyValueStore
    • AS_Settings
      • BugFixes in Property_SegmentedTab
        • AS_SegmentedTab V1.18+ needed
      • Add AddProperty_Chooser - looks like an AddProperty_Text, but is a label with click event
      • Add Event ChooserTextFieldClicked - Is triggered when you click on an AddProperty_Chooser
      • Add AddProperty_Custom - Is a CustomDrawProperty field, the CustomDrawProperty event is triggered, there you can add your own layout
      • Add Event CustomDrawProperty - You can now add your custom property layout
      • Add CustomDrawProperty_Add - You can add any view with this function and It is automatically added to the layout, you don't have to worry about where to put it
      • Add CustomDrawProperty_AddChooser - A chooser view is created
      • Add CustomDrawProperty_AddText - A simple text item
Version 1.02 is not compatible with version 1.01, because a new database is used internally, all previous settings are reset.

AddProperty_Chooser

1691941018088.png

Can be used to open other views so that the user can make entries

2 New Example Projects added. They show how to use the AddProperty_Chooser and AddProperty_Custom property.
 
Top