B4A Library TabHostExtras

warwound · Aug 25, 2011

Here is a new library i have created that allows you to customise a TabHost.

TabHostExtras
Version: 2.2

TabHostExtras
Methods:
- GetTagWidget (TabHost1 As TabHost) As TabWidget
  Returns TabHost1's TabWidget.
  Allowing you to customize various settings.
- getTabContentViewPadding (tabHost1 As TabHost) As RectWrapper
  Get the layout padding of tabHost1 TabContentView
  Returns a Rect object containing pixel values
- getTabEnabled (tabHost1 As TabHost, index As Int) As Boolean
  Get the Enabled state of TabIndicator #index in tabHost1
- getTabHeight (tabHost1 As TabHost) As Int
  Get the height (in pixels) of the TabIndicators in tabHost1
- getTabHostPadding (tabHost1 As TabHost) As RectWrapper
  Get the layout padding of tabHost1 container View
  Returns a Rect object containing pixel values
- getTabIcon (tabHost1 As TabHost, TabIndex As Int) As ImageViewWrapper
  Get the (icon) ImageView of TabIndicator #TabIndex in tabHost1
- getTabTextSize (tabHost1 As TabHost) As Float
  Get the text size (in pixels) of all TabIndicators
- getTabVisibility (tabHost1 As TabHost, index As Int) As Boolean
  Get the visibility of TabIndicators #index in tabHost1
- setTabContentViewPadding (tabHost1 As TabHost, left As Int, top As Int, right As Int, bottom As Int)
  Set the layout padding (in dip) of tabHost1 TabContentView
- setTabEnabled (tabHost1 As TabHost, enabled As Boolean)
  Enable or disable all TabIndicators in tabHost1
- setTabEnabled2 (tabHost1 As TabHost, enabled As Boolean, index As Int)
  Enable or disable TabIndicator #index in tabHost1
- setTabGradientDrawable (tabHost1 As TabHost, orientation As String, color1 As Int, color2 As Int, cornerRadius As Float)
  Set a GradientDrawable as the background on all TabIndicators in tabHost1
  All fours corner radii of the GradientDrawable are set to the value of cornerRadius (in pixels)
- setTabGradientDrawable2 (tabHost1 As TabHost, orientation As String, color1 As Int, color2 As Int, cornerRadius() As Float)
  Set a GradientDrawable as the background on all TabIndicators in tabHost1
  Corner radii of the GradientDrawable are set individually (in pixels) based upon the number of elements in the array cornerRadius:
  1 element defines all corner radii
  2 elements define corner radii in order top left and right, bottom left and right
  4 elements define corner radii in order top-left, top-right, bottom-right, bottom-left
- setTabHeight (tabHost1 As TabHost, tabHeight As Int)
  Set the height (in pixels) of all TabIndicators in tabHost1
- setTabHostPadding (tabHost1 As TabHost, left As Int, top As Int, right As Int, bottom As Int)
  Set the layout padding (in dip) of tabHost1 container View
- setTabTextColor (tabHost1 As TabHost, Color As Int)
  Set the color to be used for all tab indicators text.
  This color will be used for all tab indicators regardless of their selected state.
- setTabTextColorStateList (tabHost1 As TabHost, ColorStateListName As String)
  Set a ColorStateList to be used for the text color of all tab indicators.
  The ColorStateList must be defined in XML in your application Objects/res/drawable folder.
  Color for selected and not selected tab state can be defined.
- setTabTextSize (tabHost1 As TabHost, TextSize As Float)
  Set the text size of all TabIndicators
  TextSize is assumed to be in units of dip.
- setTabTitle (tabHost1 As TabHost, Title As String, TabIndex As Int)
  Set the Title text of TabIndicator #TabIndex in tabHost1
- setTabVisibility (tabHost1 As TabHost, visible As Boolean)
  Set the visibility of all TabIndicators in tabHost1
- setTabVisibility2 (tabHost1 As TabHost, visible As Boolean, index As Int)
  Set the visibility of TabIndicator #index in tabHost1
TabWidget
Methods:
- BringToFront
- GetChildTabViewAt (TabIndex As Int) As View
  Returns the tab indicator view at the given index.
  The returned View will be a ViewGroup with 2 child Views:
  An ImageView at index 0 and a TextView at Index 1.
- GetTabIcon (TabIndex As Int) As ImageViewWrapper
  Get the (icon) ImageView of the tab indicator view at the given index.
- GetTabLabel (TabIndex As Int) As LabelWrapper
  Get the (TextView) Label of the tab indicator view at the given index.
- Initialize (arg1 As String)
- Invalidate
- Invalidate2 (arg0 As Rect)
- Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
- IsInitialized As Boolean
- RemoveView
- RequestFocus As Boolean
- SendToBack
- SetBackgroundImage (arg0 As Bitmap)
- SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
Properties:
- Background As Drawable
- Color As Int [write only]
- DividerDrawable As Drawable [write only]
  Sets the drawable to use as a divider between the tab indicators.
