Android Question Showing images in a CLV with different scales

josejad

Expert
Licensed User
Longtime User
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.

1634548368235.png


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.

1634550649147.png


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.
 

Attachments

  • TestImages.zip
    209.3 KB · Views: 76
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
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.
 
Upvote 0

josejad

Expert
Licensed User
Longtime User
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:

B4X:
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

1634566247141.png
 
Last edited:
Upvote 0

josejad

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


B4X:
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

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
 
Last edited:
Upvote 0

angel_

Well-Known Member
Licensed User
Longtime User
Maybe like this:

B4X:
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
 
Upvote 0

josejad

Expert
Licensed User
Longtime User
Thanks for the answer angel:

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

test.gif


1634629478908.png
 
Upvote 0

angel_

Well-Known Member
Licensed User
Longtime User
Perhaps the anchors are not well defined in the designer
 

Attachments

  • TestImages.zip
    209.3 KB · Views: 76
Upvote 2
Solution
Top