Android Question Fit An Image

[Ionut Indigo]

Hello,
I'm having some issues with stretching/fitting an image in an ImageView. Also i'm using LoadBitmapSample to load it. I need them to nicely in BetterSlidingPanels.

Here is my code:

Sub Activity_Create(FirstTime As Boolean)
    Dim panels(15) As Panel
    For i = 0 To panels.Length - 1
        panels(i).Initialize("panels")
        Dim imga As ImageView
        imga.Initialize("")       
        imga.Bitmap = LoadBitmapSample(File.DirAssets, "picture" & i & ".jpg", 100%x, 100%y)
        imga.Gravity = Gravity.Center
        panels(i).AddView(imga,0,0,100%x,100%y)
        Activity.AddView(panels(i), 100%x, 0, 100%x, 100%y)
    Next

    ActiveBitmap.Initialize(File.DirAssets, "indicator_active.png")
    InactiveBitmap.Initialize(File.DirAssets, "indicator_inactive.png")
   
    sd.Initialize
    SlidingPanels.Initialize(sd, panels, True, 50)
    sd.currentPanel = currentPanelBeforePaused - 1
   
    Indicator = SlidingPanels.CreatePageIndicator(panels.Length, InactiveBitmap, 120dip, 16dip)
    Activity.AddView(Indicator, (100%x - 120dip) / 2, 0, 120dip, 16dip)
    Indicator.BringToFront
    ChangePanel(0)
End Sub

Right now with Gravity.Center i get this:

But i want to lose the top and bottom blank space.
And with Gravity.Fill i get this:

And that distorts/stretches the image, and it doesn't look natural.
I want to fit it like this:

Not sure if the Gravity can help, but 100%x and 100%y doesn't make the image fit on the screen.

 

[LucaMs]

if your imageview does not have the same ratio of the image, the maximum you can get is the one with the blanks (Gravity.Center)

 

[strat]

I don't know there is a simpler way or not so I tried to explain how you will handle this.

 

[Ionut Indigo]

Hey Strat,
The original image is the one attached below, so it's a 1024x768.
So when i load the picture i just need it to fit from top to bottom.

 

[thedesolatesoul]

I've had similar issues with the imageview gravity + alignment, not sure how to call this.
What you want is Scale.Fit_Y + Gravity.Centre_X
Not sure how to acheive that, but at the end you might have to sadly use a canvas to draw it yourself.

 

[Informatix]

You should try my BetterImageView lib. Placing the image in the foreground (Bitmap property) with ScaleType = center_crop should work fine.

 

[klaus]

Try this:

For i = 0 To panels.Length - 1
  panels(i).Initialize("panels")
  Dim imga As ImageView
  imga.Initialize("")     
  imga.Bitmap = LoadBitmapSample(File.DirAssets, "picture" & i & ".jpg", 100%x, 133%x)
  imga.Gravity = Gravity.Center
  Activity.AddView(panels(i), 100%x, 0, 100%x, 133%x)
  panels(i).AddView(imga,0,0,100%x,133%x)
Next

As the Height/Width ratio is 1024 / 768 = 1.33
Setting the height of the views to 133%x maintains the Height/Width ratio.
Perhaps there are cases where 133%x is too high.
In this case you could keep the height = 100%y but set the width = 75%y

 

[Ionut Indigo]

Hey Klaus,
I have done some testing before with your suggestion, it work and not.
Not all my images are 1024x768, and with other sizes there will be some cropping, and because i have a lot of picture (15) i get Downsampling image due to lack of memory and some images are super small.
I'll be trying Informatix library.

 

[Ionut Indigo]

Well BetterImageView Library did the job! Thank you!
Now the only problem is the Downsampling on some images.

 

[strat]

Well BetterImageView Library did the job! Thank you!
Now the only problem is the Downsampling on some images.

Good. Then, no need to write extra code now. Informatix had already solved the problem.

 

[Ionut Indigo]

Good. Then, no need to write extra code now. Informatix had already solved the problem.

Yes, i know.

 

[thedesolatesoul]

Well BetterImageView Library did the job! Thank you!
Now the only problem is the Downsampling on some images.

What Gravity and Scaling settings did you use?

 

[Ionut Indigo]

Hey TDS,
I'm using Gravity CENTER and ScaleType SCALETYPE_CENTER_CROP.