- Enabled As Boolean
  Get or Set the enabled state of the TabWidget.
- Height As Int
- Left As Int
- LeftStripDrawable As Drawable [write only]
  Sets the drawable to use as the left part of the strip below the tab indicators.
- RightStripDrawable As Drawable [write only]
  Sets the drawable to use as the right part of the strip below the tab indicators.
- StripEnabled As Boolean
  Get or Set whether the bottom strips on the tab indicators are drawn or not.
- TabCount As Int [read only]
  Get the number of tab indicator views.
- Tag As Object
- Top As Int
- Visible As Boolean
- Width As Int

Attached are the library files and a little demo.
If you run the demo try your device's 'Menu' key and toggle the tabs from visible to hidden.

I originally created this functionality in a code module and once it was working created the library.
So i have attached the code module as a separate attachment in case anyone wants to use it - the Reflection library is required if you use the code module but is not required if you use the library of course.

The code module has a Sub (not included in the library):

GetTabIndicators(TabHost1 As TabHost) As View()

This will return an array of Views, these Views are the TabHost's TabIndicators.
Anyone hoping to further customise the look of a TabHost may find this Sub useful - see the code module demo for an example of changing the TabIndicators' Color property.

Martin.

sotik · May 30, 2014

would be possible to do the tabs titles container horizontal scrollable?, if there are a lot of tabs, the titles can not be shown correctly

JakeBullet70 · Jun 28, 2014

I spent some time tonight with this library and while I went another way with my project I would just like to say great job on this. It is really a great lib.

tipallandgo · Sep 26, 2014

Is there a way to change the bottom line colors of the TabWidget?

tried this:

B4X:

Dim tb as TabHost
Dim tbe as TabHostExtras
...
Dim cd As ColorDrawable
cd.Initialize(Main.MAIN_COLOR, 0)
tbe.GetTagWidget(tb).StripEnabled = True
tbe.GetTagWidget(tb).LeftStripDrawable = cd
tbe.GetTagWidget(tb).RightStripDrawable = cd

but that does not seem to work.

Gary Milne · Oct 13, 2014

This is a very handy library as the basic methods fall short of the standards of most decent programmers. Things must have changed from the initial posts which recommended using an XML file and the current state for managing the colors of the buttons. I found this a little kludgy and the fact there were only two states (enabled or disabled) was short of what I wanted.

Using TabHostExtras I was able to have three different states Enabled, Disabled and Selected. Here is a simple example to do that.

B4X:

Sub Set_Tab_State(TabName As TabHost, TabEnabled As Boolean, TabNumber As Int )
    Dim TabLabel As Label
    Dim TabMgr As TabHostExtras
   
    TabLabel = TabMgr.GetTagWidget(TabHost1).GetTabLabel(TabNumber)
   
        If TabEnabled = True Then
            If TabName.CurrentTab = TabNumber Then
                TabLabel.TextColor = Colors.Yellow
                TabLabel.TextSize = 10 * Main.Scale
                TabLabel.Typeface = Typeface.DEFAULT_BOLD
            Else
                TabLabel.TextColor = Colors.White
                TabLabel.TextSize = 8 * Main.Scale
                TabLabel.Typeface = Typeface.DEFAULT
            End If
        Else
            TabLabel.TextColor = Colors.LightGray
            TabLabel.TextSize = 8 * Main.Scale
            TabLabel.Typeface = Typeface.SERIF
        End If   
    TabLabel.Invalidate
    TabMgr.setTabEnabled2(TabName, TabEnabled, TabNumber)
   
End Sub

I also change the size of the Font for the currently selected item which looks good.

Hopefully this will be of help to someone.

P.S. The Main.Scale is a multiplier for the Font Size that is the same formula used for the AutoScaling that is shown below.

B4X:

    'Calculate the scale used to scale fonts across devices
    Delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
    Rate = 0.5 'value between 0 to 1.
    Scale = 1 + Rate * Delta

geoffschultz · Dec 28, 2014

I am trying to create 3 tabs each of which is 1/3rd the width of the tabhost view. I get the width of the tabhost view and divide it by 3 and use that to set the width of the tabwidget. The result is a tab which is probably 1/10 the size of view. In this case the tabhost is 1600 pixels wide, so the calculated width is 533. It doesn't matter whether I do this before or after I add the tabs. What am I doing wrong?

B4X:

Sub Activity_Create(FirstTime As Boolean)
    Dim tabManager As TabHostExtras
       Activity.LoadLayout("Main")        
  
    If FirstTime Then
        Dim width As Int
        width = tbhPages.Width/3
        Log ("width = " & width)
      
        Dim tw As TabWidget
        tw = tabManager.GetTagWidget(tbhPages)
        tw.width = width      
  
        tbhPages.AddTab("Volunteer","home")      
        tbhPages.AddTab("Customers","customers")  
        tbhPages.AddTab("Donors","donors")

