Android Tutorial [B4X] Input dialogs with XUI Views

B4XDialog from XUI Views library can show simple dialogs, template based dialogs and custom dialogs.

The example projects demonstrate the various template dialogs: https://www.b4x.com/android/forum/threads/b4x-xui-views-cross-platform-views-and-dialogs.100836/

This example focuses on B4XInputTemplate which is a template useful for text input. You can set a regex pattern that will be used to validate the input. The OK button will only be enabled when the pattern matches.

Starting from XUI Views v1.50 there is a preset configuration for numeric inputs. There are 4 possible modes based on the 2 options: whole numbers and positive numbers.
On B4A and B4i the keyboard type is set to best match the expected input type.

Example:

Sub btnWholePositive_Click
   Dim input As B4XInputTemplate
   input.Initialize
   input.lblTitle.Text = "Whole Positive:"
   input.ConfigureForNumbers(False, False) 'AllowDecimals, AllowNegative
   Wait For (dialog.ShowTemplate(input, "OK", "", "CANCEL")) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       Dim res As Int = input.Text 'no need to check with IsNumber
       Log(res)
   End If
End Sub

The example also shows how to create a custom dialog. First you create a panel with the desired size then you load the layout and call Dialog.ShowCustom.
If text input is expected then set Dialog.PutAtTop to true to make sure that the keyboard doesn't hide the dialog.

Sub btnCustom_Click
   Dim p As B4XView = xui.CreatePanel("")
   p.SetLayoutAnimated(0, 0, 0, 300dip, 150dip)
   p.LoadLayout("CustomDialog")
   dialog.PutAtTop = True 'put the dialog at the top of the screen
   Wait For (dialog.ShowCustom(p, "OK", "", "CANCEL")) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       dialog.Show(fieldFirstName.Text & " " & fieldLastName.Text, "OK", "", "")
   End If
End Sub

B4A, B4J and B4i projects are attached. Make sure to use XUI Views v1.50+.
See post #6 for recommended improvement to the custom dialog.

 

[paiac66]

Hi Erel,
where I can find library "B4XInputTemplate"?

 

[DonManfred]

Hi Erel,

this is a community forum. Do not limit your question to a single member

where I can find library "B4XInputTemplate"?

https://www.b4x.com/android/forum/threads/b4x-xui-views-cross-platform-views-and-dialogs.100836/
It is part of the
XUI Views.b4xlib

https://www.b4x.com/android/forum/threads/new-feature-b4x-lib-a-new-type-of-library.100383/#content
So. You need B4A 8.8+ for it to work.

 

[paiac66]

Great! Thank you so much!

 

[incendio]

Hi,

On Custom dialog, how to make cursor focus on First Name field & Virtual Keyboard automatically shows at the moment Dialog box appeared, just like other dialogs?

 

[Erel]

Sub btnCustom_Click
   Dim p As B4XView = xui.CreatePanel("")
   p.SetLayoutAnimated(0, 0, 0, 300dip, 150dip)
   p.LoadLayout("CustomDialog")
   dialog.PutAtTop = True 'put the dialog at the top of the screen
   Dim rs As ResumableSub =  dialog.ShowCustom(p, "OK", "", "CANCEL")
   fieldFirstName.RequestFocusAndShowKeyboard
   fieldFirstName.NextField = fieldLastName
   #If B4A
   'need to make sure that it will not try to move to a field outside of the dialog
   Dim et As EditText = fieldLastName.TextField
   et.ForceDoneButton = True
   #end if
   
   Wait For (rs) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       dialog.Show(fieldFirstName.Text & " " & fieldLastName.Text, "OK", "", "")
   End If
End Sub

Sub fieldLastName_EnterPressed
   dialog.Close(xui.DialogResponse_Positive)
End Sub

Updated code for the custom dialog based on XUI Views v1.81+.

 

[Erel]

Check B4XPreferencesDialog for a simpler way to create input dialogs made of several fields: [B4X] B4XPreferencesDialog - Cross platform forms