Android Question TabHost sizing and alignment problems

DTsEMT · Feb 1, 2014

Hi! I'm trying to write an app that needs a little user input; I've built several panels and placed them all in the same layout file (to keep them tidy).

I load the layout file, and load a tabhost with the panels using the usual steps - removeview, set variables, addwithicon2.

Although I set my panels to be 100%x and 100%y, and tabhost 100%x and 100%y, when the screen loads there is a visible offset to the right for each panel, and they don't reach the bottom of the screen. I've tried setting the x/y via code, and via designer script, with no success.

If I rotate through the tabhost, something interesting happens - one of my panels (pnl_Preferences) is two sub-panels, pnl_prefs1 and pnl_prefs2, which are slightly smaller than the parent panel. When the Tabhost tab is activated for this panel, any subsequent tabs result in a smaller panel.

Sorry if my description is so vague. I've uploaded the project if anyone knows what's going on. There is no code - I wanted the screens to work first, so all this is only a .bal and maybe 30 lines of code to load Tabhost.

Thanks in advance for any advice!

eps · Feb 1, 2014

How have you defined the size of the Activity in which the Tabhost sits? Or a Panel, within which it is presented? The Tabhost will
only be as large as the containing construct.

DTsEMT · Feb 1, 2014

Activity.Width=100%x, Activity.Height=100%y
Tabhost is defined directly beneath Activity (and not as a child of any panel).

Good point, though, I can try making Tabhost the child of a throwaway panel and see what happens.

Thanks!

Erel · Feb 2, 2014

You should create a separate layout file for each tab. You can use anchors and the designer script in each of these layouts.

Load the layout files with TabHost.AddTabWithIcon. This way the layout will be loaded with the correct width and height.

DTsEMT · Feb 2, 2014

Thank you, Erel. That fixed it!

DTsEMT · Feb 3, 2014

Whoops! Spoke too soon...

Well, I separated each panel into its own BAL file, and loaded them with AddTabWithIcon. It generates a tabhost, but the results are the same - the screen sizes change when switching from one tab to another.

In each Designer, I selected the panel and made Left=0, Top=0, Width=320 and Height=480.
used anchors for Top (BOTH) and bottom (BOTH).

I added code to the designer script:

pnl_panelname.setleftandright(0,100%x)
pnl_panelname.settopandbottom(0,100%y)

The results in Tabhost are a missing section on the left of most of the screens, when selected.

I had some code to change the background gradients on-the-fly,

B4X:

    For Each v As View In Activity.GetAllViewsRecursive
    Log(v)
    Next

and saw the following:

PackageAdded: package:b4a.example
** Activity (main) Create, isFirst = true **
** Activity (main) Create, isFirst = true **
Installing file.
PackageAdded: package:b4a.example
** Activity (main) Create, isFirst = true **
** Activity (main) Create, isFirst = true **
(TabHost): Left=0, Top=0, Width=720, Height=1180
(LinearLayout): Layout not available
(TabHost): Left=0, Top=0, Width=720, Height=1180
(TabWidget): Layout not available
(RelativeLayout): Layout not available
(LinearLayout): Layout not available
(TabWidget): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(TextView): Layout not available
(FrameLayout): Layout not available
(FrameLayout): Layout not available
(BALayout): Layout not available
(BALayout): Layout not available
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=
(Button): Enabled=false, Left=64, Top=257, Width=556, Height=128, Tag=
(Button): Enabled=false, Left=64, Top=257, Width=556, Height=128, Tag=
(Button): Enabled=false, Left=64, Top=428, Width=556, Height=128, Tag=
(Button): Left=64, Top=599, Width=556, Height=128, Tag=
(Button): Enabled=false, Left=64, Top=428, Width=556, Height=128, Tag=
(Button): Left=64, Top=599, Width=556, Height=128, Tag=
** Activity (main) Resume **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (main) Pause, UserClosed = false **
** Activity (main) Create, isFirst = true **
(TabHost): Left=0, Top=0, Width=720, Height=1180
(LinearLayout): Layout not available
(TabWidget): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(RelativeLayout): Layout not available
(ImageView): Layout not available
(TextView): Layout not available
(FrameLayout): Layout not available
(BALayout): Layout not available
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=
(Button): Enabled=false, Left=64, Top=257, Width=556, Height=128, Tag=
(Button): Enabled=false, Left=64, Top=428, Width=556, Height=128, Tag=
(Button): Left=64, Top=599, Width=556, Height=128, Tag=
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **

