Android Tutorial TabHost tutorial

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:

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

 

[Rob Rendle]

Thanks Erel

 

[leitor79]

Hi!

I have a scheme where I have 2 activities, Activity1 and Activity2, each one with his own layout (layActivity1.bal and layActivity2.bal) which I load at Activity_Create on each activity.

I want to use one activity with a tabhost containing 2 tabs, each one with the content of each activity.

So, It would be correct to create an "Activity3" with a tabhost, load the two layouts each one on a tab and "join" the code from Activity2 and Activity2 in Activity3?

Thank you very much!

 

[Erel]

You are confusing activities with layout files. They are not the same thing.

A loaded layout file is just a collection of views.

Activities cannot be nested. You can move your Activity1 and Activity2 code to classes and then create instances of these classes.

 

[leitor79]

Hi Erel, thank you for your answer.

I know about activities and layouts, I just wasn't clear enough (or I'm missing something else).

The thing with my activities and layouts is that the code I ask to "merge" uses the views defined on the layouts. For example, I have a customlistview in layout1 which I populate in Activity1. Same with layout2 and Activity2.

Should I put both customlistview's objects into the activity3 (the one with the tabhost) and add the code to populate it from each activity into activity3?

What code do you suggest I could put into a class? (I'm and old VB programmer so I use classes when I need objects)

Regards!

 

[Erel]

Should I put both customlistview's objects into the activity3 (the one with the tabhost) and add the code to populate it from each activity into activity3?

Yes. This is one option.

The second option is to create a class for each layout with its views and then handle the views events in the class code.

 

[klaus]

I don't really understand.
Why not just use one activity with the TabHost and the two layouts ?
Why having the two other activities with wach layout once ?

 

[leitor79]

Yes. This is one option.

The second option is to create a class for each layout with its views and then handle the views events in the class code.

Hi Erel, Thank you for your answer.

And how the view's event would be fired when using the activity? How do I relate the activity with that class? Or is that automatic?

Regards,

 

[leitor79]

I don't really understand.
Why not just use one activity with the TabHost and the two layouts ?
Why having the two other activities with wach layout once ?

Hi Klaus, thank you for your answer.

That's because my current project has 2 activities with one layout each, and I'm trying to switch to a tabhost model with less changes possible.

Regards,

 

[Ganiadi]

Hi, Im newbie and need help
I Try to use the tab host and action bar, but when i try to click Home Button that should handle the pulldown menu it throw error.
Pls anybody may help...i also enclosed the source for evaluate

Tq in advance

 

[Erel]

1. Please start a new thread for this in the questions forum.
2. Please post the error message from the logs.
3. You should use File - Export as zip when uploading projects.

 

[Javier Campo Martinez]

Hi guys !!!
With this Manifest, the code doesn't show the icon(s)

'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="26"/>
<supports-screens android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")

Just added android:targetSdkVersion="26"

Is there any workaround or fix for this ?

Thanks in advance, and best regards.

 

[Javier Campo Martinez]

Hi guys !!!
With this Manifest, the code doesn't show the icon(s)

'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="26"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")

Just added android:targetSdkVersion="26"

Is there any workaround or fix for this ?

Thanks in advance, and best regards.

The answer --> https://www.b4x.com/android/forum/threads/tabhost-i-cant-see-icons.29420/
It works for me ... !!!!