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

JGParamo

JGParamo

Active Member
Licensed User
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
 
Last edited:
Sort by date Sort by votes
JGParamo

JGParamo

Active Member
Licensed User
Erel said:
Are you asking about B4J specifically? Can you post a mockup of the layout you want to create?
Click to expand...
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
 

Attachments

  • lyt_ModernUI1.zip
    2.9 KB · Views: 62
Last edited:
Upvote 0
JGParamo

JGParamo

Active Member
Licensed User
Erel said:
The page itself cannot be transparent.
Click to expand...
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
 
Last edited:
Upvote 0
JGParamo

JGParamo

Active Member
Licensed User
Upvote 0
JGParamo

JGParamo

Active Member
Licensed User
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
 
Last edited:
Upvote 0
You must log in or register to reply here.

Similar Threads

f0raster0
  • Question
Android Question [B4X] B4XPages + B4XDrawer - Title Hide-show
Replies
10
Views
3K
f0raster0
f0raster0
J
  • Question
Android Question [B4X] B4XDrawer - sliding drawer
Replies
1
Views
1K
Erel
Erel
Alexander Stolte
  • Article
B4A Library [B4X] B4XDrawerAdvanced - Sliding Drawer - Left and Right Panel
Replies
13
Views
6K
Theera
Theera
Erel
  • Locked
  • Article
Android Tutorial [B4X] B4XPages + B4XDrawer
Replies
4
Views
16K
Erel
Erel
Erel
  • Locked
  • Article
B4A Library [B4X] B4XDrawer - sliding drawer
2
Replies
38
Views
61K
Erel
Erel
Top