Android Tutorial TabHost tutorial

Discussion in 'Tutorials & Examples' started by Erel, Dec 1, 2010.

Thread Status:
Not open for further replies.

Similar threads

B4A Library TabHostExtras
B4A Library StdActionBar - Another ActionBar library
B4A Question Layout Issue
B4A Question Height of tab page of TabHost
B4A Tutorial How they do... #1
  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    [​IMG]

    The designer currently doesn't support adding views directly to the TabHost.
    You can only add the TabHost and set its layout:

    [​IMG]

    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:
    Code:
    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.
    Code:
    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/files/tutorials/TabHost.zip
     
    Last edited: May 10, 2019
    eps, ka3ra and joseant like this.
  2. Brad

    Brad Active Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    I will add it in the next update.
     
  4. agraham

    agraham Expert Licensed User

    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 :confused:
    Code:
    Sub Globals
       
    Dim TabHost1 As TabHost
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
       TabHost1.Initialize(
    "TabHost1")
       
    Activity.AddView(TabHost1, 00300430)
       
    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
     
  5. Cor

    Cor Active Member Licensed User

    maybe the invalidate?
     
  6. agraham

    agraham Expert Licensed User

    I was missing the obvious. :( I didn't realise that the panels are created transparent. :sign0161: I was expecting a default colour.
     
    siroky likes this.
  7. mistermentality

    mistermentality Active Member Licensed User

    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
     
  8. Erel

    Erel Administrator Staff Member Licensed User

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

    wimpie3 Well-Known Member Licensed User

    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.
     
  10. Erel

    Erel Administrator Staff Member Licensed User

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

    andrewtheart Member Licensed User

    tab height

    Hello,

    Thanks to this tutorial I set this up on my device.

    However, the tab heights (not the tab content heights, the height of the actual tab buttons) is too much - takes up too much screen real estate on my application!

    Is there every going to be a way to manually configure the tab height? (and width)
     
  12. eps

    eps Well-Known Member Licensed User

  13. barx

    barx Well-Known Member Licensed User

    Is it possible to to have 2 lines of text on the tab name? At moment it auto scrolls sideways. Tried "xxxxxxx" & CRLF & "xxxxxxxx" but that doesn't change anything. Thanks
     
  14. Erel

    Erel Administrator Staff Member Licensed User

    I think that the native control doesn't support it.
     
  15. rjng

    rjng Member

    Hello,

    I was trying to modify the example, and i had a problem:
    There is 3 desings: main.bal, page1.bal, page2.bal and page3.bal

    I want to use only 2 pages, so i deleted the page3.bal, and deleted all mentions to page3.bal of code. But when I try to Run, I get an error, about the page3.bal. I need this page to continue, even if I'm not using it.

    I'm starting here, so i thought there is a link or a declaration where call page3.bal, but i dindt find it. I'm not sure, of curse.

    So, what do I have to do to delete page3.bal?

    Thanks
     
  16. Erel

    Erel Administrator Staff Member Licensed User

    You should remove the file from the Files tab (at the right pane).
     
  17. rjng

    rjng Member

    It worked! Tks!
     
  18. AscySoft

    AscySoft Active Member Licensed User

    +1 I want that too...

    Also a tab height will be nice(not read only) for proper reordering views from code(orientation change)...and many, manny other things...but I will not ask them in this post
     
  19. warwound

    warwound Expert Licensed User

    Check out my TabHostExtras library.

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

    Martin.
     
  20. Kevin

    Kevin Well-Known Member Licensed User

    I'm thinking about adding tabs to one of the screens in my app, but I'm not sure if it's exactly what I am looking for.

    The "screen" is its own activity, but it is essentially a modified version of the ScrollViewList. The activity allows the user to edit 3 different lists (one at a time), currently by pressing a menu button, which refreshes the ScrollViewList with the selected list data.

    Can I use a TabHostView for this, to replace the app menu buttons? Specifically, I don't want to actually load different layouts for each tab, but rather have each tab reload/refresh the ScrollViewList with specific list data.

    Can I create 3 tabs with the same layout file? Or create tabs with a null layout value so they do nothing but fire a changed event? I could load different info into the ScrollViewList by picking up the currently selected tab in TabHost1_TabChanged.

    Thanks!
     
Thread Status:
Not open for further replies.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice