Android Question B4X - images and smartphone screens

luke2012 · Jan 22, 2021

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

iPhone Screens

BillMeyer · Jan 22, 2021

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) !!

LucaMs · Jan 22, 2021

High resolution and start from here:
https://www.b4x.com/android/forum/t...-fit-images-without-distortion.86627/#content
but use B4XImageView.

TILogistic · Jan 22, 2021

LucaMs said:
High resolution and start from here:
https://www.b4x.com/android/forum/t...-fit-images-without-distortion.86627/#content
but use B4XImageView.

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.

luke2012 · Jan 22, 2021

LucaMs said:
High resolution and start from here:
https://www.b4x.com/android/forum/t...-fit-images-without-distortion.86627/#content
but use B4XImageView.

@LucaMs thanks for the suggestion
So you mean a single hi-res image for all screens?
But in my case I'm using a B4XGifView instead of B4XImageView.

luke2012 · Jan 22, 2021

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) !!

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

LucaMs · Jan 22, 2021

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.

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.

LucaMs · Jan 23, 2021

luke2012 said:
So you mean a single hi-res image for all screens?
But in my case I'm using a B4XGifView instead of B4XImageView.

It's the same; you will have a big B4XGifView

Android Question B4X - images and smartphone screens

luke2012

Well-Known Member

Attachments

BillMeyer

Well-Known Member

LucaMs

Expert

TILogistic

Expert

luke2012

Well-Known Member

luke2012

Well-Known Member

LucaMs

Expert

LucaMs

Expert

Similar Threads

Android Question B4X - images and smartphone screens

Well-Known Member

Attachments

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency