TabHost Tutorial in Android using Basic4Android
Submitted by donbermoy on Saturday, February 1, 2014 - 21:01.
This is my 3rd tutorial in our controls/view in Basic4Android. The one that i will be introduced now is the TabHost.
TabHostis a container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.
Now let's begin!
On this, you need to create one tabhost to view other layouts in one view and named it as "TabHost1". Next, named your abstract design as "TabHost". Your abstract designer will be like this one below:
Next, you need to create one layout and named it as page2. Create two EditText and named it txt1 and txt2.
Your abstract designer will be like this one below:
Next, you need to create another layout and named it as page3. Create two EditText and named it txt11 and txt21 and one Label named lbl1.
Your abstract designer will be like this one below:
Next, you need to create another layout again and named it as page4. Create one Spinner and named it sp1 and ListView named lsw1.
Your abstract designer will be like this one below:
Last but not the least, create another layout and named it as page5. Create one Button and named it btn1.
Declare your variable in the Sub_Global like this:
Note:
Activity.LoadLayout("tabhost") - this is the first syntax that the Activity reads and it will display the tabhost.
When you click sales tab above, it will have a design like this below. This holds the page3 layout that has its own controls in label, and two editText.
When you click inventory tab above, it will have a design like this below. This holds the page4 layout that has its own controls.
When you click inquiry tab above, it will have a design like this below. This holds the page5 layout that has its own controls, the Button.
Here's the full code for this tutorial:
Download and try it!
For more inquiries and need programmer for your thesis systems in any kind of programming languages, just contact my number below.
Best Regards,
Engr. Lyndon R. Bermoy
IT Instructor/System Developer/Android Developer
STI College - Surigao City
Mobile: 09488225971
E-mail:[email protected]
Follow and add me in my Facebook Account: https://www.facebook.com/donzzsky
Next, you need to create one layout and named it as page2. Create two EditText and named it txt1 and txt2.
Your abstract designer will be like this one below:
Next, you need to create another layout and named it as page3. Create two EditText and named it txt11 and txt21 and one Label named lbl1.
Your abstract designer will be like this one below:
Next, you need to create another layout again and named it as page4. Create one Spinner and named it sp1 and ListView named lsw1.
Your abstract designer will be like this one below:
Last but not the least, create another layout and named it as page5. Create one Button and named it btn1.
Declare your variable in the Sub_Global like this:
- Sub Globals
- 'These global variables will be redeclared each time the activity is created.
- 'These variables can only be accessed from this module.
- Dim TabHost1 As TabHost
- Dim txt1 As EditText
- Dim txt2 As EditText
- Dim lbl1 As Label
- Dim txt1a As EditText
- Dim txt2a As EditText
- Dim sp1 As Spinner
- Dim lsw1 As ListView
- Dim btn1 As Button
- End Sub
- All of the items in the controls that we created in different layout was declared in the Sub Globals. Take note that tutorial layout contains the tabhost, page2 contains txt1 and txt2, page3 contains lbl1,txt1a, and txt2a, page4 contains the Spinner and ListView, and lastly page5 contains a button.
- Sub Activity_Create(FirstTime As Boolean)
- 'Do not forget to load the layout file created with the visual designer. For example:
- Activity.LoadLayout("tabhost")
- TabHost1.AddTab("Medicine", "page2")
- TabHost1.AddTab("Sales", "page3")
- TabHost1.AddTab("Inventory", "page4")
- TabHost1.AddTab("Inquiry", "page5")
- End Sub
TabHost1.AddTab("Medicine", "page2") - the tabname to display page2 layout is Medicine.
TabHost1.AddTab("Sales", "page3") - the tabname to display page3 layout is Sales.
TabHost1.AddTab("Inventory", "page4") - the tabname to display page4 layout is Inventory.
TabHost1.AddTab("Inquiry", "page5") - the tabname to display page5 layout is Inquiry.
In the first run of the application, it will look like this below and it will have a default view on our medicine tab or the page2 layout.
When you click sales tab above, it will have a design like this below. This holds the page3 layout that has its own controls in label, and two editText.
When you click inventory tab above, it will have a design like this below. This holds the page4 layout that has its own controls.
When you click inquiry tab above, it will have a design like this below. This holds the page5 layout that has its own controls, the Button.
Here's the full code for this tutorial:
- Sub Process_Globals
- 'These global variables will be declared once when the application starts.
- 'These variables can be accessed from all modules.
- End Sub
- Sub Globals
- 'These global variables will be redeclared each time the activity is created.
- 'These variables can only be accessed from this module.
- Dim TabHost1 As TabHost
- Dim txt1 As EditText
- Dim txt2 As EditText
- Dim lbl1 As Label
- Dim txt1a As EditText
- Dim txt2a As EditText
- Dim sp1 As Spinner
- Dim lsw1 As ListView
- Dim btn1 As Button
- End Sub
- Sub Activity_Create(FirstTime As Boolean)
- 'Do not forget to load the layout file created with the visual designer. For example:
- Activity.LoadLayout("tabhost")
- TabHost1.AddTab("Medicine", "page2")
- TabHost1.AddTab("Sales", "page3")
- TabHost1.AddTab("Inventory", "page4")
- TabHost1.AddTab("Inquiry", "page5")
- End Sub
- Sub Activity_Resume
- End Sub
- Sub Activity_Pause (UserClosed As Boolean)
- End Sub
Add new comment
- 299 views