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

leitor79

Active Member
Licensed User
Longtime User
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!
 

leitor79

Active Member
Licensed User
Longtime User
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

B4X founder
Staff member
Licensed User
Longtime User
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.
 

leitor79

Active Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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
 

Attachments

  • ActionBar demo.zip
    488.4 KB · Views: 519

Javier Campo Martinez

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

B4X:
'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

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

B4X:
'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 ... !!!!
 
Status
Not open for further replies.
Top