TabHost tutorial

[Erel]

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:

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.

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/fil...ls/TabHost.zip

[Brad]

Is there a way to place the tabs at the bottom of the screen?

[Erel]

I will add it in the next update.

[agraham]

I guess I'm missing the obvious but I can't get to build a tab set programatically using AddTab2. I get the tab header displayed and can select one of them but no tab bodies are shown and trying to set the Panel heights throws null pointer exceptions

Sub Globals
    Dim TabHost1 As TabHost
End Sub

Sub Activity_Create(FirstTime As Boolean)
    TabHost1.Initialize("TabHost1")
    Activity.AddView(TabHost1, 0, 0, 300, 430)
    Dim p1, p2, p3 As Panel
    p1.Initialize("Panel1")
    p2.Initialize("Panel2")
    p3.Initialize("Panel3")
    TabHost1.AddTab2("One", p1)
    TabHost1.AddTab2("Two", p2) 
    TabHost1.AddTab2("Three", p3) 
End Sub

[Cor]

maybe the invalidate?

[agraham]

I was missing the obvious. I didn't realise that the panels are created transparent. I was expecting a default colour.

[mistermentality]

Originally Posted by Erel

I will add it in the next update.

Was the ability to place tabs at the bottom of the screen added? I haven't figured out how to achieve that yet if it was so thought I would ask.

Thanks.

Dave

[Erel]

It wasn't added yet. Android support for TabHost with buttons at the buttom is not good which makes it a bit complicated.

[wimpie3]

Any idea when this will be ready? I absolutely want to create an app which looks the same as an IOS app I did before, which has its buttons below.

[Erel]

I don't know. The native TabHost makes it complicated to change the buttons positions to the bottom.