B4J Question [B4X] B4XPages + B4XDrawer - How to set B4XPage2 and Drawer.CenterPanel background as transparent? [Solved]

JGParamo · Jun 24, 2024

In Erel's [B4X] B4XPages + B4XDrawer example, I need to make a transparent background for B4XPage2 and Drawer.CenterPanel. I did tried these code snippets to no avail -
Drawer.CenterPanel.Color = xui.Color_Transparent and Root.Color = xui.Color_Transparent.

B4X:

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
    Drawer.Initialize(Me, "Drawer", Root, 200dip)
    Drawer.CenterPanel.LoadLayout("Page2")
    Drawer.LeftPanel.LoadLayout("Page2Left")
    Page3 = B4XPages.GetPage("Page 3")
    HamburgerIcon = xui.LoadBitmapResize(File.DirAssets, "hamburger.png", 32dip, 32dip, True)
    #if B4i
    Dim bb As BarButton
    bb.InitializeBitmap(HamburgerIcon, "hamburger")
    B4XPages.GetNativeParent(Me).TopLeftButtons = Array(bb)
    #Else If B4J
    Dim iv As ImageView
    iv.Initialize("imgHamburger")
    iv.SetImage(HamburgerIcon)
    Drawer.CenterPanel.AddView(iv, 2dip, 2dip, 32dip, 32dip)
    iv.PickOnBounds = True
    #end if
    Drawer.CenterPanel.Color = xui.Color_Transparent
    Root.Color = xui.Color_Transparent
End Sub

Erel · Jun 25, 2024

The page itself cannot be transparent.

Are you asking about B4J specifically? Can you post a mockup of the layout you want to create?

JGParamo · Jun 25, 2024

Erel said:
Are you asking about B4J specifically? Can you post a mockup of the layout you want to create?

Hi Erel . Initially, I'll be working with B4J and intend to use B4A eventually. I am using a layout with rounded corner (based on one made by a user/member in this forum, mcqueccu) so transparency of background is needed or will also explore a form with transparent style. I tried to include the mock-up in zip file but can't upload here , saying "the uploaded file is too large" though it's just 615kb. So I am posting code below and attached just the layout file.

B4XPage2:

Sub Class_Globals
Sub Class_Globals
    Private fx As JFX
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
'    Private lblHello As B4XView
'    Private ImageView1 As B4XView
    Private Page3 As B4XPage3
    Private Drawer As B4XDrawer
    Private HamburgerIcon As B4XBitmap
End Sub

'You can add more parameters here.
Public Sub Initialize

End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
    Drawer.Initialize(Me, "Drawer", Root, 200dip)
    Drawer.CenterPanel.LoadLayout("Page2")
    Drawer.LeftPanel.LoadLayout("Page2Left")
    Page3 = B4XPages.GetPage("Page 3")
    HamburgerIcon = xui.LoadBitmapResize(File.DirAssets, "hamburger.png", 32dip, 32dip, True)
    #if B4i
    Dim bb As BarButton
    bb.InitializeBitmap(HamburgerIcon, "hamburger")
    B4XPages.GetNativeParent(Me).TopLeftButtons = Array(bb)
    #Else If B4J
    Dim iv As ImageView
    iv.Initialize("imgHamburger")
    iv.SetImage(HamburgerIcon)
    Drawer.CenterPanel.AddView(iv, 2dip, 2dip, 32dip, 32dip)
    iv.PickOnBounds = True
    #end if
End Sub

#if B4J
Sub imgHamburger_MouseClicked (EventData As MouseEvent)
    Drawer.LeftOpen = True
End Sub
#else if B4i
Private Sub B4XPage_MenuClick (Tag As String)
    If Tag = "hamburger" Then
        Drawer.LeftOpen = Not(Drawer.LeftOpen)
    End If
End Sub
#end if

Private Sub B4XPage_CloseRequest As ResumableSub
    #if B4A
    'home button
    If Main.ActionBarHomeClicked Then
        Drawer.LeftOpen = Not(Drawer.LeftOpen)
        Return False
    End If
    'back key
    If Drawer.LeftOpen Then
        Drawer.LeftOpen = False
        Return False
    End If
    #end if
    Return True
End Sub

Private Sub B4XPage_Appear
'    lblHello.Text = $"Hello ${B4XPages.MainPage.txtUser.Text}!"$
    UpdateImage
    #if B4A
    Sleep(0)
    B4XPages.GetManager.ActionBar.RunMethod("setDisplayHomeAsUpEnabled", Array(True))
    Dim bd As BitmapDrawable
    bd.Initialize(HamburgerIcon)
    B4XPages.GetManager.ActionBar.RunMethod("setHomeAsUpIndicator", Array(bd))
    #End If
End Sub

