B4A Library TabHostExtras

RjCl · Apr 30, 2014

warwound said:
The TabWidget is a View that contains TabIndicators, your code has set the Color property of the TabWidget whereas you want to set the Color property of each TabIndicator?

I think you can do that with the method:

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.

The ColorStateList defines the color of each TabIndicator depending on whether it's selected or not selected.
There's some more info here: http://www.b4x.com/android/forum/threads/tabhostextras.11056/page-3#post-109232.

Martin.

No, sorry, not the text of whats written on the tabs, i managed to do that from your previous example a few pages back and is working great.
I'm wanting to change the actual color of the tab not the text on the tab ?

warwound · Apr 30, 2014

Ah yes that'll only modify the tab indicator text color not background color.

I've modified the TabHost tutorial 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")
	
	Dim ColorDrawable1 As ColorDrawable
	ColorDrawable1.Initialize(Colors.Blue, 0)
	
	Dim ColorDrawable2 As ColorDrawable
	ColorDrawable2.Initialize(Colors.Red, 0)
	
	Dim StateListDrawable1 As StateListDrawable
	StateListDrawable1.Initialize
	StateListDrawable1.AddState(StateListDrawable1.State_Selected, ColorDrawable1)
	StateListDrawable1.AddCatchAllState(ColorDrawable2)
	
	Dim TabHostExtras1 As TabHostExtras
	Dim TabIndicator As Panel=TabHostExtras1.GetTagWidget(TabHost1).GetChildTabViewAt(0)
	TabIndicator.Background=StateListDrawable1
End Sub

The TabWidget GetChildTabViewAt method returns an android ViewGroup type of object which can be assigned to a b4a Panel.
Now we can set the Panel Background property to a Drawable.
I've used a StateListDrawable which will appear red when selected and blue at all other times.

The example works BUT i see a problem on my Moto G (kitkat).
When the Panel Background is initially set it overflows the area which it originally occupied.
Click any other tab and the TabHost redraws itself and the Panel background appears as expected.

So try this.
Create a Drawable for the 'selected' state and a Drawable for the 'not selected' state then create a StateListDrawable from these two Drawables.
Now iterate through the tab indicators, setting their Background property to the StateListDrawable.

Martin.

RjCl · Apr 30, 2014

warwound said:
Ah yes that'll only modify the tab indicator text color not background color.

I've modified the TabHost tutorial 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") Dim ColorDrawable1 As ColorDrawable ColorDrawable1.Initialize(Colors.Blue, 0) Dim ColorDrawable2 As ColorDrawable ColorDrawable2.Initialize(Colors.Red, 0) Dim StateListDrawable1 As StateListDrawable StateListDrawable1.Initialize StateListDrawable1.AddState(StateListDrawable1.State_Selected, ColorDrawable1) StateListDrawable1.AddCatchAllState(ColorDrawable2) Dim TabHostExtras1 As TabHostExtras Dim TabIndicator As Panel=TabHostExtras1.GetTagWidget(TabHost1).GetChildTabViewAt(0) TabIndicator.Background=StateListDrawable1 End Sub

The TabWidget GetChildTabViewAt method returns an android ViewGroup type of object which can be assigned to a b4a Panel.
Now we can set the Panel Background property to a Drawable.
I've used a StateListDrawable which will appear red when selected and blue at all other times.

The example works BUT i see a problem on my Moto G (kitkat).
When the Panel Background is initially set it overflows the area which it originally occupied.
Click any other tab and the TabHost redraws itself and the Panel background appears as expected.

So try this.
Create a Drawable for the 'selected' state and a Drawable for the 'not selected' state then create a StateListDrawable from these two Drawables.
Now iterate through the tab indicators, setting their Background property to the StateListDrawable.

Martin.

Thank you so much! It working alright so far

Just one other thing, if you could help me..........How to choose another color by say hex value ? Is it ColorDrawable1.Initialize(#2F4F4F, 0) ?

warwound · Apr 30, 2014

Try

B4X:

Dim DecimalInteger as Integer=Bit.ParseInt("2F4F4F", 16)

Martin.

RjCl · Apr 30, 2014

warwound said:
Try

B4X:

Dim DecimalInteger as Integer=Bit.ParseInt("2F4F4F", 16)

Martin.

No, it didn't work....Logging DecimalInteger was 3100495 ?

warwound · Apr 30, 2014

RjCl said:
No, it didn't work....Logging DecimalInteger was 3100495 ?

That may well be a valid integer for a color value - try setting it and see what you get.
Remember that color hex values range from 0 to FFFFFFFF so a large integer value isn't necessarily incorrect.

Martin.

RjCl · Apr 30, 2014

warwound said:
That may well be a valid integer for a color value - try setting it and see what you get.
Remember that color hex values range from 0 to FFFFFFFF so a large integer value isn't necessarily incorrect.

Martin.

It comes up blank, not showing the color its supposed to

warwound · May 2, 2014

http://stackoverflow.com/questions/6935057/convert-hex-color-value-ffffff-to-integer-value

Simply parsing an HTML hex color code to an integer won't work for android's color property.
This is a long winded approach but does work:

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")
	
	Dim ColorDrawable1 As ColorDrawable
	'	parse the HTML hex color code as red, green and blue elements
	ColorDrawable1.Initialize(Colors.RGB(Bit.ParseInt("2f", 16), Bit.ParseInt("4f", 16), Bit.ParseInt("4f", 16)), 0)
	
	Dim ColorDrawable2 As ColorDrawable
	ColorDrawable2.Initialize(Colors.Magenta, 0)
	
	Dim StateListDrawable1 As StateListDrawable
	StateListDrawable1.Initialize
	StateListDrawable1.AddState(StateListDrawable1.State_Selected, ColorDrawable1)
	StateListDrawable1.AddCatchAllState(ColorDrawable2)
	
	Dim TabHostExtras1 As TabHostExtras
	Dim TabIndicator As Panel=TabHostExtras1.GetTagWidget(TabHost1).GetChildTabViewAt(0)
	TabIndicator.Background=StateListDrawable1
End Sub

Martin.

RjCl · May 3, 2014

warwound said:

http://stackoverflow.com/questions/6935057/convert-hex-color-value-ffffff-to-integer-value

Simply parsing an HTML hex color code to an integer won't work for android's color property.
This is a long winded approach but does work:

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")
   
    Dim ColorDrawable1 As ColorDrawable
    '    parse the HTML hex color code as red, green and blue elements
    ColorDrawable1.Initialize(Colors.RGB(Bit.ParseInt("2f", 16), Bit.ParseInt("4f", 16), Bit.ParseInt("4f", 16)), 0)
   
    Dim ColorDrawable2 As ColorDrawable
    ColorDrawable2.Initialize(Colors.Magenta, 0)
   
    Dim StateListDrawable1 As StateListDrawable
    StateListDrawable1.Initialize
    StateListDrawable1.AddState(StateListDrawable1.State_Selected, ColorDrawable1)
    StateListDrawable1.AddCatchAllState(ColorDrawable2)
   
    Dim TabHostExtras1 As TabHostExtras
    Dim TabIndicator As Panel=TabHostExtras1.GetTagWidget(TabHost1).GetChildTabViewAt(0)
    TabIndicator.Background=StateListDrawable1
End Sub

Martin.

Thank you

RjCl · May 5, 2014

Hello Martin,

Is there a setting for the tab text position ? Currently letters like g, y are getting cut off from the bottom.....There seems to be more space above the text than below.

Also, I can't get the dividers showing back between the tabs like in your demo.

Controller · May 10, 2014

May I ask how I can just remove the outer padding of the tabhost, using reflection?

warwound · May 10, 2014

Controller said:
May I ask how I can just remove the outer padding of the tabhost, using reflection?

Here's the source code for the setTabHostPadding method:

B4X:

/**
 * Set the layout padding (in dip) of tabHost1 container View
 */
public static void setTabHostPadding(TabHost tabHost1, int left, int top, int right, int bottom){
	tabHost1.getChildAt(0).setPadding(Common.DipToCurrent(left), Common.DipToCurrent(top), Common.DipToCurrent(right), Common.DipToCurrent(bottom));
}

Martin.

Controller · May 10, 2014

thanks. using getChildAt(0) works perferctly.

RjCl · May 12, 2014

RjCl said:
Hello Martin,

Is there a setting for the tab text position ? Currently letters like g, y are getting cut off from the bottom.....There seems to be more space above the text than below.

Also, I can't get the dividers showing back between the tabs like in your demo.

Martin,

Any ideas about why the text is positioned as it is?

warwound · May 12, 2014

RjCl said:
Martin,

Any ideas about why the text is positioned as it is?

Not really

If i had this problem i'd probably start my app, then open the folder containing the android sdk and run the Hierarchy Viewer.
The Hierarchy Viewer shows a tree based view and you can navigate to whichever view you want to inspect.

I'd navigate to the TextView (Label) that is a tab indicator and look at it's properties.
See if a padding or margin property has been set and this is not leaving enough space for the text to properly display.
Look at other properties too - once you find the cause i can look at some code to fix the problem.

Martin.

RjCl · May 12, 2014

warwound said:
Not really

If i had this problem i'd probably start my app, then open the folder containing the android sdk and run the Hierarchy Viewer.
The Hierarchy Viewer shows a tree based view and you can navigate to whichever view you want to inspect.

I'd navigate to the TextView (Label) that is a tab indicator and look at it's properties.
See if a padding or margin property has been set and this is not leaving enough space for the text to properly display.
Look at other properties too - once you find the cause i can look at some code to fix the problem.

Martin.

How do you mean start app? On the device while running B4A ?

warwound · May 12, 2014

Run your b4a project so your device is running your project and is connected to your computer via USB.
Now you should be able to run the Hierarchy Viewer, select your device and select your running project by identifying it's packagename in the list of running packages.
Finally you get a graphical tree showing all Views currently displayed in your app and should be able to navigate to the TextView which is the tab indicator displaying your squashed text.

Martin.

RjCl · May 12, 2014

I tried as you said, connected USB, its in debug mode, run in debug and started app and then hierarchy viewer but i get the following errors:-

B4X:

05:26:46 E/hierarchyviewer: Missing forwarded port for 42583930325834465A58
05:26:46 E/hierarchyviewer: Unable to load window data for window <Focused Windo
w> on device 42583930325834465A58
05:26:46 E/hierarchyviewer: null

Hierarchy Viewer is showing device but nothing else when clicking, just get that error in command prompt

Controller · May 12, 2014

B4X:

Sub TabHost_SetTabPadding(xTabHost As TabHost, Left As Int, Top As Int, Right As Int, Bottom As Int)
    Dim xRef1 As Reflector
    Dim xRef2 As Reflector
    Dim xInt1 As Int
    Dim xInt2 As Int
   
    xRef1.Target = xTabHost
    xRef1.Target = xRef1.RunMethod("getTabWidget")
    xInt2 = xRef1.RunMethod("getChildCount")
    For xInt1 = 0 To xInt2 - 1
        xRef2.Target = xRef1.RunMethod2("getChildTabViewAt", xInt1, "java.lang.int")
      xRef2.RunMethod4("setPadding", Array As Object(Left, Top, Right, Bottom), Array As String("java.lang.int", "java.lang.int", "java.lang.int", "java.lang.int"))
        Next
  End Sub

Might help adjusting. Just call after adding your tabs.

RjCl · May 12, 2014

Controller said:

B4X:

Sub TabHost_SetTabPadding(xTabHost As TabHost, Left As Int, Top As Int, Right As Int, Bottom As Int)
    Dim xRef1 As Reflector
    Dim xRef2 As Reflector
    Dim xInt1 As Int
    Dim xInt2 As Int
  
    xRef1.Target = xTabHost
    xRef1.Target = xRef1.RunMethod("getTabWidget")
    xInt2 = xRef1.RunMethod("getChildCount")
    For xInt1 = 0 To xInt2 - 1
        xRef2.Target = xRef1.RunMethod2("getChildTabViewAt", xInt1, "java.lang.int")
      xRef2.RunMethod4("setPadding", Array As Object(Left, Top, Right, Bottom), Array As String("java.lang.int", "java.lang.int", "java.lang.int", "java.lang.int"))
        Next
  End Sub

Might help adjusting. Just call after adding your tabs.

Wow, thanks so much ! It worked !

B4A Library TabHostExtras

Attachments

Member

Expert

Attachments

Member

Expert

Member

Expert

Member

Expert

Member

Member

Member

Expert

Member

Member

Expert

Member

Expert

Member

Member

Member