Android Question Change dimension of WebView when phone is rotated

Mattiaf

Active Member
Licensed User
Hi, I'm using a webview control and I want my app to be both in portrait and landscape mode.
With that, I mean that if the phone is on portrait position, the webview size should be a perfect square with dimensions half of the screen.
If the phone is on horizontal, which means on landscape position, I want the WebView to be completely full screen.
I'm able to set the WebView completely on full screen using Change orientation of WebView but if I rotate the phone on portrait position, it doesn't resize like a normal square..
Project and activity attributes are the following
B4X:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: False
#End Region

The WebView code
B4X:
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    Dim x As B4XView = WebView1
    x.Rotation = 90
    WebView1.JavaScriptEnabled=True
  
    WebView1.LoadUrl( website url )

End Sub

and on designer, activity script

B4X:
WebView1.Width = 100%y
WebView1.Height = 100%x
WebView1.HorizontalCenter = 50%x
WebView1.VerticalCenter = 50%y

How can I make the Webview to resize like a normal square when the phone is in vertical ( portrait position)? many thanks
 

PaulMeuris

Active Member
Licensed User
To test the screen orientation i usually use a solution like this one.
The webview is resized when the screen orientation is landscape.
There are probably more elegant solutions using a designer script.
In this example only the AutoScaleAll command is in the designer script.
You can change the size of the webview in the designer and the webview will still be centered in portrait mode.
test screen orientation:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region
#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region
Sub Process_Globals
    Private xui As XUI
End Sub
Sub Globals
    Private WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    WebView1.JavaScriptEnabled=True
    WebView1.LoadUrl("http://google.com")
    Private screenwidth As Int = GetDeviceLayoutValues.Width
    Private screenheight As Int = GetDeviceLayoutValues.Height
    Private left As Int = (screenwidth/2)-(WebView1.Width/2)
    Private top As Int = (screenheight/2)-(WebView1.Height/2) - 40dip     ' titlebar
    If (screenwidth < screenheight) Then    ' portrait
        WebView1.SetLayout(left,top,WebView1.Width,WebView1.Height)
    Else
        WebView1.SetLayout(0dip,0dip,screenwidth,screenheight)
    End If
End Sub
 
Upvote 0

Mattiaf

Active Member
Licensed User
To test the screen orientation i usually use a solution like this one.
The webview is resized when the screen orientation is landscape.
There are probably more elegant solutions using a designer script.
In this example only the AutoScaleAll command is in the designer script.
You can change the size of the webview in the designer and the webview will still be centered in portrait mode.
test screen orientation:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region
#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region
Sub Process_Globals
    Private xui As XUI
End Sub
Sub Globals
    Private WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    WebView1.JavaScriptEnabled=True
    WebView1.LoadUrl("http://google.com")
    Private screenwidth As Int = GetDeviceLayoutValues.Width
    Private screenheight As Int = GetDeviceLayoutValues.Height
    Private left As Int = (screenwidth/2)-(WebView1.Width/2)
    Private top As Int = (screenheight/2)-(WebView1.Height/2) - 40dip     ' titlebar
    If (screenwidth < screenheight) Then    ' portrait
        WebView1.SetLayout(left,top,WebView1.Width,WebView1.Height)
    Else
        WebView1.SetLayout(0dip,0dip,screenwidth,screenheight)
    End If
End Sub
Hey it is working perfectly but whenever I'm changing the position of the phone, the stream stops, like if I'm refreshing the page.. Do you know why?
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
Hey it is working perfectly but whenever I'm changing the position of the phone, the stream stops, like if I'm refreshing the page.. Do you know why?
see:
 
Upvote 0

PaulMeuris

Active Member
Licensed User
When a device is rotated then the state of the activity is changed.
You can find an answer to the why question here: Activity lifecycle
You can find a possible solution to the situation if you follow the link in message #4
 
Upvote 0
Top