Android Question Showing images in a CLV with different scales

[josejad]

Hi all:

I need some ideas to "draw" (or setup) a tower, divided by sections with differents width/height into a CLV.

I've drawn it like this, every dotted blue line square is a different section of the tower.
As you can see, every section has different height, but I've set the same width, trying to use the FIT_WIDTH option from the B4XImages views.

I need add elements, and show them into clvs. This is my best approach, but using a different layout for every element section element, and if I test in differents devices, it changes...

As you can see, in the upper element I haven't made any adjust yet.

Can you think in a right way of adjusting every element in such a way they fit with just a layout?

See attached a project with the images and some test, if you want to play with.

I guess my best options would be drawing the elements in a canvas, because they are not complex drawings, but I would be very slow making it.

Thanks in advance.

 

[Erel]

This is a case where it will be simpler, and you will get better results, if you handle the scaling yourself.

1. Make all image files be with the same width.
2. Calculate the ratio between the UI width and the image width.
3. For each item, calculate the UI height based on this ratio.
4. Set the resize mode to FILL.

 

[josejad]

Hi Erel:

Thanks for the advices

1. Make all image files be with the same width.

Ok, I did it this way

2. Calculate the ratio between the UI width and the image width.

ratio = imgSection.Bitmap.Width / Root.Width '<---- ImgSection is the B4XImage containing the image. Should I delete the AutoScale option in designer view?

3. For each item, calculate the UI height based on this ratio.

Not sure about this one... I understand the logic, but I can't get the result. One of the tries, is:

Private Sub AddSection (Layout As String, image As String, Text As String, Width As Int) As Panel
    Dim p As Panel
    p.Initialize("")
    p.SetLayout(0, 0, Width, 430dip)
    p.LoadLayout(Layout)
    imgSection.Load(File.DirAssets, image &".png")
    lblSection.Text = Text
   
    'If imgSection.GetBitmap.Height < imgSection.GetBitmap.Width Then imgSection.ResizeMode = "FILL_WIDTH" 'By default, I've set to FIT
   
    Dim ratio As Float
    ratio =  imgSection.Bitmap.Width / Root.Width
    p.Height = imgSection.Bitmap.Height * ratio
    p.Tag = image
    Return p
End Sub

4. Set the resize mode to FILL.

Done, set to FILL instead to FIT_WIDTH

 

[Erel]

Should I delete the AutoScale option in designer view?

Yes.

Set the height of p before you load the layout.

 

[josejad]

Set the height of p before you load the layout.

Hi Erel:

Before loading the layout, imgSection is no initialized so I can't get imgSection.mBase.Width.

 

[josejad]

I'm trying to load the image before to get the ratio, but I get an error:

Private Sub AddSection (Layout As String, image As String, Text As String, Width As Int) As Panel
    Dim im As B4XImageView
    im.Initialize(Me, "")
    im.Load(File.DirAssets, image &".png") '<---------- Error occurred on line: 112 (B4XImageView).... Object should first be initialized (B4XView)
    Dim ratio As Float
    ratio =  im.Bitmap.Width / Root.Width

    Dim p As Panel
    p.Initialize("")
    p.SetLayout(0, 0, Width, 430dip)
    p.Height = im.Bitmap.Height * ratio
    p.LoadLayout(Layout)
    imgSection.Load(File.DirAssets, image &".png")
    lblSection.Text = Text
 
    p.Tag = image
    Return p
End Sub

Spoiler: Log

Registro conectado a: samsung SM-A105FN
--------- beginning of main
--------- beginning of system
Copying updated assets files (1)
Service started in the background. Trying to start again in foreground mode.
*** Service (starter) Create ***
** Service (starter) Start **
Service started in foreground mode.
** Activity (main) Create, isFirst = true **
Error occurred on line: 112 (B4XImageView)
java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1055)
at b4a.example.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1062)
at b4a.example.b4xpagesmanager._showpage(b4xpagesmanager.java:419)
at b4a.example.b4xpagesmanager._addpage(b4xpagesmanager.java:247)
at b4a.example.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:261)
at b4a.example.b4xpagesmanager._initialize(b4xpagesmanager.java:167)
at b4a.example.main._activity_create(main.java:418)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
at b4a.example.main.afterFirstLayout(main.java:105)
at b4a.example.main.access$000(main.java:17)
at b4a.example.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:246)
at android.app.ActivityThread.main(ActivityThread.java:8587)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)
Caused by: java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:336)
at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
... 24 more
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
... 25 more
Caused by: java.lang.RuntimeException: Object should first be initialized (B4XView).
at anywheresoftware.b4a.AbsObjectWrapper.getObject(AbsObjectWrapper.java:67)
at anywheresoftware.b4a.objects.B4XViewWrapper.asViewWrapper(B4XViewWrapper.java:89)
at anywheresoftware.b4a.objects.B4XViewWrapper.getWidth(B4XViewWrapper.java:142)
at b4a.example.b4ximageview._load(b4ximageview.java:78)
at b4a.example.b4xmainpage._addsection(b4xmainpage.java:67)
at b4a.example.b4xmainpage._b4xpage_created(b4xmainpage.java:117)
... 27 more
** Activity (main) Resume **

Edit***: Dim im As B4XImageView = XUIViewsUtils.CreateB4XImageView. This way, avoid the error, but it stills not works

 

[angel_]

Maybe like this:

Private Sub AddSection (Layout As String, image As String, Text As String, Width As Int) As Panel
    Dim bmp As B4XBitmap = xui.LoadBitmap(File.DirAssets, image & ".png")
    Dim Ratio As Double = bmp.Height / bmp.Width
    
    Dim p As Panel
    p.Initialize("")
    p.SetLayout(0, 0, Width, 430dip)
    p.Height = Width * Ratio
    p.LoadLayout(Layout)
    
    imgSection.Bitmap = bmp
    imgSection.ResizeMode = "FILL"
    lblSection.Text = Text
 
    p.Tag = image
    Return p
End Sub

 

[josejad]

Thanks for the answer angel:

No luck yet. I'm so confused right now with panel, layout, image heights...

 

[angel_]

Perhaps the anchors are not well defined in the designer

 

[josejad]

YES¡¡¡
Thank you angel. Probably in all the test I haven't tested the right combination of little things to make it work¡¡¡