This B4A app shows you how you can create a tabbed user interface using a horizontal scrollview, tab labels, panels and some B4A views.
The user can tap on a tab label to load the views of that panel into the main panel and the blue label bar is moved to the selected tab label.
The user can also swipe from left to right or from right to left to move to the next or previous panel.
You can reach each label by scrolling the tab labels from left to right or from right to left in the horizontal scrollview.
The horizontal scrollview can contain 99 labels from 100dip wide (= default). You can adjust the width of the tab label in the source code.
The layouts of the panels are defined in the designer. The file names contain the tab number (0 to 3).
When you change the orientation of your device to landscape then the landscape layouts are used.
The app contains code to save the state (the contents or settings) of some views: edittext, checkbox, radiobutton, imageview, togglebutton. The subroutine “save_panel_state(cnt As Int)” puts the state of the views in a “panelsmap” using the tab count number (0-3) and the contents of the tag from the view. The name of the view is copied in its tag in the designer.
The “panelsmap” is saved in a text file (“panels_state.txt”) before changing to another tab label or in the B4Xpage_Disappear subroutine.
You can change the background of the tab labels. The blue label bar is a bitmap set as the background for the tab label.
If you set the variable “tablabeltype” in the source code to “colors” in stead of “bars” then the selected tab label gets a yellow background color if it is selected and the other tab labels get the colors specified in the “tabsmap”.
The “tabsmap” in the source code contains the settings for the tab labels, the colors and the background images from the panels and tab labels. One tab setting is defined as: “tab label name” : background color, text color, border color for the tab label (RGB values strings) and an optional background image filename for the main panel. The background colors for the tabpanels are set to semi-transparant in the designer.
In the source code you can set the variable “using_scrollview” to True if you want to use a vertical scrollview when the device is in landscape mode. The layouts from the portrait mode that are defined in the designer are then being used.
With this example I have tried to show you that it is not very complicated to create a tabbed interface. In the forum you can find libraries that do the same.
The B4Xpages solution is another approach where the layouts are presented in pages. The saving of the state of the views is incorporated into the B4Xpages solution.
It’s recommended that you use B4Xpages for new apps and that you set the orientation of the app fixed to portrait or landscape.
You can find the source code in the attachment (tabpanels.zip)
The user can tap on a tab label to load the views of that panel into the main panel and the blue label bar is moved to the selected tab label.
The user can also swipe from left to right or from right to left to move to the next or previous panel.
You can reach each label by scrolling the tab labels from left to right or from right to left in the horizontal scrollview.
The horizontal scrollview can contain 99 labels from 100dip wide (= default). You can adjust the width of the tab label in the source code.
The layouts of the panels are defined in the designer. The file names contain the tab number (0 to 3).
When you change the orientation of your device to landscape then the landscape layouts are used.
The app contains code to save the state (the contents or settings) of some views: edittext, checkbox, radiobutton, imageview, togglebutton. The subroutine “save_panel_state(cnt As Int)” puts the state of the views in a “panelsmap” using the tab count number (0-3) and the contents of the tag from the view. The name of the view is copied in its tag in the designer.
The “panelsmap” is saved in a text file (“panels_state.txt”) before changing to another tab label or in the B4Xpage_Disappear subroutine.
You can change the background of the tab labels. The blue label bar is a bitmap set as the background for the tab label.
If you set the variable “tablabeltype” in the source code to “colors” in stead of “bars” then the selected tab label gets a yellow background color if it is selected and the other tab labels get the colors specified in the “tabsmap”.
The “tabsmap” in the source code contains the settings for the tab labels, the colors and the background images from the panels and tab labels. One tab setting is defined as: “tab label name” : background color, text color, border color for the tab label (RGB values strings) and an optional background image filename for the main panel. The background colors for the tabpanels are set to semi-transparant in the designer.
In the source code you can set the variable “using_scrollview” to True if you want to use a vertical scrollview when the device is in landscape mode. The layouts from the portrait mode that are defined in the designer are then being used.
With this example I have tried to show you that it is not very complicated to create a tabbed interface. In the forum you can find libraries that do the same.
The B4Xpages solution is another approach where the layouts are presented in pages. The saving of the state of the views is incorporated into the B4Xpages solution.
It’s recommended that you use B4Xpages for new apps and that you set the orientation of the app fixed to portrait or landscape.
You can find the source code in the attachment (tabpanels.zip)
