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

Check this library: http://www.b4x.com/forum/additional...pager-library-sliding-panels-now-perfect.html

Steve Miller · Nov 6, 2013

Is it possible to change the icon on the tab after it's been loaded? For instance, when a user finishes entering information in Tab1 and they go on to Tab2, I'd like to load a checkmark icon on Tab1 showing they finished that tab.

Possible?

Erel · Nov 6, 2013

First note that in Android 4+ the icon only appears if there is no text.

You cannot change the icon after the tab was added. It might be possible with TabHostExtra library.

With TabHost you will need to remove the tab and create a new one.

arjian · Jan 10, 2014

When i add a Layout in tabhost It doesn’t display width of views completely as shown in the attached file, I have to shift them 11dip to the left or there is a simple way, how can I fix it?

Erel · Jan 11, 2014

How are you building the layout?

You should build it with the designer and call lbl.SetLeftAndRight(0, 100%x) in the designer script.

Load the layout file with TabHost.AddTab.

arjian · Jan 12, 2014

Erel said:
How are you building the layout?

You should build it with the designer and call lbl.SetLeftAndRight(0, 100%x) in the designer script.

Load the layout file with TabHost.AddTab.

I build it with the designer and load it with TabHost.AddTab method

But I didn’t set there’s position in the designer script because I set them by code as shown in the attached files

Erel · Jan 12, 2014

You will need to implement it with the designer.

arjian · Jan 12, 2014

Erel said:
You will need to implement it with the designer.

that is not the way i was expected, sometimes the view's position is dependent to the variables in code ,so i have to shift views 11dip to the left
,Scrollview has this problem too

Erel · Jan 13, 2014

Create a layout with a panel only and make this panel fill the screen with Panel.SetLeftAndRight / SetTopAndBotton (or with the designer anchors if you are using v3.20). Now you can programmatically add views to this panel.

Steve Miller · Feb 23, 2014

Is it possible to get the previous tab? So, if I am on tab1 and I click on tab3, is there a way to find out I was on tab1 prior to the current tab (which is now tab3)?

Erel · Feb 24, 2014

You can use a global variable to store the current selected tab and update it in TabChanged event. This will allow you to know the previous selected tab.

Steve Miller · Feb 25, 2014

Don't know why I didn't think of that. Works like a charm! Thanks, Erel!

Sytek · Apr 29, 2014

Erel said:
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.

This should be sticky...At the moment.
Best Regards!

Computersmith64 · Sep 11, 2014

Erel said:
You can use a global variable to store the current selected tab and update it in TabChanged event. This will allow you to know the previous selected tab.

I just use the TabHost's .Tag property to store the .CurrentTab - which of course becomes the previous tab when the TabChanged event is triggered:

B4X:

Sub TabHost_TabChanged
    Log("Previous Tab: " & TabHost.Tag)
    TabHost.Tag = TabHost.CurrentTab
End Sub

Dadeda · Sep 17, 2014

This lib is great, but, you have the selected/unselected tab using a bitmap ok...but i'm not using bitmaps, only text with gradient from tabhostextra wich is great, how could i do the same selected/unselect tab without bitmaps just colors of tab background and text color?

merlin2049er · Oct 9, 2014

hmm, I've got one app that's asking for me to initalize tabhost (and crashing, but it's loaded as a layout) , and the other app is fine.
Not sure what gives.

klaus · Oct 10, 2014

Without seeing what you have done impossible to give any concrete help.

merlin2049er · Oct 10, 2014

It's ok now. In the globals...

B4X:

dim tb as tabhost

changed it to

B4X:

dim tabhost1 as tabhost

Rob Rendle · Apr 28, 2015

Hi,

How do you remove the blue line that is under the tab (when selected) and also the blue line that is the same width as the TabHost?

Erel · Apr 29, 2015

Check TabHostExtras: TabHostExtras

It might support this.

Android Tutorial TabHost tutorial

B4X founder

Active Member

B4X founder

Member

Attachments

B4X founder

Member

Attachments

B4X founder

Member

B4X founder

Active Member

B4X founder

Active Member

Active Member

Well-Known Member

Member

Well-Known Member

Expert

Well-Known Member

Member

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency