B4A Library Preview image picker

Hello all,
I was looking for a single row vertically scrolling preview image picker on the forum, I couldn't find one so I spent about 30 minutes or so creating V1.00 of this library for myself. After Joanne my lovely partner saw it, she said I should put it on the forum for others to use, so here it is. The preview image picker will display jpg, png and bmp images.

Please note that if you are going to be using EXTERNAL_STORAGE etc then you MUST add RuntimePermissions.

Type Sub [Space > TAB] to find the correct event sub call PreviewImagePicker.

Basic instructions:
Select SS_PreviewImagePicker from the libraries manager tab.

Sub Globals
     Private ImagePicker As PreviewImagePicker
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ImagePicker.Initialize(Me, Activity, "Logo")
    ImagePicker.OpenImagePicker("Select an image", Folder, 4dip, 7dip, 300, True, Colors.LightGray, False)
End Sub

Sub Logo_Click(ImageFolder As String, FileName As String)
     Log($"Folder = ${ImageFolder}, Image = ${FileName}"$)
     ImagePicker.CloseImagePicker
End Sub

Screen shot

29/09/2018 V1.00
- Initial release.
V1.01
- Removed blank square spaces for files that are not jpg, png or bmp.
V1.02
- Added ShowDivider parameter to display a divider line.
V1.03
- Added DividerColor parameter so that developers can change the divider line color.
- The title text color is no longer LightTheme dependent.
- Removed logs.
01/10/2018 V1.04
- Rewrote populate image list routine for faster image population.
- Recalculated divider line position by a couple of dips.
- Initialize method - Moved some parameters from this method to the OpenImagePicker method.
- OpenImagePicker method - Added some parameters to this method from the Initialize method.
- Added LowerList parameter to start the top of the preview list at 10%y instead of 5%y for 'ACToolBar...'.
- Optimised previewer images to make them smaller in memory size for preview list.
- Added ToLowerCase to make sure that no images are missed whilst populating.
03/10/2018 V1.05
- Fixed bug where if the selected folder is empty, the picker wouldn't close correctly.

This is a simple library to use.

SS_PreviewImagePicker

Author: Peter Simpson
Version: 1.05

• PreviewImagePicker
  
  • Events:
    • Click (ImageFolder As String, ImageFile As String)
  • Functions:
    • CloseImagePicker As String
      Close the image picker folder
      
    • Initialize (Callback As Object, Parent As Activity, EventName As String) As String
      Initialize the preview image picker
      Example: Initialize(Me, Activity, "Logo")
      
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • OpenImagePicker (Title As String, ImageFolder As String, Elevation As Int, CornerRadius As Int, AnimationDuration As Int, ShowDivider As Boolean, DividerColor As Int, LowerList As Boolean) As String
      Open the image picker folder
      Example: OpenImagePicker("Select your logo", File.DirAssets, 4dip, 7dip, 300, True, Colors.LightGray, True)
      

Let me know if it's useful to you, I've also uploaded an example apk file

Enjoy...

 

[Mahares]

This is a simple library to use, let me know if it's useful to you

@Peter Simpson: Very nice, simple and smooth scrolling. Here are a couple of things if you can tweak your lib:
1. Can you accommodate a border between the images as a separator. Now it looks like a long continuous strip.
2. If you have files that are not images in the chosen folder, it shows a long strip of white space you have to scroll through. You want to eliminate that if possible.
Joanne was right to have you post the lib to the forum. Now we know who the boss is in your household.

 

[udg]

Now we know who the boss is in your household

It's the same almost everywhere..eheh

 

[Peter Simpson]

@Peter Simpson: Very nice, simple and smooth scrolling. Here are a couple of things if you can tweak your lib:
1. Can you accommodate a border between the images as a separator. Now it looks like a long continuous strip.
2. If you have files that are not images in the chosen folder, it shows a long strip of white space you have to scroll through. You want to eliminate that if possible.
Joanne was right to have you post the lib to the forum. Now we know who the boss is in your household.

Thank you @Mahares for the information.

I've done a quick update to the library, could you please try out V1.01 and let me know if you are still getting the same issue. I think that I see what the issue is, but I wasn't getting the same issue as you even though I have .zip and .txt tiles in my download and assets folders, I was just seeing the images that I expected to see in the list from top to bottom.

The boss, hmm Jo will agree 100% with that comment, grrrrrrr.

It's the same almost everywhere..eheh

You're not wrong, she's great. If you ever read me say 'my better half', you will know it's Joanne that I'm talking about @udg

 

[Mahares]

could you please try out V1.01 and let me know if you are still getting the same issue

That update took care of the extra white space. It is very good in its current state, but if you want to carry it further:
1. The photo divider is still not visible, although not critical.
2. "Select your logo" as a title does not show up anywhere on the activity

 

[Peter Simpson]

That update took care of the extra white space. It is very good in its current state, but if you want to carry it further:
1. The photo divider is still not visible, although not critical.
2. "Select your logo" as a title does not show up anywhere on the activity

Thank you for the invaluable feedback and for testing the picker library for me.

1. I didn't add an image divider line because personally I didn't need one. Anyway I've now added an optional image divider line into the updated library V1.02
2. I've now manually set the title color to dark Gray, you should always see the title now no matter what theme is selected.

Peter...

 

[Multiverse app]

