Android Code Snippet [B4X] Share your B4XDialog + templates theming code

Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Created by @saza:

1622530940422.png


B4X: 
Dialog.TitleBarColor = 0xFF0A0B37 'Hintergrundfarbe der Titelzeile: dunkelblau
    Dialog.TitleBarTextColor = 0xFFFFBD59
    Dialog.ButtonsColor = 0xFF0A0B37 'Hintergrundfarbe der Buttons einstellen: dunkelblau
    Dialog.ButtonsTextColor = 0xFFFFBD59 'Farbe des Buttons einstellen: Gold
    Dialog.BackgroundColor = 0xFF0A0B37 'Hintergrundfarbe der Templates einstellen: dunkelblau
    DateTemplate.SelectedColor = 0xFFFFBD59 'Goldene Farbe von Buttons und co
    DateTemplate.DaysInMonthColor = XUI.Color_White 'Schriftfarbe der Monate weiß
    DateTemplate.DaysInWeekColor = XUI.Color_White 'Schriftfarbe der Tage weiß
    DateTemplate.lblMonth.TextColor = XUI.Color_White 'Schriftfarbe der Monatsauswahl weiß
    DateTemplate.lblYear.TextColor = XUI.Color_White 'Schriftfarbe der Jahresauswahl weiß
    For Each x As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        x.Color = XUI.Color_Transparent
    Next
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Light theme search template + wide buttons:
B4X: 
Dim TextColor As Int = 0xFF5B5B5B
search.SearchField.TextField.TextColor = TextColor
search.SearchField.NonFocusedHintColor = TextColor
search.CustomListView1.sv.ScrollViewInnerPanel.Color = 0xFFDFDFDF
search.CustomListView1.sv.Color = Dialog.BackgroundColor
search.CustomListView1.DefaultTextBackgroundColor = xui.Color_White
search.CustomListView1.DefaultTextColor = TextColor
If search.SearchField.lblV.IsInitialized Then search.SearchField.lblV.TextColor = TextColor
If search.SearchField.lblClear.IsInitialized Then search.SearchField.lblClear.TextColor = TextColor
Dialog.BackgroundColor = xui.Color_White
Dialog.ButtonsColor = xui.Color_White
Dialog.BorderColor = xui.Color_Gray
Dialog.ButtonsTextColor = 0xFF007DC3
Wide buttons:
B4X: 
Dim rs As ResumableSub = Dialog.ShowTemplate(search, "CONFIRMAR", "", "CANCELAR")
Dim okbtn As B4XView = Dialog.GetButton(xui.DialogResponse_Positive)
okbtn.Width = 120dip
okbtn.Left = okbtn.Left - 50dip
Wait For (rs) Complete (Result As Int)

1622531039211.png
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Light theme date template:

1622531084005.png


B4X: 
Sub SetLightTheme
    Dialog.TitleBarColor = 0xFFFF7505
    Dialog.TitleBarHeight = 80dip
    Dim TextColor As Int = 0xFF5B5B5B
    Dialog.BackgroundColor = xui.Color_White
    Dialog.ButtonsColor = xui.Color_White
    Dialog.ButtonsTextColor = Dialog.TitleBarColor
    Dialog.BorderColor = xui.Color_Transparent
    DateTemplate.DaysInWeekColor = xui.Color_Black
    DateTemplate.SelectedColor = 0xFF39D7CE
    DateTemplate.HighlightedColor = 0xFF00CEFF
    DateTemplate.DaysInMonthColor = TextColor
    DateTemplate.lblMonth.TextColor = TextColor
    DateTemplate.lblYear.TextColor = TextColor
    DateTemplate.SelectedColor = 0xFFFFA761
    For Each b As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        b.Color = xui.Color_Transparent
        b.TextColor = TextColor
        #if B4i
        Dim no As NativeObject = b
no.RunMethod("setTitleColor:forState:", Array(no.ColorToUIColor(TextColor), 0))
        #End If
    Next
End Sub
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Light theme input dialog:

1622531272822.png


B4X: 
Private Sub SetLightThemeInput(input As B4XInputTemplate)
    Dim TextColor As Int = 0xFF5B5B5B
    input.TextField1.TextColor = TextColor
    input.lblTitle.TextColor = TextColor
    input.SetBorderColor(0xFFC3C3C3, xui.Color_Red)
End Sub


