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

AscySoft · Sep 10, 2011

warwound said:
Check out my TabHostExtras library.

You can set tab height and even toggle the visibility of the tabs!

Martin.

wow... I forget about this thread... just now I realise it is a option for my request... I'me still developing my app, and the tabviews look bad by far... to much space used for nothing...but.. until now
Sorry for the language, I am continously working now for the past 15 hours.. my eyes hurts , but not my pride! :icon_clap:

gemasoft · Oct 25, 2011

Anyone know how to locate an object within a tabhost?

Anyone know how to locate an object within a tabhost?

andrewtheart · Oct 25, 2011

gemasoft said:
Anyone know how to locate an object within a tabhost?

Can you be more specific

gemasoft · Oct 25, 2011

for instance the position coordinates in which a panel is one of the tab.

jake · Oct 28, 2011

agraham said:
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

B4X:

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

I'm just getting started with tabhost, but I tried adding some code to this example to position and size p1 but Ikeep getting null pointer exceptions.

Can these panels be positioned/sized on a tab page or do they need to fully fill the page?

andrewtheart · Oct 28, 2011

gemasoft said:
for instance the position coordinates in which a panel is one of the tab.

Um, what? Please clarify (seriously)

mhol99 · Jan 16, 2012

TabHost with Buttons on the Bottom

You should be able to "Fake" a tabhost with buttons at the bottom by designing a layout made of buttons, and enabling / disabling them, and making them visible / not visible.

B4A is new to me and I used to program in PASCAL about 20 years ago, so learning curve for me is huge, but I always liked writing code that mimic'd things.

warwound · Jan 17, 2012

Yes a Tabhost with the TabIndicators at the bottom instead of the top is a great idea and far from impossible.

Stackoverflow along with the official documention has enough info to show how to do this with the native Android SDK.
(I looked into this myself a month or so back.)
I didn't get very far though as the info i found detailed the SDK XML method of creating a View and i don't know enough about the SDK to implement it entirely in code as would be required for a B4A BottomTabHost library

Martin.

hdtvirl · Feb 15, 2012

Tab Pages

Hello All, is it possible to remove (pages/Tabs) from a TABhost at run time, I wish to change the tabs available to users based on their selection in the first Tab Page (Left hand Side). They alway return to the first tab after the operation associated with the Selected TAB is finished.

The application can have different numbers of tab pages based on their selection, some might have one and other might have 2-4.

Thanks and Regards

HDTVIRL

Erel · Feb 15, 2012

You can hide tabs with TabHostExtra library.

hdtvirl · Feb 15, 2012

Thanks Erel for your prompt response, I had downloaded this library to take an look at it later if it was not possible to remove a tab at run time.

I had already implemented a Tabhost solution and somebody asked me if it was possible to remove some tabs as to not give the end user the option to select them.

I think the newer library offer some better design time option in appearance also.

Thanks and Regards

hdtvirl.

luke2012 · Mar 21, 2012

my page = some views + tabhost. Possible ?

Hi to all!
I'm approcing the tabhost solution and I wish known if it's possible to use it embedded into a panel.
I try to explain better.
I wish to design a page (panel/activity) where on the top there are some labels, EditText and ListView.

In the bottom of the page I wish to display a tabhost.

It's possible ?

Thanks!
Have a nice day!

Erel · Mar 21, 2012

Please see my answer in your previous thread.

cymorg · Apr 12, 2012

TabHost and Spinner

Using Erel's example I created a TabHost, added a Spinner to Page2 and added code to load values into the Spinner, as below

B4X:

Sub btnNext1_Click
   TabHost1.CurrentTab = 1 'move to next tab
   Spinner1.Initialize("")
   Spinner1.Add("Value1")
   Spinner1.Add("Value2")
End Sub

I tried numerous variations of this (e.g. adding the code to Activity_Create, Activity_Resume, TabHost1_TabChanged etc.) but I haven't got the Spinner to load any values. Where am I going wrong? :sign0104:

Problem solved... I didn't change any code so have no idea what was going on there, I just redeployed and hey presto. Weird.
Problem recurred... Too hasty thinking this problem went away, it didn't. The Spinner will only load values the 2nd, and subsequent, times it is accessed. I have gone through my code thoroughly and EXACTLY the same code is executed EVERY time. The system clearly interprets the same code differently depending on how many time it runs which, by my reckoning, is a BUG.

bodycode · May 8, 2012

First Tabhost tutorial doesn't seem to use the panels.

I'm probably wrong, maybe you can help me out here. In the first tutorial, 3 panels are declared, but I don't see them being used anywhere in the first tutorial in the beginner's guide in your excellent "interfaces" section.

I see how everything else works with the layout files, but not the actual panel objects.

Following my own thinking, I commented out the declarations of pnlPage1 through 3, and the program still seemed to work. What the heck am I missing?

Thanks in advance.
Marsh

gapi · May 31, 2012

How can load dinamically data in each layout ? On tabChange I want show user data seprated by tabhost. It's possible ?

thanks

Erel · Jun 1, 2012

I'm sorry but I'm not sure that I understand your question.

imgsimonebiliato · Jul 3, 2012

Tab textsize

Is there a way to set the textsize of the tab, where you write "Name", "Color", "Animal"...?

Erel · Jul 4, 2012

Try TabHostExtra library. I think that it supports it.

contoystudio · Jul 8, 2012

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

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

Android Tutorial TabHost tutorial

Active Member

Member

Member

Member

Member

Member

New Member

Expert

Active Member

B4X founder

Active Member

Well-Known Member

B4X founder

Member

Member

Active Member

B4X founder

Well-Known Member

B4X founder

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency