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.
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
Screenshot_20180929-172223.png


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...
 

Attachments

  • Example.apk
    293.6 KB · Views: 307
  • SS_PreviewImagePicker V1.04.zip
    5.2 KB · Views: 279
  • SS_PreviewImagePicker V1.05.zip
    5.3 KB · Views: 367
Last edited:

Mahares

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

udg

Expert
Licensed User
Longtime User
Now we know who the boss is in your household
It's the same almost everywhere..eheh
 

Peter Simpson

Expert
Licensed User
Longtime User
@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 ;)
 
Last edited:

Mahares

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

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

Multiverse app

Active Member
Licensed User
Longtime User
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' :rolleyes:
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
 

Peter Simpson

Expert
Licensed User
Longtime User
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
Front.png
 
Last edited:

Multiverse app

Active Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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
c42.png
 
Last edited:

Peter Simpson

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


Thank you...
 

Multiverse app

Active Member
Licensed User
Longtime User
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!
 

ciprian

Active Member
Licensed User
Longtime User
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

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

Philip Prins

Active Member
Licensed User
Longtime User
Hello Peter ,

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

Regards,
Philip
 
Top