B4A Library ElevateUI Improve the graphic interface of your b4a applications

Hello everyone! ?

We are excited to introduce Elevate UI, a set of custom views for B4A that takes your applications to the next level. ?✨

What does Elevate UI include?

  • UIButton: Buttons with images that add a unique visual touch to your app. ?
  • PageLoadingFinished: Waiting or page loading animations that enhance the user experience. ⏳?
  • UIFloatingMenu: Sleek and easy-to-use floating menus. ?️?
  • UIComboBox: Customizable spinners to match your app's style. ??
  • UIDrawerMenu: An easy-to-create drawer menu for effortless navigation. ??
And that's not all! Elevate UI includes many more views that allow you to customize and enhance your applications in ways you never imagined. ?✨

✨ Most of these views can be added programmatically, offering flexibility and complete control over their integration. ✨

Elevate UI is designed to simplify development and improve the aesthetics of your B4A applications. We hope you enjoy using it as much as we enjoyed creating it! ?

Download: https://b4xapp.com/item/elevateui-lib-b4a-
 

fernando1987

Active Member
Licensed User
UILoadingIndicator:



PageLoadingFinished:


example:
Dim act As PageLoadingFinished
 
    ' Initialize the PageLoadingFinished instance.
    act.Initialize(Activity,Me,xui.Color_RGB(192, 157, 133))
 
    ' Start the animation.
    act.Start_Animation
 
    ' Add the title image and title text to the animation.
    act.Add_TitleImage(File.DirAssets,"address-book@512px.png","Contacts",xui.Color_White)
 
    ' Add the second page to the animation.
    act.Add_SecondPage(contacts_activity,4000)


UIEditText:




UISwich:



UIDrawerMenu:


UIDrawerMenu example::
#Region  Activity Attributes
    #FullScreen: FALSE
    #IncludeTitle: FALSE
#End Region

Sub Process_Globals

    Dim xui As XUI

 
End Sub

Sub Globals

    ' Declare variables for UI elements
    Dim d As UIDrawerMenu
 
End Sub

