Android Tutorial TabHost tutorial

Erel · Dec 1, 2010

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.

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

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.b4x.com/android/files/tutorials/TabHost.zip

Erel · Jul 8, 2012

Not with TabHost.

contoystudio · Jul 9, 2012

And what i have to use?
Thanks for your disponibility Erel and sorry for my english.

Erel · Jul 10, 2012

You can try TabHostExtra. Though I don't think that it supports it. You will probably need to implement a custom control.

AscySoft · Jul 10, 2012

contoystudio said:
It is possible to place tabs at the bottom now?
Thanks.

I don't think so,... but TabHostExtra is very good!

Stulish · Sep 4, 2012

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?

klaus · Sep 4, 2012

You should change this in the IDE menu Project / Activity Properties.
Changing it the Designer has no effect.

Best regards.

Stulish · Sep 4, 2012

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

Thanks

Thuong · Dec 10, 2012

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 · Dec 10, 2012

Thuong said:
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 · Dec 13, 2012

"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?

Erel · Dec 13, 2012

Why is this?

Google design guide recommended it. Note that in Android 4+ TabHost doesn't show icons if there is also text.

I think that there is a solution for showing Tabs at the bottom. Try to search the forum.

javiers · Dec 22, 2012

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

klaus · Dec 22, 2012

Here you have an example.

Best regards.

javiers · Dec 22, 2012

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

Jookus · Apr 1, 2013

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 · Apr 2, 2013

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 · Apr 11, 2013

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

boredsilly · May 13, 2013

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.

Erel · May 14, 2013

StateManager does it with reflection. See StateManager code.

luke2012 · May 31, 2013

Hi Erel,
it's possible to have a tabhost look & feel like "Fixed Tab" as Google Building Blocks ?

Tabs | Android Developers

Android Tutorial TabHost tutorial

B4X founder

Member

B4X founder

Active Member

Active Member

Attachments

Expert

Active Member

Member

Member

Member

B4X founder

Active Member

Expert

Active Member

Member

B4X founder

Well-Known Member

Member

B4X founder

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency