Android Question whats wrong with my code unable to show modal bottom sheet

T

toss

Member
Licensed User
Longtime User
i want to show modal bottom sheet when user click on edittext in other to select plan,when the code is executed it does not show anything only shows Semi-transparent background, this is my code


B4X: 
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private btn_action As Button
   
    Private overlay As B4XView

End Sub

Sub ShowModalBottomSheet
    ' Create the overlay
    overlay = xui.CreatePanel("overlay")
    overlay.SetColorAndBorder(xui.Color_ARGB(100, 0, 0, 0), 0, 0, 0) ' Semi-transparent background
    Root.AddView(overlay, 0, 0, Root.Width, Root.Height)
   
    ' Load the BottomSheet layout
    Dim BottomSheetPanel As B4XView = xui.CreatePanel("")
    BottomSheetPanel.LoadLayout("data_plan_modal") ' Corrected: Only 1 parameter
   
    ' Add the BottomSheet to the overlay
    overlay.AddView(BottomSheetPanel, 0, Root.Height, Root.Width, 300dip)
   
    ' Animate the BottomSheet to slide up
    BottomSheetPanel.SetLayoutAnimated(300, 0, Root.Height - 300dip, Root.Width, 300dip)
End Sub
 
Last edited:
Sort by date Sort by votes

Sagenut

Expert
Licensed User
Longtime User
It could be because BottomSheetPanel does not have a size declaration and maybe the layout is not loaded correctly.
It would be helpful if you can post a project with just this function and your layout.
 
Upvote 0
J

jkhazraji

Active Member
Licensed User
Longtime User
Create two panels: one as the semi-transparent background and the other as the bottom sheet.
Either create the plan layout manually or load a predefined one.
Animate by showing and hiding the bottom sheet as follows:
Note replacing Root.Width with 100%x and Root.Height with 100%y.
The show job is the task of the EditText click, and hide one is by the plan layout items as it is chosen, e.g., 3 labels. lblPlan1, lblPlan2, lblPlan3
You can cancel choosing a plan by clicking on the pnlDimBackground.
B4X: 
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
   
    Private overlay As B4XView
    Private edtSelectPlan As EditText
    Private pnlDimBackground As B4XView
    Private pnlBottomSheet As B4XView
    Private lblPlan1, lblPlan2, lblPlan3 As Label

End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage") ' Load the main layout

    pnlDimBackground = xui.CreatePanel("")
    pnlDimBackground.SetColorAndBorder(xui.Color_ARGB(120, 0, 0, 0), 0, 0, 0) 
    pnlDimBackground.Visible = False
    Root.AddView(pnlDimBackground, 0, 0, 100%x, 100%y)

    pnlBottomSheet = xui.CreatePanel("")
    pnlBottomSheet.SetColorAndBorder(xui.Color_White, 0, 0, 0)
    pnlBottomSheet.Visible = False
    Root.AddView(pnlBottomSheet, 0, 100%y, 100%x, 40%y) ' Initially off-screen

    lblPlan1.Initialize("lblPlan")
    lblPlan1.Text = "Plan 1"
    lblPlan1.Gravity = Gravity.CENTER
    lblPlan1.TextSize = 18
    pnlBottomSheet.AddView(lblPlan1, 0, 5%y, 100%x, 10%y)

    lblPlan2.Initialize("lblPlan")
    lblPlan2.Text = "Plan 2"
    lblPlan2.Gravity = Gravity.CENTER
    lblPlan2.TextSize = 18
    pnlBottomSheet.AddView(lblPlan2, 0, 16%y, 100%x, 10%y)

    lblPlan3.Initialize("lblPlan")
    lblPlan3.Text = "Plan 3"
    lblPlan3.Gravity = Gravity.CENTER
    lblPlan3.TextSize = 18
    pnlBottomSheet.AddView(lblPlan3, 0, 27%y, 100%x, 10%y)

    edtSelectPlan.Initialize("edtSelectPlan")
    Root.AddView(edtSelectPlan, 50dip, 100dip, 120dip, 40dip)
    edtSelectPlan.Text = ""
    
    edtSelectPlan.Hint = "Click to select a plan"
    edtSelectPlan.InputType = Bit.Or(edtSelectPlan.INPUT_TYPE_NONE, 0)
    
End Sub

Private Sub edtSelectPlan_Click
    ShowBottomSheet
End Sub

Private Sub lblPlan_Click
    Dim lbl As Label = Sender
    edtSelectPlan.Text = lbl.Text
    HideBottomSheet
End Sub

Private Sub ShowBottomSheet
    pnlDimBackground.Visible = True
    pnlDimBackground.BringToFront
    pnlBottomSheet.Visible = True
    pnlBottomSheet.BringToFront

    pnlBottomSheet.SetLayoutAnimated(300, 0, 60%y, 100%x, 40%y) ' Move to visible position
End Sub

Private Sub HideBottomSheet
    pnlBottomSheet.SetLayoutAnimated(300, 0, 100%y, 100%x, 40%y)
    Sleep(300) ' Wait for the animation to complete
    pnlDimBackground.Visible = False
    pnlBottomSheet.Visible = False
End Sub
 
Upvote 0
You must log in or register to reply here.

Similar Threads

J
  • Question
Android Question B4XPages Intent based camera
Replies
4
Views
2K
John Leeson
J
S
  • Question
Android Question Using CSS with Html table
Replies
1
Views
1K
ronell
R
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…