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

Erel · Jun 1, 2021

Created by @saza:

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 · Jun 1, 2021

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)

Erel · Jun 1, 2021

Light theme date template:

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 · Jun 1, 2021

Light theme input dialog:

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

Alexander Stolte · Jun 1, 2021

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 · Jun 1, 2021

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 · Jun 3, 2021

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 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 · Jun 3, 2021

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.

Mahares · Jun 5, 2021

Xandoca said:
x.LoadLayout("dialoganomes")

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.

Xandoca · Jun 5, 2021

Mahares said:
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.

I've follow your suggestion and a sample project was included.

Mahares · Jun 5, 2021

Xandoca said:
I've follow your suggestion and a sample project was included.

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 · Jun 8, 2021

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

Which library is using for datepicker dialog ?

Erel · Jun 8, 2021

Everything in this thread is about B4XDialog and its templates (XUI Views).

Jhonn · Jun 14, 2021

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

Mahares · Jun 15, 2021

Jhonn said:
Remove Year from Date Template

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 · Jun 21, 2021

Erel said:
Dim okbtn As B4XView = Dialog.GetButton(xui.DialogResponse_Positive)

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

Erel · Jun 21, 2021

You can check that B.IsInitialized = True before modifying the button.

MrKim · Jun 21, 2021

Here is my simple contribution.
Template as a b4x lib and a sample program are in the zip - thank you Erel for your help.

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

Erel

B4X founder

Erel

B4X founder

Erel

B4X founder

Erel

B4X founder

Alexander Stolte

Expert

Alexander Stolte

Expert

AscySoft

Active Member

Xandoca

Active Member

Attachments

Mahares

Expert

Xandoca

Active Member

Mahares

Expert

Intiwhiz

Member

Erel

B4X founder

Jhonn

Member

Mahares

Expert

MrKim

Well-Known Member

Erel

B4X founder

MrKim

Well-Known Member

Attachments

Similar Threads