Android Tutorial TabHost tutorial

Status
Not open for further replies.
It is recommended to use TabStripViewPager for new projects: https://www.b4x.com/android/forum/threads/63975/#content


The TabHost view is a very important view. It allows you to add several layouts into the same activity.

tabhost_3.png


The designer currently doesn't support adding views directly to the TabHost.
You can only add the TabHost and set its layout:

tabhost1.png


There are several ways to add tab pages. Usually it is recommended to create a layout file in the designer for each page and then load it.
The designer treats every layout file separately. It is your responsibility to set the views names to distinct names (this is only required for views that you plan to access programmatically).

This is done with AddTab or AddTabWithIcon.
Example:
B4X:
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("main")
    Dim bmp1, bmp2 As Bitmap
    bmp1 = LoadBitmap(File.DirAssets, "ic.png")
    bmp2 = LoadBitmap(File.DirAssets, "ic_selected.png")
  
    TabHost1.AddTabWithIcon ("Name", bmp1, bmp2, "page1") 'load the layout file of each page
    TabHost1.AddTab("Color", "page2")
    TabHost1.AddTab("Animal", "page3")
End Sub
AddTabWithIcon receives two bitmaps. There are actually two icons. One when the tab is selected and one when the tab is not selected. The guidelines recommend creating a dark version for the selected icon and a light version for the not selected icon.

You can manually change the selected tab by setting the CurrentTab property.

The example is attached.
B4X:
Sub Process_Globals
  
End Sub

Sub Globals
    Dim TabHost1 As TabHost
    Dim txtName, txtAnimal, txtColor As EditText
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("main")
    Dim bmp1, bmp2 As Bitmap
    bmp1 = LoadBitmap(File.DirAssets, "ic.png")
    bmp2 = LoadBitmap(File.DirAssets, "ic_selected.png")
  
    TabHost1.AddTabWithIcon ("Name", bmp1, bmp2, "page1") 'load the layout file of each page
    TabHost1.AddTab("Color", "page2")
    TabHost1.AddTab("Animal", "page3")
End Sub
Sub Activity_Pause (Finishing As Boolean)
  
End Sub
Sub Activity_Resume

End Sub
Sub btnNext1_Click
    TabHost1.CurrentTab = 1 'move to next tab
End Sub

Sub btnNext2_Click
    TabHost1.CurrentTab = 2 'move to next tab
End Sub

Sub btnDone_Click
    Dim sb As StringBuilder
    sb.Initialize
    sb.Append("You have entered:").Append(CRLF)
    sb.Append("Name: ").Append(txtName.Text).Append(CRLF)
    sb.Append("Color: ").Append(txtColor.Text).Append(CRLF)
    sb.Append("Animal: ").Append(txtAnimal.Text)
    Msgbox(sb.ToString, "")
End Sub

Sub TabHost1_TabChanged
    Activity.Title = "Current Tab = " & TabHost1.CurrentTab
End Sub

Project is available here: http://www.basic4ppc.com/android/files/tutorials/TabHost.zip
 
Last edited:

Stulish

Active Member
Licensed User
Title Bar

Is there a way to remove the title bar when using a tabhost, i have set the 'Show Title' option in the Designer to False (picture attached) but the Title bar is still there?
 

Attachments

  • setting.jpg
    setting.jpg
    24.3 KB · Views: 578

Stulish

Active Member
Licensed User
I didn't realise there was a disable Title option there, it is all working now :icon_clap:

Thanks
 

Thuong

Member
Licensed User
Help me ! newbie

Dear Erel
I make Tabhost with 3 tabs (page1, page2, page3)
on Designer, I can make 01 button on each tabs
on IDE, I can write code to button on page1 ("Main")
How to write code to button on page2, page3 ?
Thank
 

Thuong

Member
Licensed User
Dear Erel
I make Tabhost with 3 tabs (page1, page2, page3)
on Designer, I can make 01 button on each tabs
on IDE, I can write code to button on page1 ("Main")
How to write code to button on page2, page3 ?
Thank

I solved !
My mistake is duplicate button name on each page
 

