B4A Library TabHostExtras

moster67 · Aug 25, 2011

Thanks. Will be useful to save some space.

Sent from my HTC HD2

warwound · Aug 27, 2011

TabHostExtras now updated...

I've added a new method:

getTabVisibility(tabHost1 As TabHost)
Get the visible state of the tabs in tabHost1

Version 1.1 is attached to my original post in this thread.

EDIT: From version 1.3 this method has changed - see http://www.b4x.com/forum/additional-libraries-official-updates/11056-tabhostextras.html#post63950 for full details.

Martin.

warwound · Sep 5, 2011

Here's is another update to TabHostExtras.

Version 1.2

Added two new methods:

1) getTabHeight(tabHost1 As TabHost) As Int

This simply returns the current height in pixels of tabHost1 tabs.

2) setTabGradientDrawable(tabHost1 As TabHost, orientation As String, color1 As Int, color2 As Int, cornerRadius As Float)

This sets a GradientDrawable as the background of all tabs in tabHost1.

See the documentation for the B4A GradientDrawable: Basic4android - Drawing (Core).

This library method accepts the same Orientation options as the B4A GradientDrawable.
"TOP_BOTTOM" and "BL_TR" for example are both valid.

color1 and color2 can be passed to the method as B4A Colors constants.
See the B4A Colors documentation: Basic4android - Constants (Core).

cornerRadius must be of type Float and defines the corner radius of the GradientDrawable.
Pass zero if you do not require rounded corners.

I've updated the demo code to set a white/blue color GradientDrawable with a "TOP_BOTTOM" orientation and no cornerRadius.

Use of this new method will require that your GradientDrawable doesn't leave the TabIndicator text unreadable either when a tab is selected or not selected.
I suspect that the default TabIndicator text color is based upon the firmware/framework of the device that your app is installed on so watch that you don't create a GradientDrawable which leaves that text unreadable on some devices.

Version 1.2 is attached to my original post in this thread.

Martin.

AscySoft · Sep 11, 2011

This is awesome... I will try it in a few days and let you know my observations...
Big thanks for this
:sign0142:

Jim Brown · Sep 11, 2011

Nice little library. Is it possible to set the visiblity of individual tabs?
Or indeed the Enable/Disable state?

An extra tab index value would be needed. I was thinking something like this ...

B4X:

TabManager.setTabVisibility(TabHost1, 0,True)  ' show first tab
TabManager.setTabVisibility(TabHost1, 1,False)  ' hide second tab
...
TabManager.setTabVisibility(TabHost1, -1,State)  ' Use -1 for all tabs



TabManager.setTabEnabled(  ''''Same rules as above''' )

warwound · Sep 12, 2011

Here we go then version 1.3 of TabHostExtras...

I've added/updated the methods to set and get the visibility of either one tab or all tabs.

Existing method to set the visibility of all tabs:

setTabVisibility(tabHost1 As TabHost, visible As Boolean)
Sets the visibility of all tabs in tabHost1 to visible or hidden depending upon the value of 'visible'.

New method to set the visibility of a single tab, tabs are indexed from zero by the way:

setTabVisibility2(tabHost1 As TabHost, visible As Boolean, index As Int)
Sets the visibility of tab referenced by index in tabHost1 to visible or hidden depending upon the value of 'visible'.

Now that the visibility of individual tabs can be set, the getTabVisibility() method needed updating.

getTabVisibility(tabHost1 As TabHost, index As Int)
It now gets the visibility of a single tab, referenced by index.

Anyone currently using a version of TabHostExtras older than this new version 1.3 and using the getTabVisibility method will be required to update their code in order to use version 1.3

Sorry 'bout that but the old method is rather useless now that the visibility of individual tabs can be set.

Finally the new version has methods to set and get the Enabled state of one or all tabs in a TabHost:

setTabEnabled(tabHost1 As TabHost, enabled As Boolean)
This method will enable or disable all tabs.

setTabEnabled2(tabHost1 As TabHost, enabled As Boolean, index As int)
This method will enable or disable a single tab referenced by index.

getTabEnabled(tabHost1 As TabHost, index As int)
Gets the Enabled state of the tab referenced by index in tabHost1

Now i've updated the demo and attached all the new code to the first post in this thread.

You'll see that showing or hiding a tab messes the UI up - the tabs' bottom strip fails to redraw itself to take account of the change in the number of visible tabs.
Selecting an unselected tab will cause the UI to correctly update.

I'm looking for a java invalidate() method to call to fix this but so far have not succeeded - i'm not really sure how to reference the bottom strip and what object to call invalidate() on.

Martin.

Jim Brown · Sep 12, 2011

Great Martin. The extra functionality is just what I need. Thumbs up

warwound · Sep 27, 2011

Here i have another update to TabHostExtras - latest version is 1.4.

You can now set the pixel padding of the TabHost container and the TabContentView.

By default a B4A TabHost container and it's TabContentView each have padding of 5dip left, top, right and bottom.

I have created two new methods to set these padding values:

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.

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.

I've updated the demo code to use 4dip padding top for the TabHost container and zero dip padding for the TabContentView.

Along with the option to set TabIndicator height you can reclaim even more screen space!

Version 1.4 library files and demo code are attached to the first post in this thread.

Martin.

Deleted member 103 · Oct 12, 2011

Hello warwound,

Thanks for this library.
Can you add this feature?

wrong place to ask.

warwound · Oct 13, 2011

Filippo said:

Hello warwound,

Thanks for this library.
Can you add this feature?