Private Sub SetLightThemeDialog(dialog2 As B4XDialog)
    dialog2.BackgroundColor = xui.Color_White
    dialog2.ButtonsColor = xui.Color_White
    dialog2.BorderColor = xui.Color_Transparent
    dialog2.ButtonsTextColor = 0xFF007DC3
    dialog2.BodyTextColor = 0xFF5B5B5B
End Sub

Based on: https://www.b4x.com/android/forum/threads/light-theme-for-b4xdialogs.128302/#content
 
Last edited:
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
IMG_7429.jpg

B4X: 
    Dialog.TitleBarColor = xui.Color_ARGB(255,45, 136, 121)
    Dialog.TitleBarHeight = 80dip
    Dim TextColor As Int = xui.Color_ARGB(152,255,255,255)
    Dialog.BackgroundColor = xui.Color_ARGB(255,19, 20, 22)
    Dialog.ButtonsColor = xui.Color_ARGB(255,19, 20, 22)
    Dialog.ButtonsTextColor = xui.Color_White
    Dialog.BorderColor = xui.Color_Transparent
    DateTemplate.DaysInWeekColor = xui.Color_White
    DateTemplate.SelectedColor = 0xFF39D7CE
    DateTemplate.HighlightedColor = xui.Color_ARGB(255,45, 136, 121)
    DateTemplate.DaysInMonthColor = TextColor
    DateTemplate.lblMonth.TextColor = xui.Color_White
    DateTemplate.lblYear.TextColor =  xui.Color_White
    DateTemplate.SelectedColor = xui.Color_ARGB(152,45, 136, 121)
    For Each x As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        x.Color = xui.Color_ARGB(255,19, 20, 22)
    Next
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
IMG_7430.jpg

B4X: 
    dia.BlurBackground = True   
    dia.BackgroundColor = xui.Color_ARGB(255,32, 33, 37)   
    dia.ButtonsTextColor = xui.Color_ARGB(255,20, 160, 130)
    dia.ButtonsColor = dia.BackgroundColor   
    dia.BorderWidth = 0
    dia.BorderCornersRadius = 10   
    dia.TitleBarColor = xui.Color_ARGB(255,32, 33, 37)
    dia.TitleBarTextColor = xui.Color_ARGB(255,20, 160, 130)
    
    dia.Title = "Delete"
    Dim sf As Object = dia.Show("Are you sure you want to delete this picture?","Yes", "No", "Abort")
    dia.TitleBar.GetView(0).SetTextAlignment("CENTER","LEFT")
    dia.TitleBar.GetView(0).Left = 10dip
    Dim Content As B4XView = dia.Base.GetView(dia.Base.NumberOfViews - 1)
    Content.GetView(0).Left = 10dip
    Content.GetView(0).width = Content.GetView(0).width - 5dip
 
AscySoft

AscySoft

Active Member
Licensed User
Longtime User
dark.png


Dark theme: 
Sub SetDarkTheme
    Dialog.OverlayColor = xui.Color_Transparent
'    Dialog.BlurBackground=True
    Dialog.TitleBarColor = 0xFF045F50 'Culoarea de fundal a liniei de titlu
    Dialog.TitleBarTextColor = 0xFFE0FFFF 'Culoarea textului din linia de titlu
    Dialog.ButtonsColor = xui.Color_Black 'Culoarea de fundal a butoanelor
    Dialog.ButtonsTextColor = 0xFF249C95 'Dialog.TitleBarColor 'Culoarea textului de pe butoane "YES" "NO" "CANCEL"
    Dialog.BackgroundColor = xui.Color_Black 'Culoarea de fundal a dialogului unde sunt desenate toate elementele
'    Dialog.BorderColor = Dialog.TitleBarTextColor
    DateTemplate.SelectedColor =Dialog.ButtonsTextColor 'culoarea de fond a elementului selectat impliit
    DateTemplate.HighlightedColor = DateTemplate.SelectedColor 'culoarea de fond a elementului pe care dai click
    DateTemplate.DaysInMonthColor = xui.Color_White 'culoarea fontului lunilor
    DateTemplate.DaysInWeekColor = xui.Color_White 'Culoarea fontului saptamanilor
    DateTemplate.lblMonth.TextColor = xui.Color_White 'culoarea fontului pentru selectare luna
    DateTemplate.lblYear.TextColor = xui.Color_White 'culoarea fontului pentru selectarea an
    For Each x As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        x.Color = xui.Color_Transparent
        x.TextColor= xui.Color_White
    Next
