Android Question TabHost sizing and alignment problems

DTsEMT

Member
Licensed User
Longtime User
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!
 

Attachments

  • thprob.zip
    17.5 KB · Views: 251
  • Screenshot_2014-02-01-13-48-46.png
    86.5 KB · Views: 385
  • Screenshot_2014-02-01-13-49-39.png
    110.9 KB · Views: 383
Sort by date Sort by votes

eps

Expert
Licensed User
Longtime User
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.
 
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
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!
 
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
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.
 

Attachments

  • media-20140203.png
    100.1 KB · Views: 302
Last edited:
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
Certainly. Again, thanks for all your help!
 

Attachments

  • project.zip
    22.2 KB · Views: 240
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
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.
Click to expand...
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!
 
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
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!
 
Upvote 0

DTsEMT

Member
Licensed User
Longtime User
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.
 
Upvote 0

Laurent95

Active Member
Licensed User
Longtime User

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.
 
Last edited:
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
Android Question TabHost on top of other views
Replies
7
Views
1K
gezueb
  • Article
B4A Library [B4X] [XUI] AS SegmentedTab
2 3
Replies
51
Views
16K
Alexander Stolte
W
  • Question
Android Question TabHost.CurrentTab with Title
Replies
2
Views
1K
Wkm01pro
W
  • Question
Android Question TabHost change Tab Color
Replies
12
Views
5K
Alexander Stolte
  • Article
B4A Library [Class] Custom TabHost
Replies
8
Views
9K
luciano deri
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…