Private Sub B4XPage_Disappear
    #if B4A
    B4XPages.GetManager.ActionBar.RunMethod("setHomeAsUpIndicator", Array(0))
    #end if
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    Drawer.Resize(Width, Height)
End Sub

Sub btnDraw_Click
    B4XPages.ShowPage("Page 3")
End Sub

Sub UpdateImage
'    If Page3.Panel1.IsInitialized Then
'        ImageView1.SetBitmap(Page3.cvs.CreateBitmap)
'    End If
End Sub

Sub btnUI_Click
 
    Drawer.LeftOpen = False
    Drawer.CenterPanel.RemoveAllViews
    Drawer.CenterPanel.LoadLayout("lyt_ModernUI1")
 
    CSSUtils.SetBorder(B4XPages.GetNativeParent(Me).RootPane, 0, fx.Colors.Transparent, 30)
    CSSUtils.SetBackgroundColor(B4XPages.GetNativeParent(Me).RootPane, fx.Colors.Transparent)
    CSSUtils.SetBorder(Drawer.CenterPanel, 0, fx.Colors.Transparent, 30)
    CSSUtils.SetBackgroundColor(Drawer.CenterPanel, fx.Colors.Transparent)
    B4XPages.GetNativeParent(Me).BackColor = fx.Colors.Transparent

End Sub

Sub btnSignOut_Click
    Page3.ClearImage
    Drawer.LeftOpen = False
    UpdateImage
    B4XPages.ShowPageAndRemovePreviousPages("MainPage") 
End Sub

JGParamo · Jun 25, 2024

Erel said:
The page itself cannot be transparent.

It seems it is. I've tried using CSSUtils, still cannot.

B4X:

        CSSUtils.SetBorder(B4XPages.GetNativeParent(Me).RootPane, 0, fx.Colors.Transparent, 30)
        CSSUtils.SetBackgroundColor(B4XPages.GetNativeParent(Me).RootPane, fx.Colors.Transparent)
        CSSUtils.SetBorder(Drawer.CenterPanel, 0, fx.Colors.Transparent, 30)
        CSSUtils.SetBackgroundColor(Drawer.CenterPanel, fx.Colors.Transparent)
        B4XPages.GetNativeParent(Me).BackColor = fx.Colors.Transparent

Erel · Jun 26, 2024

Pages cannot / aren't expected to be transparent. Use panels instead of pages.

JGParamo · Jun 26, 2024

Erel said:
Pages cannot / aren't expected to be transparent. Use panels instead of pages.

Thanks Erel, I should use panel.

JGParamo · Jun 26, 2024

Just get it done with B4XPages.GetNativeParent(Me).SetFormStyle("TRANSPARENT"), B4XPages.GetNativeParent(Me).BackColor = fx.Colors.Transparent and CSSUtils.SetStyleProperty(Root, "-fx-background-color", "transparent").

B4X:

Private Sub B4XPage_Created (Root1 As B4XView)
    B4XPages.GetNativeParent(Me).SetFormStyle("TRANSPARENT")
    Root = Root1
    B4XPages.GetNativeParent(Me).BackColor = fx.Colors.Transparent
    'load the layout to Root
    Drawer.Initialize(Me, "Drawer", Root, 200dip)
    Drawer.CenterPanel.LoadLayout("Page2")
    Drawer.LeftPanel.LoadLayout("Page2Left")
    Page3 = B4XPages.GetPage("Page 3")
    HamburgerIcon = xui.LoadBitmapResize(File.DirAssets, "hamburger.png", 32dip, 32dip, True)
    #if B4i
    Dim bb As BarButton
    bb.InitializeBitmap(HamburgerIcon, "hamburger")
    B4XPages.GetNativeParent(Me).TopLeftButtons = Array(bb)
    #Else If B4J
    Dim iv As ImageView
    iv.Initialize("imgHamburger")
    iv.SetImage(HamburgerIcon)
    Drawer.CenterPanel.AddView(iv, 2dip, 2dip, 32dip, 32dip)
    iv.PickOnBounds = True
    #end if
End Sub

B4X:

Sub btnUI_Click
    
    Drawer.LeftOpen = False
    Drawer.CenterPanel.RemoveAllViews
    Drawer.CenterPanel.LoadLayout("lyt_ModernUI1")

    CSSUtils.SetStyleProperty(Root, "-fx-background-color", "transparent")

End Sub

B4J Question [B4X] B4XPages + B4XDrawer - How to set B4XPage2 and Drawer.CenterPanel background as transparent? [Solved]

JGParamo

Active Member

Erel

B4X founder

JGParamo

Active Member

Attachments

JGParamo

Active Member

Erel

B4X founder

JGParamo

Active Member

JGParamo

Active Member

Similar Threads