'''b4a
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:

    'Initialize the drawer component with the following parameters:
    ' - Me: The current activity
    ' - "Drawer": The name of the drawer component
    ' - Activity: The current activity
    ' - 85%x: The width of the drawer
    ' - 25%y: The height of the drawer
    ' - xui.Color_White: The background color of the drawer
    D.Initialize(Me, "Drawer", Activity, 85%x,25%y,xui.Color_White)
 
    'Initialize the iconfont, valsend, valcontacts, valgroup, and valtemplates components.
 
 
    UtilsUI.create_titlebar("menu",d.Centerpanel,Main.MainColor,Main.MainColor,xui.CreateFont2(iconfont.UM_Font,38),iconfont.menu,True,"Dashboard",xui.CreateFont(Typeface.LoadFromAssets("righteous-regular.ttf"),30),Colors.White)
 


End Sub


Sub Activity_Resume

 
    menu
End Sub




Sub Activity_Pause (UserClosed As Boolean)
    ' This sub is called when the activity is paused.
    ' UserClosed: True if the user closed the activity, False otherwise.
End Sub

Sub Activity_KeyPress (KeyCode As Int) As Boolean
    ' This sub is called when a key is pressed.
    ' KeyCode: The key code of the pressed key.
 
    If KeyCode = KeyCodes.KEYCODE_BACK Then
        ' If the back button is pressed and the menu is open, close the menu.
        If d.OpenMenu = True Then
            d.OpenMenu = False
        End If
        ' Return True to indicate that the key press was handled.
        Return True
    Else
        ' Return False to indicate that the key press was not handled.
        Return False
    End If

End Sub

Sub menu
    ' This sub creates the main menu of the application.
    d.addpanel_title( Main.MainColor,xui.LoadBitmap(File.DirAssets, "BULK-SMS.png"),"BULK SMS",xui.CreateFont(Typeface.LoadFromAssets("righteous-regular.ttf"),16),16,Colors.RGB(245, 227, 179))
    ' Adds menu items to the main menu.
    d.AddMenuImageItem("SendSms",File.DirAssets, "icons8_paper_plane_480px.png","Send sms",xui.Color_DarkGray,"Send bulk SMS to your group contacts",xui.Color_Gray)
    d.AddMenuImageItem("TemplatesApp",File.DirAssets, "icons8_messaging_480px_1.png","Templates",xui.Color_DarkGray,"Create and manage sms templates for your mailings",xui.Color_Gray)
    d.AddMenuImageItem("ContactApp",File.DirAssets, "address-book@512px.png","Contacts",xui.Color_DarkGray,"Manage, add and delete your contacts",xui.Color_Gray)
    d.AddMenuImageItem("GroupApp",File.DirAssets, "united.png","Groups",xui.Color_DarkGray,"Manage, add and remove your contact  groups",xui.Color_Gray)
    d.AddMenuImageItem("AboutApp",File.DirAssets, "icons8_info_480px.png","About",xui.Color_DarkGray,"information about the app",xui.Color_Gray)
    d.AddMenuImageItem("ExitApp",File.DirAssets, "icons8_close_window_480px.png","Close",xui.Color_DarkGray,"Exit the application",xui.Color_Gray)
End Sub

Private Sub SendSms_OptionMenuClicked
 
 
End Sub

Private Sub TemplatesApp_OptionMenuClicked
 
End Sub

Private Sub ContactApp_OptionMenuClicked
 
End Sub

Private Sub GroupApp_OptionMenuClicked
 
End Sub

Private Sub AboutApp_OptionMenuClicked
 
End Sub


' This routine handles the ExitApp option menu click.
Private Sub ExitApp_OptionMenuClicked
 
End Sub



' This routine handles the menu click event.
Sub menu_Click
    ' Open the menu.
    d.OpenMenu = True
End Sub


UIBtnFloating + UIBtnFloatingExtramenu:


example:
#Region  Activity Attributes
    #FullScreen: FALSE
    #IncludeTitle: FALSE
#End Region

Sub Process_Globals

 
Dim xui as xui
  
End Sub

Sub Globals

    Private btfloating1 As UIBtnFloating
    Private btmenu As UIBtnFloatingExtramenu
  
End Sub


Sub Activity_Create(FirstTime As Boolean)
  
    btfloating1.Initialize(Me,"btfloating1")
    btfloating1.AddToParent(PnlAction,85%x,57%y,6%y,6%y,MyCode.MainColor)
    btmenu.Initialize(Me,"btmenu",False,False,True,btfloating1.mBase,Root1)
    btmenu.additemIcon("Create new list",xui.Color_White,14,Chr(0xf14e),Main.materialFont,xui.Color_White,xui.Color_RGB(143, 145, 206))
    btmenu.additemIcon("New item",xui.Color_White,14,Chr(0xf64f),Main.materialFont,xui.Color_White,xui.Color_RGB(255, 209, 121))
    btmenu.additemIcon("Clear list",xui.Color_White,14,Chr(0xf6cb),Main.materialFont,xui.Color_White,xui.Color_RGB(231, 140, 151))
    btmenu.additemIcon("Reload list",xui.Color_White,14,Chr(0xf6af),Main.materialFont,xui.Color_White,xui.Color_RGB(140, 206, 239))
  
    btfloating1.Color = MyCode.MainColor
    btfloating1.lcon(xui.CreateFontAwesome(22),Chr(0xF067))
    btfloating1.mBase.BringToFront

End Sub


Sub Activity_Resume

  
End Sub




Sub Activity_Pause (UserClosed As Boolean)
    ' This sub is called when the activity is paused.
    ' UserClosed: True if the user closed the activity, False otherwise.
End Sub

Private Sub btfloating1_Clicked(open As Boolean)
  
    btmenu.show

  
End Sub


Private Sub btmenu_Clicked (item As String, index As Int)
    Try
      
  
        Log("selected itemindex: " & index)
        Log(item)
        'UPDATE AN ITEM !!!
'        btmenu.ItemLabel(index).Text = "New Item Text"
      
        If item = "Create new list" Then
          
      
        else if item = "New item" Then
          
          
          
          
        else if item = "Clear list" Then
          
          
        else if item = "Reload list" Then
              
      
        End If
    Catch
        Log(LastException)
    End Try
End Sub



UICombobox:



UIBotton:

Screenshot_20240713_192911[1].jpg
 
Last edited:

fernando1987

Active Member
Licensed User
UITabMenuAnimated

UITabMenuAnimated is a versatile and easy-to-implement component that can be added to your project in just 5 seconds using code snippets. It allows for a dynamic and interactive tab menu with the following features:

  • ? Custom Animations: Choose from four different animations (✨ Blink, ? Shake, ➡️ Slide, ? FadeIn) or select none for each individual icon. This allows for a unique and tailored user experience.
  • ? Flexible Layout: Supports configurations for either 3️⃣ or 5️⃣ elements, providing flexibility in menu design based on your application's needs.
  • ⚡ Easy Integration: Seamlessly integrates into your project, enabling a quick setup and customization process.
With UITabMenuAnimated, you can enhance your application's navigation with visually appealing animations and a user-friendly interface.



Example:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
    #BridgeLogger: True
#End Region

#Region  Activity Attributes
    #FullScreen: false
    #IncludeTitle: false
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    
    Private xui As XUI
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    
'    Private busqueda As UIEditText
    
    
End Sub

Sub Activity_Create(FirstTime As Boolean)
 Activity.LoadLayout("Layout")


    Dim TabMenuAnimated As UITabMenuAnimated
    TabMenuAnimated.Initialize(Me,Activity,5,"menu4",85%y)
    TabMenuAnimated.Add_Menu("menu1",Chr(0xF015),xui.CreateFontAwesome(20),0xFFC95AFC,"Main",TabMenuAnimated.AnimationBlink)
    TabMenuAnimated.Add_Menu("menu2",Chr(0xF17B),xui.CreateFontAwesome(20),0xFF519649,"Android",TabMenuAnimated.AnimationFadeIn)
    TabMenuAnimated.Add_Menu("menu3",Chr(0xF179),xui.CreateFontAwesome(20),0xFF6C6969,"Ios",TabMenuAnimated.AnimationShake)
    TabMenuAnimated.Add_Menu("menu4",Chr(0xF0F3),xui.CreateFontAwesome(20),0xFFF4CF4B,"alerts",TabMenuAnimated.AnimationSlide)
    TabMenuAnimated.Add_Menu("menu5",Chr(0xF129),xui.CreateFontAwesome(20),0xFF8EA7F2,"Info",TabMenuAnimated.AnimationNone)
    
    
End Sub

Sub menu1_OptionMenuClick
    Log(1)
End Sub

Sub menu2_OptionMenuClick
    Log(2)
End Sub

Sub menu3_OptionMenuClick
    Log(3)
End Sub

Sub menu4_OptionMenuClick
    Log(4)
End Sub

Sub menu5_OptionMenuClick
    Log(5)
End Sub



Sub Activity_Resume
    
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

fernando1987

Active Member
Licensed User
? Elevate UI - Version 2 is Here! ?

I’m excited to announce Version 2 of Elevate UI, a library designed to help you create visually stunning interfaces in B4A. This new version comes with code improvements for better performance and stability, as well as fixes for issues reported by users in the previous version.

? New Dialogs:

  • UIMessageBox: A sleek dialog with animations for displaying important messages.
  • UIDialog: A flexible dialog that can be customized for different use cases.
  • UIDownloadDialog: A progress dialog perfect for showing download status during lengthy tasks.
  • UIRatingDialog: An interactive dialog that lets users rate and send a message with their feedback.
  • UIColorDialog: A simple and user-friendly dialog for color selection.

?️ New View - UITimetable:

  • UITimetable is a ScrollView designed to display schedules or lists of activities organized by day and time. You can customize titles, dates, and dynamically add items to the list.

? Code Improvements:

  • Fixed minor bugs to enhance the stability of the library.
  • Optimized the code for better performance across devices of different sizes and capabilities.

? Instructions for Existing Customers:

If you’ve already purchased Elevate UI, you can download Version 2 directly from your user panel on the store where you made the purchase. Simply log in, go to the downloads section, and grab the latest update. If you encounter any issues, feel free to reach out for support.
 

fernando1987

Active Member
Licensed User
UITimeTable:
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim time As UITimeTable
End Sub

Sub Activity_Create(FirstTime As Boolean)
time.Initialize(Activity,Me,"time")

    ' Set vibrant pastel color theme for tasks
    UtilsUI.ChangeBothColor(Colors.RGB(0, 188, 213))
    time.SetTitle("CLASS SCHEDULE", Typeface.DEFAULT_BOLD, xui.Color_DarkGray)
  
  
    ' Monday Schedule with vibrant pastel colors
    time.AddClass(1,"Mathematics","Entrega del trabajo de Mate", "8:00am - 9:00am", xui.Color_RGB(241, 155, 168),"1") ' Vibrant pastel pink
    time.Addclass(1,"English","", "9:00am - 10:00am", xui.Color_RGB(96, 212, 195),"2")     ' Vibrant pastel aqua green
    time.Addclass(1,"Science","Dibujo de las partes del cuerpo humano", "10:00am - 11:00am", xui.Color_RGB(255, 224, 178),"3")   ' Vibrant pastel peach
    time.Addclass(4,"History","", "11:00am - 12:00pm", xui.Color_RGB(128, 222, 234),"4")    ' Vibrant pastel blue
    time.Addclass(5,"Art","", "12:00pm - 1:00pm", xui.Color_RGB(239, 154, 154),"5")         ' Vibrant pastel rose
'  
    ''
'    Sleep(400)
    time.UpdateClass("5","Ciencias", "12:00pm - 2:00pm", xui.Color_RGB(78, 78, 154),"hola mundo")         ' Vibrant pastel rose

'
'    ' Tuesday Schedule
'    time.SetDate(10,2024)
DateTime.DateFormat = "dd/MM/yyyy"
time.AddTask("9/12/2024", "Art","", "8:00am - 9:00am", xui.Color_RGB(96, 212, 195), "11")
time.AddTask("11/11/2024", "Mathematics","Deber de matematicas para el dia lunes y entregar trabajo del laboratorio de fisca para la materia de fisca", "8:00am - 9:00am", xui.Color_RGB(241, 155, 168), "6")  ' Vibrant pastel pink
time.AddTask("10/08/2024", "Mathematics","", "8:00am - 9:00am", xui.Color_RGB(241, 155, 168), "7")
time.AddTask("9/08/2024", "Art","", "8:00am - 9:00am", xui.Color_RGB(96, 212, 195), "8")

End sub
 
Last edited:

fernando1987

Active Member
Licensed User
UIDownloadDialog:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
    #BridgeLogger: True
#End Region

#Region  Activity Attributes
    #FullScreen: false
    #IncludeTitle: false
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer
    Dim i As Int
    Private xui As XUI
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.

    

    Dim DownloadDialog As UIDownloadDialog
End Sub

Sub Activity_Create(FirstTime As Boolean)


t.Initialize("Timer1", 300)

    ' Initialize the dialog
    DownloadDialog.Initialize(Activity, Me, "DownloadDialog")

    ' Set colors and design
    DownloadDialog.Color = xui.Color_RGB(100, 150, 250) ' Light blue background
    DownloadDialog.Title = "Database Download"
    DownloadDialog.ButtonText = "Download"
    DownloadDialog.Description = "Download the database for control management."
    DownloadDialog.StartMessage = "Downloading..."
    DownloadDialog.FinishedMessage = "File downloaded successfully."

    ' Set logo and font
    DownloadDialog.setlogo2(Chr(0xF0AB), xui.Color_RGB(75, 231, 227), xui.CreateFontAwesome(16))

    ' Set corner radius and bubble design
    DownloadDialog.CornerRadius = 12dip
    DownloadDialog.BubbleDesign = True

    ' Set button color
    DownloadDialog.ColorButton = xui.Color_RGB(50, 120, 240) ' Dark blue button

    ' Show the dialog
    DownloadDialog.Show

    ' Set button image
    DownloadDialog.setButtonImage(File.DirAssets, "descargar.png")

'

End Sub



Private Sub DownloadDialog_Submit
    t.Enabled = True
End Sub

Sub Timer1_Tick
    If i = 100 Then
        t.Enabled = False
    
    End If
    i = i + 1
    DownloadDialog.Progress = i
    
    

End Sub

 

fernando1987

Active Member
Licensed User
🌟 Elevate UI - Version 3 is here! 🌟

I am excited to announce the arrival of Version 3 of Elevate UI, the library designed to help you create visually stunning interfaces in B4A! This new version brings significant improvements and new features that will further enhance your applications.

📅 UITimetable:​

UITimetable is an innovative ScrollView specifically designed to display schedules or lists of activities organized by day and time. Here are some of its highlighted features:

  • Advanced Customization: Modify titles, dates, and styles to suit the aesthetics of your application.
  • Dynamic Elements: Add or remove items from the list in real-time, allowing for smoother interaction.
  • Intuitive Design: Present information clearly and attractively, enhancing user experience while planning their time.
  • Accessibility: Optimizations to ensure usability on devices of different sizes, guaranteeing a smooth experience for all users.

🚀 Code Improvements:​

  • Minor bugs have been fixed to enhance the stability of the library.
  • The code has been optimized for better performance on devices with varying sizes and capabilities.

📥 Instructions for Existing Customers:​

If you have already purchased Elevate UI, you can download Version 3 directly from your user panel in the store where you made the purchase. Simply log in, go to the downloads section, and get the latest update. If you encounter any issues, feel free to contact us for support.
 
Last edited:

fernando1987

Active Member
Licensed User
Note: We’ve re-uploaded the updated version to fix a code error identified post-release. Please re-download the library to ensure you have the corrected version. If you have any issues, don’t hesitate to contact us for support.

Thank you for choosing Elevate UI—here’s to creating beautiful, seamless apps together! 🌟
 

fernando1987

Active Member
Licensed User

🌟 Elevate UI - Version 4 is Here! 🌟

We are thrilled to announce the release of Version 4 of Elevate UI, the library designed to help you create visually stunning interfaces in B4A. This latest version brings significant improvements and exciting new features to take your applications to the next level.


🎨 UIIconFont with Over 2500 Icons

With the integration of JIconFont, you now have access to a collection of more than 2500 customizable icons. Adjust colors and styles to enrich your UI and enhance the user experience.

Example:
#Region  Project Attributes
    #ApplicationLabel: ElevateUI
    #VersionCode: 1
    #VersionName: 1.0.0
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: false
    #IncludeTitle: false
#End Region


Sub Process_Globals
    'Global variables.
   
End Sub

Sub Globals
    'Activity variables.
    Dim SearchText As UIEditText
    Dim font As UIIconFont
    Dim xui As XUI
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Activity initialization.
    font.Initialize
    font.FontSize = 30
    SearchText.Initialize(Me,"SearchText")
    SearchText.AddToParent(Activity,"","",10%x,10%y,80%x,45dip,xui.Color_RGB(43, 178, 178),Colors.White,Colors.DarkGray,False,True)
    SearchText.setIcon(font.IconMoonFont,Chr(0xf0e2),xui.Color_RGB(144, 176, 221))
    SearchText.IconPanelBackgroundColor = Colors.Transparent
    SearchText.TextSize = 14
    SearchText.CornerRadius = 16
    UtilsUI.ChangeBothColor(xui.Color_RGB(144, 176, 221))
   
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Screenshot_2024-11-29-01-29-39-514_b4a.app.ElevateUI.jpg


🚀 Code Improvements

  • Bug fixes: Minor issues have been resolved to improve stability.
  • Performance optimization: The code has been optimized for better performance on devices with varying screen sizes and capabilities.

📥 How to Update if You’re an Existing Customer

If you’ve already purchased Elevate UI, you can download Version 4 from your user panel in the store where you made the purchase:

  1. Log in to your account.
  2. Navigate to the downloads section.
  3. Download the latest update.
Encountering issues? Contact us for support!


🌟 NEW: Icon Selector Application

We’re excited to introduce a companion app to help you easily explore and select icons from UIIconFont!
Click the link below to download it and streamline your workflow:
Download Icon Selector App

1732843854431.png


🎁 Limited-Time Offer!
Take advantage of 50% OFF on all codes and libraries in our store until January 5, 2025! Don't miss this opportunity to expand your toolkit at half the price.

Visit b4xapp.com now and save big! 🛒
 
Last edited:

fernando1987

Active Member
Licensed User
🚀 Elevate UI v4.5 is here! 🎉

We’re excited to announce the release of Elevate UI v4.5, featuring two powerful new improvements to make building custom interfaces in B4X even easier:

✅ UICustomDialog:
Create fully customizable dialogs tailored to your needs. From simple messages to interactive forms, you now have full control over their look and behavior. 🛠️

Screenshot_2024-12-18-12-07-44-150_b4a.tareas.app.jpg


Screenshot_2024-12-18-12-08-09-413_b4a.tareas.app.jpg


✅ UICalendar:
Introducing a modern, visual calendar that’s easy to integrate. Select dates, weeks, and more, with support for advanced customization and multiple languages. 📅

Screenshot_2024-12-16-11-01-01-541_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-01-14-776_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-01-25-393_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-03-18-076_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-03-41-493_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-15-05-560_b4a.tareas.app.jpg


Screenshot_2024-12-16-11-35-23-819_b4a.tareas.app.jpg



Screenshot_2024-12-18-12-06-35-442_b4a.app.ElevateUI.jpg


✨ These new tools will help take your apps to the next level!
Elevate the user experience with flexible, modern, and functional designs.


📥 How to Update if You’re an Existing Customer

If you’ve already purchased Elevate UI, you can download Version 4 from your user panel in the store where you made the purchase:

  1. Log in to your account.
  2. Navigate to the downloads section.
  3. Download the latest update.
Encountering issues? Contact us for support!
 

Attachments

  • UICustomDialog.zip
    36.7 KB · Views: 34
Last edited:

fernando1987

Active Member
Licensed User
🚀 Elevate UI v4.5 is here! 🎉

We’re excited to announce the release of Elevate UI v4.5, featuring two powerful new improvements to make building custom interfaces in B4X even easier:

✅ UICustomDialog:
Create fully customizable dialogs tailored to your needs. From simple messages to interactive forms, you now have full control over their look and behavior. 🛠️

View attachment 159634

View attachment 159635

✅ UICalendar:
Introducing a modern, visual calendar that’s easy to integrate. Select dates, weeks, and more, with support for advanced customization and multiple languages. 📅

View attachment 159626

View attachment 159627

View attachment 159628

View attachment 159629

View attachment 159630

View attachment 159631

View attachment 159632


View attachment 159633

✨ These new tools will help take your apps to the next level!
Elevate the user experience with flexible, modern, and functional designs.


📥 How to Update if You’re an Existing Customer

If you’ve already purchased Elevate UI, you can download Version 4 from your user panel in the store where you made the purchase:

  1. Log in to your account.
  2. Navigate to the downloads section.
  3. Download the latest update.
Encountering issues? Contact us for support!
An example of use was added, the UICalendar can be added from the designer or from code like most of the views in this library
 

fernando1987

Active Member
Licensed User

🌟 Presenting ELEVATE UI Version 4.6 🎉

We are thrilled to unveil ELEVATE UI version 4.6, packed with exciting updates and features to enhance your app's user experience! 🚀 Among the highlights is the introduction of the UISelectionPage class—a powerful, customizable, and visually appealing tool for creating selection interfaces. 🎨✨


🌟 What is UISelectionPage?

The UISelectionPage class is a modern and intuitive solution designed to help users select from multiple options effortlessly. It’s ideal for scenarios like selecting a language, setting preferences, or choosing categories. 💡✅


🔥 Key Features

  1. 🎯 Dynamic and Flexible Design:
    • Add items with icons 🖼️, titles 📝, and values 📊.
    • Highlights the selected item visually for better interaction.
  2. 📢 Event Support:
    • ButtonClick: Triggered when the action button is clicked, returning the selected item’s index and value.
    • ButtonClick2: Similar to ButtonClick but returns the selected item’s index and name.
  3. 🎨 Advanced Customization:
    • Header Styling: Set text, color, and font for the page header. 🖋️
    • Button Appearance: Configure text, color, and elevation for the action button. 🔘
  4. 📌 Intuitive Selection Management:
    • Automatically highlights the selected item and maintains its state.
    • Supports selecting items programmatically based on their value or index.
  5. ⏬ Smooth Scrolling:
    • Automatically scrolls to the selected item for a seamless experience.

👩‍💻 Example Usage

Here’s how you can quickly set up a selection page using UISelectionPage:
1000018583.jpg

Example:
Dim selectionPage As UISelectionPage
selectionPage.Initialize(Activity, Me, "SelectionEvent")
selectionPage.setHeaderText("Select a Language", Typeface.DEFAULT_BOLD, Colors.Black)
selectionPage.setTextButton("Confirm")
selectionPage.setColorButton(xui.Color_Blue)

selectionPage.AddItem("Spanish", "es", "es_icon.png")
selectionPage.AddItem("English", "en", "en_icon.png")
selectionPage.AddItem("French", "fr", "fr_icon.png")

selectionPage.Show


🛠️ Handling Events

Here’s how to capture user interactions:
B4X:
Sub SelectionEvent_ButtonClick(index As Int, value As String)

    Log($"Button clicked. Index: ${index}, Value: ${value}"$)

End Sub



Sub SelectionEvent_ButtonClick2(index As Int, name As String)

    Log($"Button clicked. Index: ${index}, Name: ${name}"$)

End Sub

✨ Why Choose UISelectionPage?

  • ⏳ Saves Time: Prebuilt solution ready to use in your apps.
  • 🎨 Highly Customizable: Tailored to fit various app themes and use cases.
  • 💡 Improved UX: Engages users with an intuitive and modern interface.

💼 Upgrade to ELEVATE UI Version 4.6 Today!
Take your app’s design and functionality to the next level with UISelectionPage and other amazing features. 🎉✨

📥 How to Update if You’re an Existing Customer

If you’ve already purchased Elevate UI, you can download Version 4 from your user panel in the store where you made the purchase:

  1. Log in to your account.
  2. Navigate to the downloads section.
  3. Download the latest update.
Encountering issues? Contact us for support!

👉 Start creating seamless selection experiences now! 🌟
 
Last edited:

walterf25

Expert
Licensed User
Longtime User

🌟 Presenting ELEVATE UI Version 4.6 🎉

We are thrilled to unveil ELEVATE UI version 4.6, packed with exciting updates and features to enhance your app's user experience! 🚀 Among the highlights is the introduction of the UISelectionPage class—a powerful, customizable, and visually appealing tool for creating selection interfaces. 🎨✨


🌟 What is UISelectionPage?

The UISelectionPage class is a modern and intuitive solution designed to help users select from multiple options effortlessly. It’s ideal for scenarios like selecting a language, setting preferences, or choosing categories. 💡✅


🔥 Key Features

  1. 🎯 Dynamic and Flexible Design:
    • Add items with icons 🖼️, titles 📝, and values 📊.
    • Highlights the selected item visually for better interaction.
  2. 📢 Event Support:
    • ButtonClick: Triggered when the action button is clicked, returning the selected item’s index and value.
    • ButtonClick2: Similar to ButtonClick but returns the selected item’s index and name.
  3. 🎨 Advanced Customization:
    • Header Styling: Set text, color, and font for the page header. 🖋️
    • Button Appearance: Configure text, color, and elevation for the action button. 🔘
  4. 📌 Intuitive Selection Management:
    • Automatically highlights the selected item and maintains its state.
    • Supports selecting items programmatically based on their value or index.
  5. ⏬ Smooth Scrolling:
    • Automatically scrolls to the selected item for a seamless experience.

👩‍💻 Example Usage

Here’s how you can quickly set up a selection page using UISelectionPage:
View attachment 160174
Example:
Dim selectionPage As UISelectionPage
selectionPage.Initialize(Activity, Me, "SelectionEvent")
selectionPage.setHeaderText("Select a Language", Typeface.DEFAULT_BOLD, Colors.Black)
selectionPage.setTextButton("Confirm")
selectionPage.setColorButton(xui.Color_Blue)

selectionPage.AddItem("Spanish", "es", "es_icon.png")
selectionPage.AddItem("English", "en", "en_icon.png")
selectionPage.AddItem("French", "fr", "fr_icon.png")

selectionPage.Show


🛠️ Handling Events

Here’s how to capture user interactions:
B4X:
Sub SelectionEvent_ButtonClick(index As Int, value As String)

    Log($"Button clicked. Index: ${index}, Value: ${value}"$)

End Sub



Sub SelectionEvent_ButtonClick2(index As Int, name As String)

    Log($"Button clicked. Index: ${index}, Name: ${name}"$)

End Sub

✨ Why Choose UISelectionPage?

  • ⏳ Saves Time: Prebuilt solution ready to use in your apps.
  • 🎨 Highly Customizable: Tailored to fit various app themes and use cases.
  • 💡 Improved UX: Engages users with an intuitive and modern interface.

💼 Upgrade to ELEVATE UI Version 4.6 Today!
Take your app’s design and functionality to the next level with UISelectionPage and other amazing features. 🎉✨

📥 How to Update if You’re an Existing Customer

If you’ve already purchased Elevate UI, you can download Version 4 from your user panel in the store where you made the purchase:

  1. Log in to your account.
  2. Navigate to the downloads section.
  3. Download the latest update.
Encountering issues? Contact us for support!

👉 Start creating seamless selection experiences now! 🌟
Love this, how can I obtain this?

Regards,
Walter
 

fernando1987

Active Member
Licensed User

🌟 Introducing UINotificationBar in ELEVATE UI 4.6 🎉

The latest version of ELEVATE UI introduces a sleek, fully customizable, and user-friendly UINotificationBar. Designed for delivering real-time notifications to users, this component ensures smooth animations and an elegant interface. 🚀✨


💡 What is UINotificationBar?

The UINotificationBar is a dynamic notification system that can be displayed at the top or bottom of the screen. It comes with customization options for text, colors, fonts, height, animation duration, and more.


🔥 Key Features

  1. 🌈 Fully Customizable Appearance
    • Adjust text, font, size, color, and background to match your app's theme. 🎨
    • Set corner radii for a polished look.
  2. 📍 Flexible Positioning
    • Choose to display the notification at the top or bottom of the screen.
  3. 📏 Resizable and Adaptable
    • Configure the height and adjust alpha transparency.
  4. ⏳ Configurable Timing
    • Control the visibility duration and animation timing for a smooth experience.
  5. ⚡ Animated Transitions
    • Show and hide with seamless animations to enhance user experience.

👩‍💻 Example Usage

Here's how you can set up and display a UINotificationBar:
1000018621.jpg

example:
Sub ShowNotification
    Dim notificationBar As UINotificationBar
    notificationBar.Initialize
    notificationBar.Text = "Welcome to Elevate UI 4.6!"
    notificationBar.Show(Activity)
End Sub


✨ Why Use UINotificationBar?

  • 🛠 Simplified Integration: Just a few lines of code to get started.
  • 🎨 Modern UI: Designed for a polished and professional look.
  • 🔄 Versatility: Perfect for alerts, success messages, warnings, or any custom notification.
  • ⏳ Effortless Timing: Built-in animations and duration handling.

💼 Update to ELEVATE UI 4.6 Now!

Start creating elegant and impactful notifications with the all-new UINotificationBar! 🚀✨
 

Attachments

  • 1000018620.jpg
    1000018620.jpg
    235.6 KB · Views: 16

Guenter Becker

Active Member
Licensed User
Hello everyone! ?

We are excited to introduce Elevate UI, a set of custom views for B4A that takes your applications to the next level. ?✨

What does Elevate UI include?

  • UIButton: Buttons with images that add a unique visual touch to your app. ?
  • PageLoadingFinished: Waiting or page loading animations that enhance the user experience. ⏳?
  • UIFloatingMenu: Sleek and easy-to-use floating menus. ?️?
  • UIComboBox: Customizable spinners to match your app's style. ??
  • UIDrawerMenu: An easy-to-create drawer menu for effortless navigation. ??
And that's not all! Elevate UI includes many more views that allow you to customize and enhance your applications in ways you never imagined. ?✨

✨ Most of these views can be added programmatically, offering flexibility and complete control over their integration. ✨

Elevate UI is designed to simplify development and improve the aesthetics of your B4A applications. We hope you enjoy using it as much as we enjoyed creating it! ?

Download: https://b4xapp.com/item/elevateui-lib-b4a-
Hello, just bought the lib on b4xapp.com.
But I am afraid I got only the b4xlib, no documentation or manual. Wehre to get it? By such a big load of content a documentation is a must have! I think it could not be a solution ro search the Forum or Internet to get an Idea of the content and it's way to work with it. Sorry but good work must include documentation.
I hope anyone can help me with this problem because otherwise I waste the money.
 

fernando1987

Active Member
Licensed User
Hello, thank you for your feedback and for purchasing the library! I completely understand your concern about the lack of documentation. The suite includes a large number of components and custom views, and creating detailed documentation for all of them would be an extremely time-consuming task. This would take away valuable time from providing updates and developing new views for the library.

That said, examples of use and implementation details are regularly added to the forum posts with each update to help users better understand how to work with the components. If you have specific questions or need guidance on a particular feature, feel free to ask in the forum or community. We're here to help!

Thank you for your understanding and support!
 

fernando1987

Active Member
Licensed User
Hello, I understand your concern about the lack of detailed documentation for the suite of custom views. This is a common challenge with libraries that include numerous components.

For example, the B4X XUI Views library offers a collection of cross-platform views and dialogs without extensive documentation. Instead of detailed manuals, practical examples and explanations are provided in forum posts and updates.

This dynamic approach allows developers to focus on improving and expanding the library while the user community shares experiences and solutions for specific use cases.

Additionally, the source code for these views is included in the b4xlib file, allowing developers to explore and understand how they work internally. If you have specific questions or need guidance on implementing a particular feature, I encourage you to participate in the forum, where the community and developers are active and willing to help.
Hello, just bought the lib on b4xapp.com.
But I am afraid I got only the b4xlib, no documentation or manual. Wehre to get it? By such a big load of content a documentation is a must have! I think it could not be a solution ro search the Forum or Internet to get an Idea of the content and it's way to work with it. Sorry but good work must include documentation.
I hope anyone can help me with this problem because otherwise I waste the money.
 
Top