End Sub
light.png

Light theme: 
Sub SetLightTheme
    Dialog.OverlayColor = xui.Color_Transparent
'    Dialog.BlurBackground=True
    Dialog.TitleBarColor = 0xFF045F50'0xFFFF7505 'Culoarea de fundal a liniei de titlu
    Dialog.TitleBarTextColor = 0xFFE0FFFF 'Culoarea textului din linia de titlu
    Dialog.ButtonsColor = xui.Color_White 'Culoarea de fundal a butoanelor
    Dialog.ButtonsTextColor = 0xFF249C95 'Dialog.TitleBarColor 'Culoarea textului de pe butoane "YES" "NO" "CANCEL"
    Dialog.BackgroundColor = xui.Color_White 'Culoarea de fundal a dialogului unde sunt desenate toate elementele
'    Dialog.BorderColor = xui.Color_Transparent
    DateTemplate.SelectedColor = Dialog.ButtonsTextColor 'culoarea de fond a elementului selectat impliit
    DateTemplate.HighlightedColor = DateTemplate.SelectedColor 'culoarea de fond a elementului pe care dai click
    DateTemplate.DaysInMonthColor = xui.Color_Black 'culoarea fontului lunilor
    DateTemplate.DaysInWeekColor = xui.Color_Black 'Culoarea fontului saptamanilor
    DateTemplate.lblMonth.TextColor = xui.Color_Black 'culoarea fontului pentru selectare luna
    DateTemplate.lblYear.TextColor = xui.Color_Black 'culoarea fontului pentru selectarea an
    For Each x As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        x.Color = xui.Color_Transparent
        x.TextColor= xui.Color_Black
    Next
End Sub
 
Xandoca

Xandoca

Active Member
Licensed User
Longtime User
1622756583848.png


B4X: 
    Dim x As B4XView = xui.CreatePanel("")
    x.Color = xui.Color_Black
    x.SetLayoutAnimated(0, 0, 0,240dip, 100%y)
    x.LoadLayout("dialoganomes")
    x.Height = PanelConteudo.Height+20dip
    Dialog.PutAtTop = True 'put the dialog at the top of the screen
    Dialog.BorderWidth = 0  
    Dialog.BorderCornersRadius = 0
    Dialog.BorderColor = Colors.RGB(255,217,102)
    Dialog.BackgroundColor = Colors.Transparent
    Dialog.ButtonsOrder = Array As Int(xui.DialogResponse_Negative, xui.DialogResponse_Positive)

    Dim sf As Object = Dialog.ShowCustom(x, "", "", "")
    Wait For (sf) Complete (Result As Int)

    If Result = xui.DialogResponse_Positive Then
    ...
    End If

Attached a sample project.
 

Attachments

  • YearMonthDialog.zip
    13.5 KB · Views: 651
Last edited:
M

Mahares

Expert
Licensed User
Longtime User
Xandoca said:
x.LoadLayout("dialoganomes")
Click to expand...
Since you are loading a layout, but you are not including it, it is hard to guess what your layout has. In this case, I think you should include a sample project or at least a .bal file to make sense of your code snippet.
 
M

Mahares

Expert
Licensed User
Longtime User
Xandoca said:
I've follow your suggestion and a sample project was included.
Click to expand...
Thank you. I briefly looked at your project. It is good, nice effort. It will look even better if you were able to include the day in the selection. RIght now you can only select the Month/Year in this form: MM/YYYY
 
Intiwhiz

Intiwhiz

Member
Licensed User
hai @Erel , what is library
Alexander Stolte said:
View attachment 114369
B4X: 
    Dialog.TitleBarColor = xui.Color_ARGB(255,45, 136, 121)
    Dialog.TitleBarHeight = 80dip
    Dim TextColor As Int = xui.Color_ARGB(152,255,255,255)
    Dialog.BackgroundColor = xui.Color_ARGB(255,19, 20, 22)
    Dialog.ButtonsColor = xui.Color_ARGB(255,19, 20, 22)
    Dialog.ButtonsTextColor = xui.Color_White
    Dialog.BorderColor = xui.Color_Transparent
    DateTemplate.DaysInWeekColor = xui.Color_White
    DateTemplate.SelectedColor = 0xFF39D7CE
    DateTemplate.HighlightedColor = xui.Color_ARGB(255,45, 136, 121)
    DateTemplate.DaysInMonthColor = TextColor
    DateTemplate.lblMonth.TextColor = xui.Color_White
    DateTemplate.lblYear.TextColor =  xui.Color_White
    DateTemplate.SelectedColor = xui.Color_ARGB(152,45, 136, 121)
    For Each x As B4XView In Array(DateTemplate.btnMonthLeft, DateTemplate.btnMonthRight, DateTemplate.btnYearLeft, DateTemplate.btnYearRight)
        x.Color = xui.Color_ARGB(255,19, 20, 22)
    Next
