Android Question Change dimension of WebView when phone is rotated

Mattiaf · Oct 6, 2022

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 · Oct 7, 2022

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

Mattiaf · Oct 7, 2022

PaulMeuris said:

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?

TILogistic · Oct 7, 2022

Mattiaf said:
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:

Persist webview through orientation change

Is there a way in b4a to persist a webview when the orientation is changed? We can obviously get the url and reload it, but what if the user has entered some data and then decides to rotate. All is lost. Searching on net shows the use of manifest edit...

www.b4x.com

PaulMeuris · Oct 8, 2022

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

Android Question Change dimension of WebView when phone is rotated

Mattiaf

Active Member

PaulMeuris

Well-Known Member

Mattiaf

Active Member

TILogistic

Expert

Persist webview through orientation change

PaulMeuris

Well-Known Member

Android Question Change dimension of WebView when phone is rotated

Mattiaf

Active Member

PaulMeuris

Well-Known Member

Mattiaf

Active Member

TILogistic

Expert

Persist webview through orientation change

PaulMeuris

Well-Known Member

Privacy & Transparency

Privacy & Transparency