B4J Question Loading a scaled background image programatically

AKJammer

Active Member
Licensed User
Hey All,

Hopefully this is a quick one. I've found hints that it can be done and managed to get something unscaled, but figured I'd check with the group.

I'd like to change my main menu screen background depending on the organization that is using the program. I can change it in the designer obviously, but don't want to have to recompile every time the background or the program icon needs to change. I found an old post from 2012 where Erel said you could use ImageView or the style. He then gave an example of using the style with
B4X:
MainForm.RootPane.Style = "-fx-background-image: url('" & File.GetUri(File.DirAssets, "bitmap.png") & "');"
I used that and was able to get the background to change, but not scaled to fit the form.
What's the best way to do something like this? I'd like to end up having a configuration page where the user will choose an image. I'll store the name in the database and load it at startup.

Thanks,
Jim
 

AKJammer

Active Member
Licensed User
lol, ok, there we have hints again.

Played with it some more... For anyone looking later, here's what I did.
So to use an ImageView, we should paste a full size imageview over top of our form in the designer. I'm not sure if that can be done programatically, but it's probably easier to just create the container with the designer. Be sure to anchor all sides and send it to back.

Then use Erel's Sub from here: https://www.b4x.com/android/forum/t...-fit-images-without-distortion.86627/#content

To load the bitmap and scale it properly.

B4X:
dim imgBackground as ImageView

sub Show
    ...........
    MainForm.Show
   
    Dim bmp As B4XBitmap = xui.LoadBitmap(File.DirAssets, "EventBackGround-PalmSprings.jpg")
    FillImageToView(bmp, imgBackground)
end sub

Sub FillImageToView(bmp As B4XBitmap, ImageView As B4XView)
    Dim bmpRatio As Float = bmp.Width / bmp.Height
    Dim viewRatio As Float = ImageView.Width / ImageView.Height
    If viewRatio > bmpRatio Then
        Dim NewHeight As Int = bmp.Width / viewRatio
        bmp = bmp.Crop(0, bmp.Height / 2 - NewHeight / 2, bmp.Width, NewHeight)
    Else if viewRatio < bmpRatio Then
        Dim NewWidth As Int = bmp.Height * viewRatio
        bmp = bmp.Crop(bmp.Width / 2 - NewWidth / 2, 0, NewWidth, bmp.Height)
    End If
    Dim scale As Float = 1
    ImageView.SetBitmap(bmp.Resize(ImageView.Width * scale, ImageView.Height * scale, True))
End Sub

Thanks,
Jim
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
Or alternatively add
B4X:
-fx-background-size: 100% 100%;
to your css line

eg;
B4X:
MainForm.RootPane.Style = "-fx-background-image: url('" & File.GetUri(File.DirAssets, "bitmap.png") & "');-fx-background-size: 100% 100%;"
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
I agree Erel, I was just using the OP code to show the additional css required.
 
Upvote 0

AKJammer

Active Member
Licensed User
lol, Ok, I agree, but the original mainform.rootpane.style line came from Erel in the first place. Probably before CSSUtils was around.

There's lots of information in the forum, but much of it has been overcome by events of newer and better ways of doing things. Many of us newer B4X developers are just trying to find something that works by digging into the forums first before asking the questions.
 
Upvote 0
Top