cbal03

Member
Licensed User
"The guidelines recommend creating a dark version for the selected icon and a light version for the not selected icon(s)."

Why is this? By default the tabhost view shows the selected tab bright and the other dark already. Wouldn't reversing the icon shade be confusing?

I found this to look pretty nice while using the default drawable property.
Dim bmp1, bmp2 As Bitmap

bmp1 = LoadBitmapSample(File.DirAssets, "tabIcon_unselected.png",20,20) 'dark icon
bmp2 = LoadBitmapSample(File.DirAssets, "tabIcon_selected.png",25,25) 'light icon

th_systemTesting.AddTabWithIcon ("Game", bmp1, bmp2, "page_factory_game") 'load the layout file of each page
th_systemTesting.AddTabWithIcon ("Communications", bmp1, bmp2, "page_factory_comm") 'load the layout file of each page
th_systemTesting.AddTabWithIcon ("Other", bmp1, bmp2, "page_factory_other") 'load the layout file of each page

There is a noticeable difference between sample sizes 20 and 25. Definitely more than 5 but it looks pretty good.

Also, are the tabs able to be shown at the bottom yet?
 

javiers

Active Member
Licensed User
Hello,
I wanted to create a table in one of the tab using your class [Class] TableView - Supports tables of any size.

Is it possible? If it were, I'd appreciate an example ...

Thanks
 

javiers

Active Member
Licensed User
:sign0098:Thank you for your quick response.
The program is very good, but the forum is even better.
 

Jookus

Member
Licensed User
I have a problem in getting the icons in the tabs.

If I start a new project (b4a v2.52), create a layout that holds one tabhost view in it and use a code like this...
B4X:
Sub Globals
   Dim th1 As TabHost
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout( "main_test" )
   Dim bmp1, bmp2 As Bitmap
   bmp1 = LoadBitmap(File.DirAssets, "icon_i.png")
   bmp2 = LoadBitmap(File.DirAssets, "icon_i_selected.png")
   th1.AddTabWithIcon( "ic", bmp1, bmp2, "thMain_1" )
End Sub
... the result is plain text tab without any graphics. Also the coloring scheme seems to be different from Erel's example because I get a blue line under the tabs.

However, if I take Erel's example file as a starting point and continue my program from that, it works perfectly and looks exactly like in Erel's screenshots.

Another thing I noticed is that if in the app that was freshly started I add menus they appear on top of each other. Curiously, if I add the same menu items in the app that was built on top of Erel's example, the menus appear in grid formation.

What am I missing here?
 

Erel

Administrator
Staff member
Licensed User
The differences you see are related to Android 4 style.

When you create a new project the manifest editor includes the following attribute: android:targetSdkVersion="14". The result is that new projects use the new style on Android 4 by default. As this example was created a long time ago this attribute is missing so it uses the old style. You can remove this attribute in your code to use the old style though it is not recommended as users expect to see the new style.

In Android 4 the icon only appears if there is no text.
 

GMan

Well-Known Member
Licensed User
i am playing around with the TabHost, but dont know why this code does not work:
B4X:
Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("Main")
   Activity.BringToFront
   TabHost1.AddTab("Test 1","Test1")
        TabHost1.AddTab("Test 2","Test2")
        Spinner1.AddAll(Array As String("1","2","3"))
End Sub

Only 1 (the 1st) Tab is visible, the 2nd not, also the Spinner was not filled with the given Datas....
(all declarations etc. are made, no error occurs anyway)

S O L V E D - made an mistake
 
Last edited:

boredsilly

Member
Licensed User
Interating through a tabhosts views

Hi,

I have a routine that iterates through an activities views and sets various things like colour etc depending on the view type. Is there anyway to do this for a tabhost control?

For a activity I can simply use :

For i=0 To Activity.NumberOfViews-1
Select Case True
Case (CurrentActivity.GetView(i) Is Button)
Bt=CurrentActivity.GetView(i)
...

next

I can't really find a way to access views contained within a tabhosts tabs.
 
Status
Not open for further replies.

Similar Threads

Top