The relevant code is here:

Dim TH1 as Tabhost

B4X:

    TH1.Initialize("TH1a")
    TH1.Background = GD_BG
    Activity.AddView(TH1,0,0,100%x,100%y)
    AddTab("Start!","main","9_av_play.png")
    AddTab("Contacts","contacts","6_social_add_person.png")
    AddTab("Destination","destination","7_location_place.png")
    AddTab("Alerts","alerts","13_map_ruler.png")
'
'loop through activity views, if panel, change backgrounds
    For Each v As View In Activity.GetAllViewsRecursive
    Log(v)
        If v Is Panel Then
            Dim pnl As Panel = v
            pnl.Background=GD_BG
        End If
    Next
'
'build preferences (scrollview in tabhost)
'
    scv_Prefs.Initialize(1500)
    scv_Prefs.Panel.Initialize("")
'    Activity.AddView(scv_Prefs,0,0,100%x,100%y)
    Dim panel0 As Panel = scv_Prefs.Panel
    Activity.LoadLayout("preferences")
    pnl_Prefs.RemoveView
    panel0.AddView(pnl_Prefs,0,0,100%x,pnl_Prefs.Height)
    Dim bmp1, bmp2 As Bitmap
    bmp1=LoadBitmap(File.DirAssets,"2_action_settings.png")
    bmp2=bmp1
    TH1.AddTabWithIcon2("Prefs",bmp1,bmp2,scv_Prefs)
  
End Sub

Sub AddTab(tTitle As String, tLayout As String, tBitmap As String)
    Dim bmp1, bmp2 As Bitmap
    bmp1 = LoadBitmap(File.DirAssets,tBitmap)
    bmp2 = bmp1
    TH1.AddTabWithIcon(tTitle, bmp1, bmp2, tLayout)
End Sub

I also tried commenting out the scrollview which is added later, and this did not change the behavior.

Android 4.3 on SG3 with the latest & greatest B4A update, if that helps.

Erel · Feb 3, 2014

Can you upload the updated project?

DTsEMT · Feb 3, 2014

Certainly. Again, thanks for all your help!

Erel · Feb 3, 2014

I tested the four tab pages added with your AddTab sub and the pages look correct:

I've commented the code after the four calls to AddTab.

DTsEMT · Feb 3, 2014

Erel said:
I tested the four tab pages added with your AddTab sub and the pages look correct:

View attachment 22398

I've commented the code after the four calls to AddTab.

So, changing the panels' background was offsetting the left margins?

Erel · Feb 3, 2014

I haven't really checked the other code. I see that it uses AddTabWithIcon2 which will not add the tab with the correct size.

DTsEMT · Feb 3, 2014

Erel said:
I haven't really checked the other code. I see that it uses AddTabWithIcon2 which will not add the tab with the correct size.

I checked the zip file I made to be sure that it uses addtabwithicon, not addtabwithicon2. Could it be something else? If it's just something to do with 4.3 I'm sure I could just do a pseudo tabhost with code. Thanks!

Erel · Feb 3, 2014

Comment out the code after the AddTab calls and try it.

DTsEMT · Feb 3, 2014

Erel,

The AddTabWithIcon works, and doesn't resize the panels when I've commented out the code you mentioned. I guess what I'm wondering is why changing a background gradient on a panel would shift that panel to the right in a TabHost?

I could change the gradients in the Designer, but I was looking for a way to be able to change it programmatically.

Thanks for all your time, it was really driving me nuts!

Erel · Feb 4, 2014

Changing the background should not change the position. I also don't see this behavior when I run this code:

B4X:

For Each v As View In Activity.GetAllViewsRecursive
Log(v)
   If v Is Panel Then
     Dim pnl As Panel = v
     pnl.Background=GD_BG
   End If
Next

Note that you should create a new background for each of the panels.

DTsEMT · Feb 4, 2014

Erel, thanks. I made this change:

B4X:

For Each v as view in activity.getallviewsrecursive
Log(v)
if v is panel then
msgbox("watch now...","go")
dim pnl as panel=v
pnl.background=gd_bg
end if
next

My results, watching the screen are, when V=
Tabhost - ok
LinearLayout - ok
TabWidget - ok
RelativeLayout - resizing occurs
FrameLayout - resizing is worst

With the ViewExtender library I attempted the following:

B4X:

Select True
Case v is LinearLayout
dim rlay as linearlayout = v
rlay.left=0
rlay.top=0

... etc., to try and force the sizes. I get errors telling me that I can't do that:

