Hide the Tabs in an Android MobileTabPanel Using Declares

Here’s how you can modify Xojo Android’s MobileTabPanel to behave more like the PagePanel found in Xojo Desktop and Web. A TabPanel, as the name suggests, shows tabs for the panels, while a PagePanel does not. Using PagePanel can be very useful in situations where you need greater freedom in designing your UI. With just a few lines of code, you can use Declares to turn a MobileTabPanel into a PagePanel on Android. Read on to see how.

Create a new Android project with two container controls in the IDE, to which you add some controls. Then switch back to Screen1 in the Navigator and add a MobileSegmentedButton and a MobileTabPanel. In the Inspector, set the locking for the TabPanel to all four sides and assign both container controls to the TabPanel via the Inspector. Those are the basic preparations.

The MobileTabPanel is a subclass of Android’s TabLayout view (com.google.android.material.tabs.TabLayout). This consists of the tabs themselves and a so-called ViewPager that holds the containers.

First, we remove the top tab bar from the control. After that, we update the position of the area where the containers are displayed. Then we disable the swipe gesture (optional). And that’s it.

Now add the Opening event to TabPanel1. First, we add two Android-specific import Declares so that the following Declares don’t take up too much space and readability is maintained:

Declare Sub import1 Lib "android.view.*:Import"
Declare Sub import2 Lib "android.widget.*:Import"

Next, we remove the tab bar from the control:

' Removes the tab bar from the MobileTabPanel.
Declare Function RemoveTabs Lib "Kotlin" Alias "(ref as ViewGroup).apply { visibility = View.GONE }" (ref As Ptr) As Ptr
Call RemoveTabs(Me.Handle)

After that, we adjust the top position of the ViewPager by setting it to 0:

' Update control bounds.
Declare Function GetLayoutParams Lib "Object:Me:MobileTabPanel" Alias "_tabPager!!.layoutParams" As Ptr
Declare Function UpdateLayoutParams Lib "Kotlin" Alias "(ref as FrameLayout.LayoutParams).apply { topMargin = 0 }" (ref As Ptr) As Ptr
Call UpdateLayoutParams(GetLayoutParams)

Now add the Pressed event to the MobileSegmentedButton with this code, which ensures switching between the panels:

TabPanel1.SelectedPanelIndex = segmentedIndex

And that’s it – click Run to start the project.

To make the control feel even more like a PagePanel, we now want to eliminate the ability to switch between panels with swipe gestures. To do this, go back into the TabPanel1 Opening event and add this code:

' Disable swipe.
Declare Sub setUserInputEnabled Lib "Object:Me:MobileTabPanel" Alias "_tabPager!!.setUserInputEnabled" (value As Boolean) setUserInputEnabled(False)

And that’s it: the control is now a PagePanel – without tabs and within the same bounds as the TabPanel.

Here you can see the PagePanel in action.

Once you know where and what to look for in the Android API, there’s almost nothing you can’t already do with Declares in Xojo Android. But if you are looking for a native solution, you can join my feature request to implement MobilePagePanel on Android.

Happy Coding!

Martin T. is a Xojo MVP and has been very involved in testing Android support.