B4X:

public Boolean DeleteContactById(String id)
  {
     ArrayList<ContentProviderOperation> ops = new ArrayList<ContentProviderOperation>();
     ops.add(ContentProviderOperation.newDelete(RawContacts.CONTENT_URI)
         .withSelection(RawContacts._ID + " = ?", new String[]{id})
         .build());
      ContentResolver cr = this.m_ba.context.getContentResolver();
        try {
            cr.applyBatch(ContactsContract.AUTHORITY, ops);
        }
        catch (Exception e)
         {
           return Boolean.valueOf(false);
         }
       return Boolean.valueOf(true);
     }

Hi Filippo.

What exactly does this method do - i can't see how it's related to a TabHost?

Martin.

Deleted member 103 · Oct 13, 2011

:signOops:

I'm sorry, the function belongs to the Contact-library. :sign0013:

JdV · Oct 17, 2011

Controlling Roundness

Hello

Is there a way of controlling which corners of the page-tab are subjected to the rounding? In the example attached the result of rounding all 4 corners looks a little odd.

If the top corners were rounded while the bottom corners were left square that might improve the overall look.

Regards

Joe

warwound · Oct 18, 2011

Hi Joe.

Here's version 1.5 of TabHostExtras!

I've added a new method to allow you to set the individual corner radii of the GradientDrawable (in pixel units):

setTabGradientDrawable2(tabHost1 As TabHost, orientation As String, color1 As Int, color2 As Int, cornerRadius() As Float)

setTabGradientDrawable2 accepts an array of Floats as the corner radius value(s).
You can pass an array of one, two or four Floats to this new method.

Passing one Float works the same as the original setTabGradientDrawable method - all four corner radii of the GradientDrawable are set to the same value.

You can pass two Floats to set the radii of both top and both bottom corners of the GradientDrawable:

B4X:

' set a GradientDrawable as each tab indicator's background with 10 dip corner radii applied to the top left and top right of the GradientDrawable
Dim CornerRadius(2) As Float
CornerRadius(0)=10
CornerRadius(1)=0
TabManager.setTabGradientDrawable2(TabHost1, "TOP_BOTTOM", Colors.Green, Colors.Gray, CornerRadius)

And if you want to set each of the four corner radius individually then you can pass four Floats:

B4X:

' set a GradientDrawable as each tab indicator's background with different dip corner radii applied to each corner of the GradientDrawable
Dim CornerRadius(4) As Float
CornerRadius(0)=20
CornerRadius(1)=10
CornerRadius(2)=5
CornerRadius(3)=15
TabManager.setTabGradientDrawable2(TabHost1, "TOP_BOTTOM", Colors.Green, Colors.Gray, CornerRadius)

I've used pixel units for the new method, but originally intended to use dip units.
But thinking about it - the new method is more flexible if it accepts pixel units as the B4A coder can always convert the pixel units to dip units if required before calling this method.

Maybe the methods setTabContentViewPadding() and setTabHostPadding() ought to have used pixel units instead of dip units?

The new library and demo code are attached to the first post in this thread.

Martin.

JdV · Oct 19, 2011

Thanks for the update.

Is it possible to change the colour of the line that appears below the page tabs? On my Galaxy S II it's blue - like the background of the title bar. In the emulator it's white - while the title bar background is grey. It is influenced by the colour of the title bar?

Also, in your demo where tabs can be hidden with the press of a button it doesn't seem to refresh the page tab area of the screen which can leave it looking a little odd (see screenshot attached where I have just hidden tab 2).

Regards

Joe

JonPM · Oct 24, 2011

I would also like to request the ability to change the color of the line below the tabs. Also, how come when I change the colors of the tabs, the black line that separates each disappears? Is there a way to adjust the width of each tab?

warwound · Oct 24, 2011

Hi JdV and JonPM.

I'll take a look at your requests when i have some spare time.
Work as always must come before play!

Martin.

pcbtmr · Oct 24, 2011

Could you give an example of the use of TabContentViewPadding and TabHostPadding (or what exactly do these set?)

Thanks.

warwound · Oct 25, 2011

Hi pcbtmr.

Here the basic anatomy of a TabHost...

B4X:

<TabHost>
   <TabWidget>
      <TabIndicator />
      <TabIndicator />
   </TabWidget>

   <TabStrip />

   <TabContent />
</TabHost>

TabHost is the parent of a TabWidget, a TabStrip and a TabContent.
A TabWidget is the parent of any number of TabIndicators.

Here's a couple of screenshots and some code:

(Note that the default B4A TabHost has 5dip padding left, top, right and bottom of both the TabHost and the TabContent).

TabHost padding

B4X:

TabManager.setTabHostPadding(TabHost1, 48, 24, 48, 24)
TabManager.setTabContentViewPadding(TabHost1, 0, 0, 0, 0)

TabContent padding

B4X:

TabManager.setTabHostPadding(TabHost1, 0, 0, 0, 0)
TabManager.setTabContentViewPadding(TabHost1, 48, 24, 48, 24)

You can see that the TabWidget and the TabStrip always have a width equal to the TabHost.

Martin.

peacemaker · Oct 27, 2011

Is text size of tab heading adjustable ?

B4A Library TabHostExtras

Attachments

Expert

Expert

Expert

Active Member

Active Member

Expert

Active Member

Expert

Deleted member 103

Guest

Expert

Deleted member 103

Guest

Active Member

Attachments

Expert

Active Member

Attachments

Well-Known Member

Expert

Member

Expert

Expert