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]

UILoadingIndicator:



PageLoadingFinished:

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:

#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:

#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:

 

[fernando1987]

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

#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]

? 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]

 

[fernando1987]

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")

 

[fernando1987]

#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

 

[Xfood]

Hi, hasn't elevatedui been updated in todolist 2.0?

 

[fernando1987]

It will take some more time, I will let you know when it is ready.

 

[fernando1987]

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.

 

[fernando1987]

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!