Click to expand...

Which library is using for datepicker dialog ?
 
Jhonn

Jhonn

Member
Calendar.png

Remove Year from Date Template, and calc new size of buttons and change colors same app

B4X: 
'Colors...
Dim xdt As B4XDateTemplate = DateTemplate(0xFF7200FF, xui.Color_Black, xui.Color_White, xui.Color_Green, 0xF0FF7F50)
Private Sub DateTemplate(BackColor As Int, TextColor1 As Int, TextColor2 As Int, SelectedColor As Int, DayOfWeek As Int) As B4XDateTemplate
    Dim xdt As B4XDateTemplate
    xdt.Initialize
    
    'Remove year
    xdt.btnYearLeft.RemoveViewFromParent
    xdt.btnYearRight.RemoveViewFromParent
    xdt.lblYear.RemoveViewFromParent
    
    'Calc new size
    xdt.btnMonthRight.Left = xdt.GetPanel(Dialog).Width - xdt.btnMonthRight.Width - 5dip
    xdt.lblMonth.Width = xdt.GetPanel(Dialog).Width - xdt.btnMonthLeft.Width * 2 - 10dip
    xdt.lblMonth.SetTextAlignment("CENTER", "CENTER")    
    
    xdt.DaysInMonthColor = TextColor1        
    xdt.lblMonth.TextColor = TextColor1
    
    xdt.DaysInWeekColor = DayOfWeek
        
    xdt.btnMonthLeft.TextColor = TextColor2    
    xdt.btnMonthRight.TextColor = TextColor2    
    xdt.btnMonthLeft.Color = BackColor
    xdt.btnMonthRight.Color = BackColor        
        
    xdt.HighlightedColor = BackColor
    
    xdt.SelectedColor = SelectedColor    
    Return xdt
End Sub
 
M

Mahares

Expert
Licensed User
Longtime User
Jhonn said:
Remove Year from Date Template
Click to expand...
When you look at the template, you can't really tell what year it represents. Perhaps, you can add the year in the dialog title like below if you do not want to show it inside the template:
B4X: 
xdt  = DateTemplate(0xFF7200FF, XUI.Color_Black, XUI.Color_White, XUI.Color_Green, 0xF0FF7F50)
Dialog.Title = xdt.lblYear.text
 
MrKim

MrKim

Well-Known Member
Licensed User
Longtime User
Erel said:
Dim okbtn As B4XView = Dialog.GetButton(xui.DialogResponse_Positive)
Click to expand...
Just want to put a red flag here if you are creating a common dialog sub using Dialog.GetButton you should test to make sure the button is actually used or this line will fail. Evidently the button is not created.
B4X: 
    If ButtonPosText.Length > 0 Then
        Dim B As B4XView = KimsDlg.GetButton(xui.DialogResponse_Positive)
        B.SetLayoutAnimated(0, B.Parent.Width * .02, B.Parent.Height - (B.Height + 10dip), B.Parent.Width * .3, B.Height)
    End If
 
You must log in or register to reply here.

Similar Threads

LucaMs
  • Article
B4A Class [B4X] lmB4XDateTemplate
Replies
1
Views
471
LucaMs
LucaMs
P
B4XDialog examples
Replies
0
Views
1K
PaulMeuris
P
Alexander Stolte
  • Solved
Android Question [B4X] xCLV latest source code
Replies
7
Views
2K
Spavlyuk
S
Alexander Stolte
  • Article
Android Tutorial [B4X] B4X Online Tools - JSON Parser/QR Generator/Regex Parser
Replies
8
Views
3K
TILogistic
TILogistic
LucaMs
  • Article
Android Code Snippet [B4X][Library] A solution to easily add your own code snippets?
Replies
11
Views
5K
LucaMs
LucaMs
Top