Hello all,
I was looking for a single row vertical preview image picker on the forum, I couldn't find one so I spent about 30 minutes or so creating this library for myself, Joanne said I should put it on the forum, so here it is.

Please note that if you are going to be using EXTERNAL_STORAGE etc then you MUST add RuntimePermissions.

Type Sub [Space > TAB] to find the correct event sub to use.

Basic instructions:
Select SS_PreviewImagePicker from the libraries manager tab.

Sub Globals
     Private ImagePicker As PreviewImagePicker
End Sub

Sub Activity_Create(FirstTime As Boolean)
     ImagePicker.Initialize(Me, Activity, "Logo", "Select your logo", File.DirAssets, 4dip, 7dip, 300, True, Colors.LightGray)
     ImagePicker.OpenImagePicker
End Sub

Sub Logo_Click(ImageFolder As String, FileName As String)
     Log($"Folder = ${ImageFolder}, Image = ${FileName}"$)
     ImagePicker.CloseImagePicker
End Sub

Yes I know, it should read 'app' and not 'apps'
View attachment 72680

29/09/2018 V1.00
- Initial release.
V1.01
- Removes blank spaces for files that are not jpg, png or bmp.
V1.02
- Added optional image divider line.
V1.03
- You can now change the divider line color.
- Changed the code to make sure that the title is always visible.
- Removed logs.

This is a simple library to use, let me know if it's useful to you

Enjoy...

This is awesome!
Needed something exactly like this

 

[Multiverse app]

For me, the panel top gets behind the toolbar.
Can you add top, left, width and height properties?

 

[Peter Simpson]

View attachment 72690
For me, the panel top gets behind the toolbar.
Can you add top, left, width and height properties?

You need to use ImagePicker.OpenImagePicker after the line Activity.LoadLayout.

The Preview Image Picker should open above the toolbar according to the bottom screen shot.

I just downloaded Erels app AppCompat With Dynamic Menu And Badge example and I added the library to it, it just worked first time out.

Screen shot

 

[Multiverse app]

You need to use ImagePicker.OpenImagePicker after the line Activity.LoadLayout.

The Preview Image Picker should open above the toolbar according to the bottom screen shot.

I just downloaded Erels app AppCompat With Dynamic Menu And Badge example and I added the library to it, it just worked first time out.

Bad - OpenImagePicker Before LoadActivity
View attachment 72691

Good - OpenImagePicker After LoadActivity
View attachment 72692

I do call it after the loadlayout. Still the same problem

 

[Peter Simpson]

I do call it after the loadlayout. Still the same problem

Multiverse is it possible for you to post a small bare bone code example as in a small project, I can look at what is going on with it then?

It's only a panel, there's no reason that I can currently think of why it should appear behind your toolbar. I've tested it with both Erels example and also with Corwin42 example, with me it appeared above the toolbar.

My last post has screen shots using Erels download link, below is a screen shot using Corwin42 download link, both are using AppCompat V3.52.

Please try to post an example code.

Using Corwin42 example, I just added the library and called OpenImagePicker

 

[Multiverse app]

Hi,
Thanks for the reply!
Please find the example code in the attachments

 

[Peter Simpson]

Hello @Multiverse app,
I see that the problem is the ACToolBar, that was not in any of the examples that I downloaded so thank you for the example source code.

I've updated the library to V1.04 which now has a parameter called 'LowerList' to start the picker lower down by 5% just for the ACToolBar.

Important note:
I've completely changed both the Initialisation and OpenImagePicker methods. Please look at the first post and see the updated basic instructions, I've moved some of the parameters from Initialize to OpenImagePicker as it makes better sense to have them there.

Updated library

Thank you...

 

[Multiverse app]

Hello @Multiverse app,
I see that the problem is the ACToolBar, that was not in any of the examples that I downloaded so thank you for the example source code.

I've updated the library to V1.04 which now has a parameter called 'LowerList' to start the picker lower down by 5% just for the ACToolBar.

Important note:
I've completely changed both the Initialisation and OpenImagePicker methods. Please look at the first post and see the updated basic instructions, I've moved some of the parameters from Initialize to OpenImagePicker as it makes better sense to have them there.

Updated library
View attachment 72728

Thank you...

Thank you for the update, works perfectly!

 

[Peter Simpson]

Updating the library to V1.05, fixes empty folder issue.

 

[hibrid0]

Hi, is possible to select multiple images?

 

[ciprian]

Hello,

First of all, your library is great, i was waiting for it.
In my case, i've just downloaded the lib and exemple, compiled in debug mode ... all fine.
the only problem i have is that when i click on image in the picker , nothing happens. No click event, and the picker still opened.
Can u guide me please? am i missing something?

 

[Mahares]

the only problem i have is that when i click on image in the picker , nothing happens. No click event

Try this:

ImagePicker.Initialize(Me, Activity, "MyPhoto")  'in Activity_Create

Sub MyPhoto_Click(ImageFolder As String, FileName As String)
    Log($"Folder = ${ImageFolder}, Image = ${FileName}"$)
    Activity.SetBackgroundImage(LoadBitmap(ImageFolder,FileName))
End Sub

 

[ciprian]

Briliant, thank you.

 

[Philip Prins]

Hello Peter ,

This is great.
Is it possible to make the preview smaller or sizable ?

Regards,
Philip