stu14t · Dec 29, 2014

I hope I'm reading this correctly. There is no need to do this. The tabhost will automatically resize your tabs to 1/3 the width

geoffschultz · Dec 29, 2014

This is most likely due to some scaling issue that I'm having. On some devices I was only seeing 2 of the 3 tabs. I will say that I'm still confused as to what the units are when setting the width.

andrewj · Feb 17, 2015

Hi Martin,
Hopefully this has an easy fix. I use TabHostExtras to completely hide the tab controls, as I control my tabs in code and with an external "tab strip" I have developed.
The following code has worked well with Android versions prior to KitKat:

B4X:

    moTabHostExtras.setTabHostPadding(tabTabs, -5dip, -4dip, -5dip, -4dip)
    moTabHostExtras.setTabHeight(tabTabs, 0)
    moTabHostExtras.setTabVisibility(tabTabs, False)

The trouble is that this doesn't work in KitKat, as I see a blank panel where the tabs would be.
Any ideas?
Thanks
Andrew

warwound · Feb 17, 2015

I see no reason why this shouldn't work in Kitkat.
Can you try getting the TabHost's TabWidget and setting the TabWidget's Visivle proeprty to False?

B4X:

Dim TabWidget1 As TabWidget
TabWidget1=TabHostExtras1.GetTabWidget(MyTabHost)
TabWidget1.Visible=False

andrewj · Mar 5, 2015

Hi Martin,
That worked, but there's one wrinkle... You've named the method GetTagWidget(MyTabHost)! Oops.
Thanks anyway
Andrew

warwound · Mar 5, 2015

andrewj said:
Hi Martin,
That worked, but there's one wrinkle... You've named the method GetTagWidget(MyTabHost)! Oops.
Thanks anyway
Andrew

OOOPS i never noticed that!
Now shall i fix it or not...

andrewj · Mar 5, 2015

I suggest you fix it, but have an undocumented shell method with the old name which maps to it. Nasty, but nicer than the alternatives!
Thanks
Andrew

Jerez · Jul 21, 2015

Hi:

This code does not work for me. I have an Android kitkat:

B4X:

TabHost.setTabHostPadding(TabHost1,0,0,0,0)
    TabHost.setTabContentViewPadding(TabHost1,0,0,0,0)
    TabHost.setTabVisibility(TabHost1, False)

1) In the image 1 i load a view programatically using 100%y and 100%x. that work OK!

2) The image 2 show a layout with a panel inside tinted red and loaded in a TabHost to see the borders....with:

B4X:

TabHost1.AddTabWithIcon2("Locations", LoadBitmap(File.DirAssets, "state1.png"), LoadBitmap(File.DirAssets, "state2.png"), vp.AsView)

but does not fit the screen.

3) The image 3 show the layout in design time using ANCHOR = BOTH but does not work

How can i fixit?

Looks like this guy has same problem:
https://www.b4x.com/android/forum/threads/tabhost-and-the-panels-added-to-it.24992/#post-145014

GudEvil · Sep 16, 2015

is it possible to scroll tabs horizontally?? if not how can I achieve this?

Prosg · Dec 2, 2015

i want to change the color of this (in yellow) .... how can i do this pls ?

regards

Technofresh · Aug 18, 2016

Where can i download the latest version of TabHostExtras? i tried downloading the link in the first post and it doesn't look like all the features are there that are mentioned.
There is only about 3 functions in the module. Thank You

Erel · Aug 18, 2016

I think that the latest version is 2.2 and it is the one attached to the first post. Check the library version in the IDE. Maybe you are using an older version.

sultan87 · Jan 30, 2023

Bonsoir
je voulais utiliser TabHostExtras
j'ai fait quelques essais qui me semblait être très bon
une fausse manip m'a fait perdre mon projet
j'ai voulu le reconstitué en reprenant l'exemple et je me retrouve avec ceci où je n'ai pas l'icon sur TAB#0
pouvez vous m'aider
il doit y avoir un problème de librairie
Pierre

Alexander Stolte · Jan 30, 2023

sultan87 said:
Bonsoir
je voulais utiliser TabHostExtras
j'ai fait quelques essais qui me semblait être très bon
une fausse manip m'a fait perdre mon projet
j'ai voulu le reconstitué en reprenant l'exemple et je me retrouve avec ceci où je n'ai pas l'icon sur TAB#0
pouvez vous m'aider
il doit y avoir un problème de librairie
Pierre

Every time you write something in the English part in the forum, it's French.... This is the English part of the forum, please write English.

If you want to write french, then you can do it here:

French Forum

www.b4x.com

B4A Library TabHostExtras

Attachments

Member

Well-Known Member

Member

Active Member

Member

Active Member

Member

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Attachments

Member

Active Member

New Member

B4X founder

Active Member

Attachments

Expert

Privacy & Transparency

Privacy & Transparency