B4A Library Preview image picker

Peter Simpson · Sep 29, 2018

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.

B4X:

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 · Sep 29, 2018

Peter Simpson said:
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 · Sep 29, 2018

Now we know who the boss is in your household

It's the same almost everywhere..eheh

Peter Simpson · Sep 29, 2018

Mahares said:
@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.

udg said:
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 · Sep 29, 2018

Peter Simpson said:
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 · Sep 29, 2018

Mahares said:
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.

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
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 · Sep 30, 2018

Peter Simpson said:
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.

B4X:

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 · Sep 30, 2018

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

Peter Simpson · Sep 30, 2018

Multiverse app said:
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 · Sep 30, 2018

Peter Simpson said:
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 · Sep 30, 2018

Multiverse app said:
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 · Oct 1, 2018

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

Peter Simpson · Oct 1, 2018

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 · Oct 1, 2018

Peter Simpson said:
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 · Oct 3, 2018

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

hibrid0 · Dec 17, 2018

Hi, is possible to select multiple images?

ciprian · Dec 21, 2018

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 · Dec 21, 2018

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

Try this:

B4X:

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 · Dec 21, 2018

Briliant, thank you.

Philip Prins · Dec 1, 2019

Hello Peter ,

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

Regards,
Philip

B4A Library Preview image picker

Attachments

Expert

Expert

Expert

Expert

Expert

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency