B4A Library [Library] TabBar

TabBar with Example.

I can't stand the Tabs in Android, so made a TabBar that is a little more useful. No Panel is built in so you can make the Tabs do things with your own Panels or the entire screen. The Default looks like real Folder Tabs and you can set custom colors if you wish. There is one event that lets you know the selected tab and if the click of that tab changed selection or just clicked it again (Useful if you want to make something different happen if the user clicks a tab twice). When setting the current tab by code you can also determine if the event gets raised (Something missing from a lot of controls in Android/B4A- Yeah, I'm looking at you Spinner.) When not enough room for the Tabs they also scroll.

 

[Mahares]

@Roger: Thank you very much for a very nice lbrary. It is taking you for ever to update your web site, but no time in creating great classes and libs. I have 4 questions:
1. How do you add views to each tab without adding panels to each?
2. Are the tabs always positioned at the bottom of the tab bar or can they be at the top?
3.

TB.SetTabColors_Text(Colors.Black) '2/19/13 does not change text color. It is always white.

4.

TB.SetTabColors_Selected(Colors.RGB(234,135,76)) '2/19/13 does not change color  of selected tab

 

[Roger Garstang]

1. Think of it more as a Button bar or strip of Option/Radio Buttons. When a new tab is clicked the event fires and you do whatever you want with your panels. Usually even with the standard TabHost I used one Panel or one Listview and changed the content depending on what tab was clicked, so it is much easier just to do that in the Event of this now.

2. Yes, currently I have the gravity always place it at the bottom so it lines up with panels and other content you place under it and looks nice. With B4A's Static placement it may be difficult to place controls accurately though. You may have better luck using something like my LineLayout library (Just about ready to use this myself now that this is working). I may even revisit my RelativeLayout library now with what I learned from my last two libraries. I plan on adding to this in the future to align to the top and flip the tab curves for Tabs at the Bottom of the screen.

3/4. You call all the Tab Color functions before Adding the Tabs with AddTab then that Tab added and any future Tab after will use the colors you select.

 

[Mahares]

1. I tried this and the text color is still white:

TB.Initialize("TB")
   TB.SetTabColors_Text(Colors.Black) '2/19/13 does not change text color
   TB.AddTab("Income Tab 1 Left", 18, test, Null, Null, Null, 3dip)

2. I tried this but tab color does not change either.

Sub TB_TabClicked(SelectedTab As Int, SelectionChanged As Boolean)
  If SelectedTab=1 Then 
     TB.SetTabColors_Selected(Colors.RGB(234,135,76)) '2/19/13 does not change color
   End If
   ToastMessageShow("Selected Tab= " & SelectedTab & ", Selection Changed= " & SelectionChanged, False)
End Sub

@Roger: It will be beneficial to provide a more comprehensive example where the methods are well illustrated and represented.

 

[Roger Garstang]

Just noticed in #3 you said it stayed white. I looked at the code again and there was in fact a bug in Text Color. When I originally tested the library I had a hard coded Black for Text Color in AddTab. When I moved it all out to functions to set the color I removed the hard coded line setting text color and added the code to set the variables, but left off a new line to set text color from the variables. It is added now and I uploaded it replacing the old one.

(Probably would have never realized it without you saying it was white. In new versions of Android that is the default color of Textview based controls and while Black wasn't hard coded anymore the Default Color value was still set to Black, so that told me something was wrong. My Test Device has Gingerbread where Text is always Black by default, so I never noticed it.)

 

[Roger Garstang]

Sub Activity_Create(FirstTime As Boolean)
   Dim Pnl As Panel
   Dim test As BitmapDrawable
   test.Initialize(LoadBitmapSample(File.DirAssets, "evidence.png", 34dip, 34dip))
   
   TB.Initialize("TB")
   TB.SetTabColors_Selected(Colors.Green)
   TB.AddTab("Income Tab 1 Left", 18, test, Null, Null, Null, 3dip)
   TB.SetTabColors_Text(Colors.Blue)
   TB.SetTabColors_Selected(Colors.Red)
   TB.AddTab("Income Tab 2 Top", 18, Null, Null, test, Null, 0)
   TB.AddTab("Income Tab 3 Right Disabled", 18, Null, test, Null, Null, 3dip)
   Activity.AddView(TB, 0, 0, Activity.Width, Activity.Height / 3)
   Pnl.Initialize("")
   Pnl.Color= TB.GetFolderTabPanelColor
   Activity.AddView(Pnl, 0, Activity.Height / 3, -1, -1)
End Sub

The only code that needs modified is in Create. It uses Statelists to manage the colors. Once added with AddTab the custom button/tab stores its own colors.