Android Question Cards list with Responsive Images

[Christian García S.]

Hello everyone,

I followed the tutorial to create the lists based on https://www.b4x.com/android/forum/threads/cards-list-with-customlistview.87720/

My card only consists of a title and an image that occupies the whole card, but I have a problem when I follow the example of the tutorial the height is fixed size and image is distorcioned.

How I can do to obtain the height of the image and based on that set the height of the card and the imageview (like instagram with different images and differents sizes cards)

The images are loaded through httputils.

Thanks a lot

 

[LucaMs]

I'm checking the example.

As you can see (routine CreateItem), bitmaps are loaded using xui.LoadBitmapResize and the parameter KeepAspectRatio is set to True, then the image shouldn't look distorted.

In the same routine a layout is loaded, "Card1", which contains the ImageView.

 

[Christian García S.]

Thanks @LucasMs,

When you have this line

ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Image, ImageView1.Width, ImageView1.Height, True))

The parameters on function LoadBitmaResize are for static content, how I can put dynamic content there obtained from a URL with httputils.

On other hand look the designer.

I have imgCard always with height 150 , but tomorrow I want put an image with height 300, how I can change card to adjust to this new image and occupy the entire screen and not fit to the 150.

I want change imgCard height and Item height, depending on the content I'm getting from web services.

Thanks.

 

[LucaMs]

The parameters on function LoadBitmaResize are for static content, how I can put dynamic content there obtained from a URL with httputils.

Call CreateItem after a Wait For [your bitmap download] <--- example/placeholder!

I want change imgCard height and Item height, depending on the content I'm getting from web services.

You should have an ImageView (imgCard) with fixed size, since LaodBitmapResize will resize the image correctly.

Or you will have to use more than one layout (at most 2 or 3, I would say, no more), for different "types of item".

 

[LucaMs]

Sorry, I thought LoadBitmapResize worked as I supposed (works it? ).

Tested (attached project) and it does not seem to do what I expect.

You could use FitCenterBitmap.

 

[LucaMs]

Sorry, I thought LoadBitmapResize worked as I supposed (works it? ).

Yes !

If you set the Gravity of ImageView1 to CENTER, LoadBitmapResize works perfectly.

 

[Christian García S.]

Thanks @LucasMs

Call CreateItem after a Wait For [your bitmap download] <--- example/placeholder!

The image that I download with httputils is inside "File.DirAssets" and the name of the image is the name of the "JPG file" of the URL, this is correct ???

Or you will have to use more than one layout (at most 2 or 3, I would say, no more), for different "types of item".

Costumers uploads the image according to their criteria I can not restrict the user to two or three sizes, we can not create create a function that obtains the dimensions of the image for example.

https://stackoverflow.com/questions/37742553/how-to-get-image-width-and-height-from-a-network-url

After, I set height to Layout and ImageView.

Thanks a lot.

 

[LucaMs]

The image that I download with httputils is inside "File.DirAssets" and the name of the image is the name of the "JPG file" of the URL, this is correct ???

No, because you can not write in File.DirAssets.

Post the code you use to download the image (you should use OkHttp and OkHttputils2):
https://www.b4x.com/android/forum/threads/b4x-okhttputils2-with-wait-for.79345/).



I think that you can use a single layout, with an ImageView bigger enough and load in it any bitmap, using LoadBitmapResize.

Anyway, you can create the "layout" at runtime, inside the CreateItem routine.
Actually it is so:

Private Sub CreateItem(Width As Int, Title As String, Image As String, Content As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("Card1")
 
    lblTitle.Text = Title
    lblContent.Text = Content
    SetColorStateList(lblAction1, xui.Color_LightGray, lblAction1.TextColor)
    SetColorStateList(lblAction2, xui.Color_LightGray, lblAction2.TextColor)
    ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Image, ImageView1.Width, ImageView1.Height, True))
    Return p
End Sub

but you can create any type of view you need and add it to p (the base panel), instead of load a Layout (Card1); or you can change the size of ImageView1.

Private Sub CreateItem(Width As Int, Title As String, Image As String, Content As String) As Panel
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 280dip
    If GetDeviceLayoutValues.ApproximateScreenSize < 4.5 Then height = 310dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    ' p.LoadLayout("Card1")
Dim lblTitle As Label
lblTitle.Initialize("lblTitle")
p.AddView(lblTitle...)
    lblTitle.Text = Title
    lblContent.Text = Content
Dim lblAction1, lblAction2 ...
lblAction1.Inizialie....
p.AddView(lblAction...)
    SetColorStateList(lblAction1, xui.Color_LightGray, lblAction1.TextColor)
    SetColorStateList(lblAction2, xui.Color_LightGray, lblAction2.TextColor)
Dim ImageView1 As ImageView
ImageView1.Initialize...
p.AddView(ImageView1...)

    ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Image, ImageView1.Width, ImageView1.Height, True))
    Return p
End Sub

In the code above I want to say only that you can create views at runtime, you don't NEED to load a layout created by Designer.

 

[Christian García S.]

Thanks @LucaMs

I will try your example (2nd) at runtime, its looks perfect.

ImageView1.SetBitmap(xui.LoadBitmapResize(File.DirAssets, Image, ImageView1.Width, ImageView1.Height, True))

I am currently using httputils to download the image, as I adapt it to work with LoadBitmapResize ??

Thanks

 

[LucaMs]

https://www.b4x.com/android/forum/t...-simple-way-to-download-images.30875/#content