Picasso: Extension to load images efficiently with Picasso

Extensions
1

1.Introduction

Description: Extension to load images with Picasso
Latest Version: 2
Released: 2021-03-08T18:30:00Z
Last Updated: 2023-06-29T18:30:00Z

2.Blocks

image
image320×595 15.1 KB

image

3.Usages

The extension can be used with any view component.
A good example will be this:

image

image
image736×319 20.4 KB

If you want to resize image then make sure you provide both, height and width.

Delete cache if you want to load fresh image
image

4.Source Code

You can find the source code at the below repo:

5.Downloads

Download Aix:

com.sunny.Picasso.aix (339.7 KB)

6.Liked my work

Thank you :heart:

7. Updates

ChangeLog Version 1.1

New blocks
image

Changes

  • Enabled enableIndicators property
ChangeLog Version 1.2
  • Added Dynamic Component's support
ChangeLog Version 1.3
  • Multiple images can be loaded asynchronously
  • Better cache support
ChangeLog Version 1.4
  • Added new transformation options
  • Multiple transformations separated by , can be used
ChangeLog Version 2

Picasso: Extension to load images efficiently with Picasso - #36 by vknow360

Hope it helps!

13 Likes
2

What is Picasso? Does it mean like loading animation for the image?

2 Likes
3

Picasso is an image loading and caching library.It does most of the work from its own and is very easy to use so it is best for new developers.

Unfortunately it does not support Gif loading.

2 Likes
4

But where is the advantage over the Image component?

Screenshots / Blocks

Second from Image component:

grafik
grafik639×857 152 KB

grafik
grafik884×434 25.7 KB

3 Likes
5

Caching and transformation options.
Image loading libraries are not meant to be used for small size images.
They are used to dynamically load images.
It is similar to Glide, another same kind of library.

6

Nice Extension @vknow360 :heart_eyes: :+1:
Good Job :sunglasses: :+1:

1 Like
7

I see that the image loaded with Picasso is very blurry.

8

Therefore, it would be worth showing how the extension works in the sample aia file, so that you can see where it is superior to the image component. To make it easy to see when it is better to apply the extension and when the image component. After that, thanks for expanding and expanding your list of very useful extensions.

1 Like
9

Yes.
@Anke can you share the image url?

Creating an aia file for just this block is a very difficult task:

Here is your answer:

If you want a detailed comparison than here you go:

1 Like
10

Of course, I'll send it via PM.

1 Like
11

Here are my test results:
(Image1 is loaded with Picasso)

Screenshot_2020-12-29-21-42-17
Screenshot_2020-12-29-21-42-17576×1024 371 KB

Screenshot_2020-12-29-21-42-37
Screenshot_2020-12-29-21-42-37576×1024 31.1 KB

Because Vertical Arrangement != Image :sweat_smile:

How is it better than Image component?

  • does not block UI
  • caches image for future use
  • gives options for transformation
  • provides callbacks for image loading (Success and ErrorOccurred events)
  • options for placeholder and error images (useful for thumbnails)
  • works with all view components
2 Likes
12

Nice extension @vknow360
You are building extensions very fastly :heart_eyes:

1 Like
13

@vknow360 Please remove READ permission request for the ASD.

2 Likes
14

You can compile the desired version from github repo. :sweat_smile:

1 Like
15

ChangeLog Version 1.1

New blocks
image

Changes

  • Enabled enableIndicators property
16

Here is a minor update:

ChangeLog Version 1.2

  • Now it supports Dynamic Components

Aix
com.sunny.Picasso.aix (165.8 KB)

1 Like
17

ChangeLog Version 1.3

  • Multiple images can be loaded asynchronously
  • Better cache support

Aix
com.sunny.Picasso.aix (697.1 KB)

1 Like
18

A lot will increase the size of the extension by this cache support.

19

Yes, because now it uses OkHttp lib to cache images.

20

Can you please tell me whether it is possible with this extension to call up an image from the private data dir (internal storage) without READ permission?

/data/user/0/<packageName>/files/
file:///data/user/0/<packageName>/files/

Unfortunately, the Image component requests permissions for all paths
(except for the assets (/data/data/...).

1 Like