java.lang.ClassCastException: android.widget.FrameLayout$LayoutParams cannot be cast to anywheresoftware.b4a.BALayout$LayoutParams

I finally went back into each of the separate BAL files and added a tag element (tag: panelmain, tag: panelalerts, tag: panelcontacts...) and logged the tags as V was processed:

B4X:

        Case v Is Panel
            Log(v & " " & v.Tag & " --- panel")
            Dim pnl As Panel = v
            Log(pnl)
            pnl.Background=GD_BG

What I saw was this, the only "named" panel is pnlmain; tabwidget, framelayout, and relativelayout are being interpreted as panels... well, here it is:

Installing file.
PackageAdded: package:b4a.example
** Activity (main) Create, isFirst = true **
** Activity (main) Create, isFirst = true **
(TabHost): Left=0, Top=0, Width=720, Height=1180 null --- panel
(TabHost): Left=0, Top=0, Width=720, Height=1180
(LinearLayout): Layout not available null --- panel
(LinearLayout): Layout not available
(TabWidget): Layout not available null --- panel
(TabWidget): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(TabHost): Left=0, Top=0, Width=720, Height=1180 null --- panel
(TabHost): Left=0, Top=0, Width=720, Height=1180
(LinearLayout): Layout not available null --- panel
(LinearLayout): Layout not available
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(TabWidget): Layout not available null --- panel
(TabWidget): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available null --- panel
(RelativeLayout): Layout not available
(RelativeLayout): Layout not available
(FrameLayout): Layout not available null --- panel
(FrameLayout): Layout not available null --- panel
(FrameLayout): Layout not available
(FrameLayout): Layout not available
(BALayout): Layout not available null --- panel
(BALayout): Layout not available null --- panel
(BALayout): Layout not available
(BALayout): Layout not available
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=pnlmain pnlmain --- panel
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=pnlmain
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=pnlmain pnlmain --- panel
(BALayout): Left=0, Top=0, Width=680, Height=1012, Tag=pnlmain
** Activity (main) Resume **
** Activity (main) Resume **

The initial presentation of the Tabhost sometimes looks good, but if I click through the tabs the offsets become severe.

Anyway, that's where it is at the moment.

Erel · Feb 4, 2014

I recommend you to remove this library. You do not need it and it will only cause issues...

Laurent95 · Aug 2, 2014

DTsEMT said:
Hi! I'm trying to write an app that needs a little user input; I've built several panels and placed them all in the same layout file (to keep them tidy).

I load the layout file, and load a tabhost with the panels using the usual steps - removeview, set variables, addwithicon2.

Although I set my panels to be 100%x and 100%y, and tabhost 100%x and 100%y, when the screen loads there is a visible offset to the right for each panel, and they don't reach the bottom of the screen. I've tried setting the x/y via code, and via designer script, with no success.

If I rotate through the tabhost, something interesting happens - one of my panels (pnl_Preferences) is two sub-panels, pnl_prefs1 and pnl_prefs2, which are slightly smaller than the parent panel. When the Tabhost tab is activated for this panel, any subsequent tabs result in a smaller panel.

Sorry if my description is so vague. I've uploaded the project if anyone knows what's going on. There is no code - I wanted the screens to work first, so all this is only a .bal and maybe 30 lines of code to load Tabhost.

Thanks in advance for any advice!

Hello DTsEMT,
I don't know if you find a solution, but with TabHostExtras you can do that.

B4X:

Dim tbhMain As TabHost
Dim TabManager As TabHostExtras

Sub Activity_Create(FirstTime As Boolean)
    .../...
    tbhMain.AddTabWithIcon2("FirstTab",bmp1,bmp2,panel1)
    TabManager.setTabContentViewPadding(tbhMain,0,0,0,0)
    .../...
End Sub

And you haven't offset on both side
That allows you to use TabHost and the TabHostExtra have many other useful features.
I use this with a scroll view in a TabHost and that works good.
Good programming

Regards.

Android Question TabHost sizing and alignment problems

DTsEMT

Member

Attachments

eps

Expert

DTsEMT

Member

Erel

B4X founder

DTsEMT

Member

DTsEMT

Member

Attachments

Erel

B4X founder

DTsEMT

Member

Attachments

Erel

B4X founder

DTsEMT

Member

Erel

B4X founder

DTsEMT

Member

Erel

B4X founder

DTsEMT

Member

Erel

B4X founder

DTsEMT

Member

Erel

B4X founder

Laurent95

Active Member