Android Question TabHost panel size and view positions

JdV

Active Member
Licensed User
Longtime User
Hello

I'm having a problem trying to resize some views that are on a ScrollView within a TabHost panel:

  • I created a TabHost which is the same width as Activity.width.
  • I use AddTab2 to add a scrollview to the tab.
  • I have two buttons in the scroll view that are on the same line
  • Each button should be 50% of the panel's width
  • If I size the buttons in code or using the Designer Scripts the button on the right loses about 8 pixels off the edge of the screen

Is there a neat way the Designer Scripts or code can be used to ensure this doesn't happen (obviously apart from making each button 50%x-4dip)?

The panel's width seems to be "-1" which makes it difficult!

Regards

Joe
 

PenguinHero

Member
Licensed User
Longtime User
Hi JdV,

I'm not sure if this helps, but... if I read the above correctly it sounds like you are talking about the panel for the TabHost, when the scrollview has a panel of its own doesn't it? And you want to put the buttons on the scroll view not the TabHost?
 
Upvote 0

JdV

Active Member
Licensed User
Longtime User
The attached example shows where the ScrollView's panel's width is being reported as "-1".

The buttons' width is set to half of the panel's width and they don't appear.
 

Attachments

  • Buttons.zip
    7 KB · Views: 207
Upvote 0

PenguinHero

Member
Licensed User
Longtime User
Hi JdV,

I had a look at your example, and added a single line of code above one of your lines (shown below), to set the panel width. It now appears to work as I would expect it to. Have a look.
You may need to adjust the source of the width to something else, but I'll leave that to you.

B4X:
MyScrollView.Panel.Width = MyTabHost.Width
MyScrollView.Panel.LoadLayout("buttons")

Let me know if this fixes it or not.

PH.
 
Upvote 0

JdV

Active Member
Licensed User
Longtime User
PH

This hasn't fixed the issue for me - I've tried it on an emulator running Android 2.2 with a resolution of 320x480 and a Samsung phone running Android 2.2.1 at a resolution of 240x320.

As you can see from the picture the button on the right is clipped slightly. (I've set MyTabHost.Color to red and MyScrollView.Panel.Color to transparent to illustrate it better).

It's as if I need to set the MyScrollView.Panel.Width to MyTabHost.Width minus whatever the padding is around each tab.

Thanks for your help.

Regards

Joe
 

Attachments

  • Button Screen.png
    Button Screen.png
    8.4 KB · Views: 296
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
The width reported is -1 because this is the value of the FILL_PARENT constant.

You can create a simple layout file with only the ScrollView and with this code:
B4X:
MyScrollView.SetLeftAndRight(0, 100%x)
MyScrollView.SetTopAndBottom(0, 100%y)

Also set the buttons position with the designer:
B4X:
AutoScaleAll
ButtonLeft.SetLeftAndRight(0, 50%x)
ButtonRight.SetLeftAndRight(50%x, 100%x)

Your program code should be:
B4X:
  Activity.Initialize("")
   MyTabHost.Initialize("")
   Activity.AddView(MyTabHost, 0, 0, Activity.Width, Activity.Height)
   MyTabHost.AddTab("Tab 1", "1") 'this is the layout file with the scroll view.
   MyScrollView.Panel.LoadLayout("buttons")
 
  • Like
Reactions: JdV
Upvote 0

JdV

Active Member
Licensed User
Longtime User
I have a further issue with TabHost panels. Please see the attached example.

When the on-screen keyboard is visible the TabHost looks like it is being resized correctly. However the ScrollView.Panel.Height no longer appears to be large enough to allow all of the buttons and fields to be seen.

What should the ScrollView.Panel.Height be set to when the TabHost is resized? Or is there a better way of reacting to the appearance of the keyboard?

Joe
 

Attachments

  • TabHostDemo2.zip
    8.7 KB · Views: 209
Upvote 0

JdV

Active Member
Licensed User
Longtime User
That does the trick - though I won't pretend I understand how it works!

If I want to display a banner advert at the bottom of the screen I place the TabHost on the Activity like this:

B4X:
Activity.AddView(MyTabHost, 0, 0, Activity.Width, Activity.Height - 50dip)

However, when the keyboard appears the ScrollView is 50dip too short.

I modified the IME_HeightChanged sub as shown below:

B4X:
Sub IME_HeightChanged(NewHeight As Int, OldHeight As Int)
    Dim w = MyScrollView.Width, h = MyScrollView.Height + NewHeight - OldHeight As Int
   
    If NewHeight = Activity.Height Then
        MyTabHost.Height = NewHeight-50dip
    Else
        MyTabHost.Height = NewHeight
    End If
   
    Activity.RerunDesignerScript("1", w, h)
End Sub

I realise I'm probably missing something obvious but please point it out!
 
Upvote 0

JdV

Active Member
Licensed User
Longtime User
I don't need to leave a 50dip gap between the keypad and MyTabHost when the keypad is visible. I'm just struggling to make the whole layout work when the keypad appears and is subsequently dismissed.
 
Upvote 0
Top