Android Question B4X - images and smartphone screens

luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Hi all,
talking about a splash screen image (or gif) within a B4X app I have a couple of questions (target screens: Smartphone (Android) and iPhone (iOS) portrait mode):

1) Which is the best solution (in 2021 with B4X) to display it within the different screen size and resolutions without image distortion or loss of quality ?
1.1) A single hi-res image for all screens? In this case what is the correct aspect ratio and resolution (and strategy) ?
1.2) Multiple images one for each screen type and use the Android and iOS features to programmatically load them (see Smartphone Screens below) ?

2) Talking about a B4XPages / MainPage (layout with splash screen image), I have to cut from the image height the title bar height because I can't hide it (I mean hide it only for that page) ?

Thanks in advance for your help / suggestions.
Luca.

Smartphone Screens
smartphone_screens.png


iPhone Screens
iphone_screens.jpg

iphone screens table.png
 

Attachments

  • iphone_screens.jpg
    iphone_screens.jpg
    124.9 KB · Views: 296
Last edited:
Sort by date Sort by votes
BillMeyer

BillMeyer

Well-Known Member
Licensed User
Longtime User
Good Day,

The way I would do it (and I am not always correct - but rather set in my ways)

Create a layout in designer - place onto this layout a full page webview and disable "Zoom enabled" (at bottom of screen - in Properties Section).
Then, make sure your webview is full screen and anchored left/right and top bottom.

Now in your Main load the Splash Layout First (in B4XPages - this is done in B4XMainPage) then load the image you wish to use using:

Load Image to WebView: 
wvSplash.LoadHtml("<html><body><img width=100% src='file:///android_asset/gpf.gif'/></body></html>") '<-- gpf.gif - your choice of image here
Dim SplashTimer As Timer
SplashTimer.Initialize("SplashTimer",8500) ' <-- 8.5 seconds - your choice

Sub wvSplash_PageFinished (Url As String)
    SplashTimer.Enabled = True 'Start the timer for as long as you want the Splash displayed
End Sub

Sub SplashTimer_Tick
    SplashTimer.Enabled = False 'Switch off the timer'
    Activity.LoadLayout("scrmain") ' Now load your Main Screen Layout
End Sub

' This is untested code and only meant as an example

Remember to set these as well

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

You can basically run any image here within bounds. Types that do not work well are ones where there are Round or Square logos for example placed in the middle of the image. A well sorted HTML file here with animations, sliders etc also works well as a splash screen. This should work well on all the B4X platforms.

Whilst your splash is running - use the opportunity to run any setups, global variable seeding or permission settings/checking that may be required.

I hope this helps.

Other B4X'ers are welcome to critique or present their own better solutions - I'm always open to NEW learning (even at 61 and set in my ways) !!
 
Upvote 0
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
BillMeyer said:
Good Day,

The way I would do it (and I am not always correct - but rather set in my ways)

Create a layout in designer - place onto this layout a full page webview and disable "Zoom enabled" (at bottom of screen - in Properties Section).
Then, make sure your webview is full screen and anchored left/right and top bottom.

Now in your Main load the Splash Layout First (in B4XPages - this is done in B4XMainPage) then load the image you wish to use using:

Load Image to WebView: 
wvSplash.LoadHtml("<html><body><img width=100% src='file:///android_asset/gpf.gif'/></body></html>") '<-- gpf.gif - your choice of image here
Dim SplashTimer As Timer
SplashTimer.Initialize("SplashTimer",8500) ' <-- 8.5 seconds - your choice

Sub wvSplash_PageFinished (Url As String)
    SplashTimer.Enabled = True 'Start the timer for as long as you want the Splash displayed
End Sub

Sub SplashTimer_Tick
    SplashTimer.Enabled = False 'Switch off the timer'
    Activity.LoadLayout("scrmain") ' Now load your Main Screen Layout
End Sub

' This is untested code and only meant as an example

Remember to set these as well

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

You can basically run any image here within bounds. Types that do not work well are ones where there are Round or Square logos for example placed in the middle of the image. A well sorted HTML file here with animations, sliders etc also works well as a splash screen. This should work well on all the B4X platforms.

Whilst your splash is running - use the opportunity to run any setups, global variable seeding or permission settings/checking that may be required.

I hope this helps.

Other B4X'ers are welcome to critique or present their own better solutions - I'm always open to NEW learning (even at 61 and set in my ways) !!
Click to expand...

Hi @BillMeyer,
first of all, thanks for your suggestion.
B4X: 
#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: False
#End Region
Unfortunately this is not possible within my B4XPages project because if you disable the Title (#IncludeTitle: False) the user lose the app navigation (all others pages lose the back arrow icon).

"A well sorted HTML file here with animations, sliders etc also works well as a splash screen. This should work well on all the B4X platforms."
In my case I have an animated gif. So do you suggest to use WebView instead of B4XGifView ?
I am trying to understand the advantages and disadvantages of the 2 solutions:

1) Layout with WebView
2) B4XImageView / B4XGifView and this https://www.b4x.com/android/forum/t...-fit-images-without-distortion.86627/#content
 
Upvote 0
LucaMs

LucaMs

Expert
Licensed User
Longtime User
oparra said:
EREL is looking at you, remember the last post about using images.

you are the student who likes the teacher to get angry. ????

it's a joke you know.

Regards.
Click to expand...
This time it wasn't a joke; in the thread pointed to by that link, Erel himself added, at the beginning, the suggestion to use B4XImageView instead of what is explained in that thread, because when it was written B4XImageView did not yet exist.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

EdsonZanatta
  • Question
Android Question About displays (6.20,6.40,6.70)
Replies
3
Views
759
Erel
Erel
luke2012
  • Question
Android Question B4XPages & multi-screen
Replies
2
Views
998
Erel
Erel
Addo
  • Question
Android Question what is the best icon size for android 5 devices ?
Replies
5
Views
1K
Erel
Erel
merlin2049er
  • Question
Android Question image size
Replies
3
Views
2K
Erel
Erel
JackKirk
  • Article
B4A Class Programmatically set screen settings
Replies
0
Views
3K
JackKirk
JackKirk
Top