B4A Library [Lib+Class] CustomGallery

CustomGallery is a very small library (BitmapPlus) and a class (ClsCustomGallery) for B4A v2.0.
Its goal is to display thumbnails in a row, column or grid. It's highly customizable as you can see in the screenshots.

It needs two other libraries: ScrollView2D and Reflection

Tutorial: How they do #2

img1.jpg img2.jpg img3.jpg img4.jpg img5.jpg
List of functions:
Initialize(Parent As Object, Left As Int, Top As Int, Width As Int, Height As Int, GalleryStyle As Int, Callback As Object, subTouch As String, subClick As String, subLongClick As String, subScroll As String)
ClearGallery
RemoveColoredBorders
(bmpToCrop As Bitmap, Color As Int) As Bitmap
NumberOfThumbnails As Int
ProcessBitmap(SrcBmp As Bitmap) As Bitmap
AddThumbnail(SrcBmp As Bitmap, Tag As Object)
AddFolder(Dir As String, MaxNbFiles As Int)
InsertThumbnailAt(SrcBmp As Bitmap, Position As Int, Tag As Object)
InsertOnTop(SrcBmp As Bitmap, Position As Int, Tag As Object)
InsertFileAt(Dir As String, FileName As String, InsertPosition As Int, Tag As Object)
MoveThumbnail(FromPos As Int, ToPos As Int)
RemoveThumbnailAt(Position As Int)
RemoveThumbnailWithTag(Tag As Object)
GetThumbnailAt(Position As Int) As Panel
GetThumbnailWithTag(Tag As Object) As Panel
JumpTo(Position As Int)
SetLabelInGrid(Thumbnail As Panel, LabelText As String, LabelColor As Int, LabelSize As Int)
LoadDrawable(Name As String) As Object
AddDrawableTo(Thumbnail As Panel, Drawable As Object)

List of options:
BorderColor As Int
BorderSize As Int
ForceColorReduction As Boolean: if true, reduces the bitmap colors and removes the alpha channel to save memory
MinTiltAngle As Int
MaxTiltAngle As Int
AlternateAngle As Boolean: if true, tilt angles are alternately < 0 and > 0
HorizontalOffset As Int: shifts the thumbnails to the right (+) or to the left (-)
VerticalOffset As Int: shifts the thumbnails to the bottom (+) or to the top (-)
PressedDrawable As Object: drawable displayed when a thumbnail is clicked
RescaleOnlyIfBigger As Boolean: if true, the rescaling function is called only if the source image is bigger than the thumbnail
LabelHeightInGrid As Int: height of labels below thumbnails
SizeInGrid As Int: size of thumbnails inside a grid
SizeInPile As Int: size of thumbnails with the pile style
SpaceBetweenThumbnails As Int
StillVisible As Int: if there's an offset, defines the minimum visible size of thumbnails

v1.1: see details here
v1.11: Fixed three minor bugs
v1.2: see details here
v1.3: Fixed a bug and added the ForceColorReduction option
v1.31: Compatible with obfuscation and JellyBean
v1.32: No more warnings with B4A v2.7.
v1.321: Minor change. I added two entries to the Manifest of examples to enable the hardware acceleration and a large heap.

If you want to download the library and the class, you need only the file CustomGallery#1.zip. If you want to run the full demo, download the five files. After unzipping, you should have nineteen images (18 jpg + 1 png) in the Files folder of the demo.

Another demo (with the MediaBrowser library) is available here.

Fred
 

Attachments

  • CustomGallery#2.zip
    362.3 KB · Views: 1,416
  • CustomGallery#3.zip
    375.5 KB · Views: 1,254
  • CustomGallery#4.zip
    296.8 KB · Views: 1,269
  • CustomGallery#5.zip
    331.9 KB · Views: 1,713
  • CustomGallery#1 v1.321.zip
    283.2 KB · Views: 1,524
Last edited:

gadgetmonster

Active Member
Licensed User
Longtime User
Hi Frederic,

On one of my activities I have a standard scroll view which displays a photo and then various lines of data underneath it. What I wanted to do was add a customgallery underneath the photo so basically im adding your customgallery onto a panel which inturn is added to the main scrollview.

From this screen I can press a button that loads another activity which also has a custom gallery on it. I get the following error if I launch the second activity and then press the back key to return to the first activity, I get the following exception:

B4X:
java.lang.ClassCastException: android.widget.ImageView cannot be cast to android.view.ViewGroup
    at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:893)
    at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1075)
    at android.app.BackStackRecord.run(BackStackRecord.java:682)
    at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1455)
    at android.app.FragmentManagerImpl$1.run(FragmentManager.java:441)
    at android.os.Handler.handleCallback(Handler.java:730)
    at android.os.Handler.dispatchMessage(Handler.java:92)
    at android.os.Looper.loop(Looper.java:137)
    at android.app.ActivityThread.main(ActivityThread.java:5414)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:525)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1187)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
    at dalvik.system.NativeStart.main(Native Method)

If the custom gallery has one or two images in it, everything works fine. As soon as you have a third it errors.

If I remove the code that simply populates the gallery on the first activity (shown below) then again everything works fine.

B4X:
gallery.ClearGallery
For i = 0Toentry.Photos.Size - 1
Dim phEx AstypPhoto
phEx = entry.Photos.Get(i)
gallery.AddThumbnail(LoadBitmap(phEx.Dir, phEx.FileName), i)
Next

Do you have any idea why this would be? I have tried using very small images but the problem persists.
 

Hajzenberg

Member
Licensed User
Longtime User
Hello,
I have application which downloads a set of thumbnails which I want to display in CustomGallery.
Array of bitmaps are stored in public global:

B4X:
 Public images() As Bitmap

And when I call
B4X:
MyGallery.AddThumbnail(images(i), i)

it crashes in Private Sub SquareBmp with passed object bmp which is not initialized.
What I am doing wrong, how to add thumbnail with existing loaded bitmap object, and not using LoadBitmap?
 

Informatix

Expert
Licensed User
Longtime User
Hi Frederic,

On one of my activities I have a standard scroll view which displays a photo and then various lines of data underneath it. What I wanted to do was add a customgallery underneath the photo so basically im adding your customgallery onto a panel which inturn is added to the main scrollview.

From this screen I can press a button that loads another activity which also has a custom gallery on it. I get the following error if I launch the second activity and then press the back key to return to the first activity, I get the following exception:

If I understand you well, you placed the gallery in a ScrollView. I don't recommend it because the gallery is already based on a ScrollView and that may lead to unexpected results.
Concerning your issue, I don't know why it happens. It's the first time I see it. In this example, I use a first gallery to access a second gallery. No error occurs when I return to the first gallery. I presume there's an error somewhere in your code when you resume the activity.
 

Informatix

Expert
Licensed User
Longtime User
Hello,
I have application which downloads a set of thumbnails which I want to display in CustomGallery.
Array of bitmaps are stored in public global:

B4X:
 Public images() As Bitmap

And when I call
B4X:
MyGallery.AddThumbnail(images(i), i)

it crashes in Private Sub SquareBmp with passed object bmp which is not initialized.
What I am doing wrong, how to add thumbnail with existing loaded bitmap object, and not using LoadBitmap?
I'm not sure to understand your question because AddThumbnail expects an existing bitmap. You can set its first parameter to a bitmap that you have created or that you have loaded with your own function; it doesn't matter.
The error that you get means that the bitmap reference is null and has no contents. A bitmap must be initialized to be used, either with the Initialize function or by loading it.
 

Hajzenberg

Member
Licensed User
Longtime User
Yap, you were right, my bitmap collection was not initialized properly (JobDone was not really done :)
Solved it and everything works fine now.
Question - how to handle clicks, to get image details of clicked item?
 

sasetcolombia

Member
Licensed User
Longtime User
Hi!
once they are removing thumbnails with MyGallery1.RemoveThumbnailWithTag method (Thumbnail.Tag) .... what would be the procedure to refresh all images?
 

sasetcolombia

Member
Licensed User
Longtime User
Hi!
once they are removing thumbnails with MyGallery1.RemoveThumbnailWithTag method (Thumbnail.Tag) .... what would be the procedure to refresh all images?


I answer me.

this code works ok:
Sub imgActualizarGaleria_Click
DoEvents: DoEvents
For i = 1 To 5
MyGallery1.AddThumbnail(LoadBitmap(File.DirAssets, "imagenes1/image" & i & ".png"), i)
Next

End Sub



Thanks!
 

grafsoft

Well-Known Member
Licensed User
Longtime User
Do you have a simpe exaample which displays only one folder? I do not really understadn how this works. Thank you!
 

MarcoRome

Expert
Licensed User
Longtime User
Hi Alex, Thank you for this fantastic Library. I have a few dubious about this:

B4X:
Sub crea

    MyGallery1.Initialize(Activity, 0, 0, 100%x, 100%y, 2, Me, "", "Gallery_OnClick", "", "")
    MyGallery1.SizeInGrid = Floor(MyGallery1.SV2D.Height / 3)
   
    Dim pnl As Panel, lbl As Label
    MyGallery1.BorderColor = Colors.White
    MyGallery1.BorderSize = 3dip
    For i = 1 To 18
        MyGallery1.AddThumbnail(LoadBitmap(File.DirAssets, "image" & i & ".jpg"), i)

        pnl = MyGallery1.GetThumbnailAt(i - 1)
       
            lbl.Initialize("")
            lbl.Text = "Queen Selezione " & i
            lbl.TextSize = 14
            lbl.Color = Colors.Magenta
            lbl.Typeface = Typeface.DEFAULT_BOLD
            lbl.Gravity = Gravity.LEFT + Gravity.CENTER_HORIZONTAL
            lbl.TextColor = Colors.White
            pnl.AddView(lbl, 8dip, 4dip, pnl.Width - 28dip, 20dip)
    Next
End Sub

in this sub create MyGallery1 whit 3 pictures:
B4X:
MyGallery1.SizeInGrid = Floor(MyGallery1.SV2D.Height / 3)
when i click top one picture ( Gallery_OnClick ) i have this code:

B4X:
Sub Gallery_OnClick(Thumbnail As Panel)

     'Pulisco la prima Gallery
    MyGallery1.ClearGallery ' <-----------------IS RIGHT THIS ???
    MyGallery2.Initialize(Activity, 0, 0, 100%x, 100%y, 2, Me, "", "", "Gallery_OnLongClick", "")
    MyGallery2.SizeInGrid = Floor(MyGallery2.SV2D.Height)
   
   
    Dim pnl As Panel, lbl As Label
    MyGallery2.BorderColor = Colors.White
    MyGallery2.BorderSize = 3dip
    For i = 1 To 18
        MyGallery2.AddThumbnail(LoadBitmap(File.DirAssets, "image" & i & ".jpg"), i)

        pnl = MyGallery2.GetThumbnailAt(i - 1)

            lbl.Initialize("")
            lbl.Text = "Queen Selezione " & i
            lbl.TextSize = 14
            lbl.Color = Colors.Magenta
            lbl.Typeface = Typeface.DEFAULT_BOLD
            lbl.Gravity = Gravity.LEFT + Gravity.CENTER_HORIZONTAL
            lbl.TextColor = Colors.White
            pnl.AddView(lbl, 8dip, 4dip, pnl.Width - 28dip, 20dip)

    Next
   
    'Jump position
'    Msgbox("Prima di passare " & Thumbnail.Tag , "messaggio")
    MyGallery2.JumpTo( Thumbnail.Tag - 1 ) ' <------------ IS RIGHT THIS ??
      
End Sub

1) Is right that i utilize MyGaller1.ClearGallery ??
2) Why JumpTo dont work ?? i see that i put MsgBox so i stop code... this work , where i must put this code ( Jumpto ) ???

Thank you
Very much
 

Informatix

Expert
Licensed User
Longtime User
CustomGallery is a class I wrote some time ago and my current knowledge of the class is probably not better than yours. ;) I have to read the code again.
To avoid OutOfMemory errors with this class, it is strongly advised to add "SetApplicationAttribute(android:largeHeap,"true")" to the manifest (I'm going to add this line to the example).
 

Informatix

Expert
Licensed User
Longtime User
Hi Alex, Thank you for this fantastic Library. I have a few dubious about this:

B4X:
Sub crea

    MyGallery1.Initialize(Activity, 0, 0, 100%x, 100%y, 2, Me, "", "Gallery_OnClick", "", "")
    MyGallery1.SizeInGrid = Floor(MyGallery1.SV2D.Height / 3)
  
    Dim pnl As Panel, lbl As Label
    MyGallery1.BorderColor = Colors.White
    MyGallery1.BorderSize = 3dip
    For i = 1 To 18
        MyGallery1.AddThumbnail(LoadBitmap(File.DirAssets, "image" & i & ".jpg"), i)

        pnl = MyGallery1.GetThumbnailAt(i - 1)
      
            lbl.Initialize("")
            lbl.Text = "Queen Selezione " & i
            lbl.TextSize = 14
            lbl.Color = Colors.Magenta
            lbl.Typeface = Typeface.DEFAULT_BOLD
            lbl.Gravity = Gravity.LEFT + Gravity.CENTER_HORIZONTAL
            lbl.TextColor = Colors.White
            pnl.AddView(lbl, 8dip, 4dip, pnl.Width - 28dip, 20dip)
    Next
End Sub

in this sub create MyGallery1 whit 3 pictures:
B4X:
MyGallery1.SizeInGrid = Floor(MyGallery1.SV2D.Height / 3)
when i click top one picture ( Gallery_OnClick ) i have this code:

B4X:
Sub Gallery_OnClick(Thumbnail As Panel)

     'Pulisco la prima Gallery
    MyGallery1.ClearGallery ' <-----------------IS RIGHT THIS ???
    MyGallery2.Initialize(Activity, 0, 0, 100%x, 100%y, 2, Me, "", "", "Gallery_OnLongClick", "")
    MyGallery2.SizeInGrid = Floor(MyGallery2.SV2D.Height)
  
  
    Dim pnl As Panel, lbl As Label
    MyGallery2.BorderColor = Colors.White
    MyGallery2.BorderSize = 3dip
    For i = 1 To 18
        MyGallery2.AddThumbnail(LoadBitmap(File.DirAssets, "image" & i & ".jpg"), i)

        pnl = MyGallery2.GetThumbnailAt(i - 1)

            lbl.Initialize("")
            lbl.Text = "Queen Selezione " & i
            lbl.TextSize = 14
            lbl.Color = Colors.Magenta
            lbl.Typeface = Typeface.DEFAULT_BOLD
            lbl.Gravity = Gravity.LEFT + Gravity.CENTER_HORIZONTAL
            lbl.TextColor = Colors.White
            pnl.AddView(lbl, 8dip, 4dip, pnl.Width - 28dip, 20dip)

    Next
  
    'Jump position
'    Msgbox("Prima di passare " & Thumbnail.Tag , "messaggio")
    MyGallery2.JumpTo( Thumbnail.Tag - 1 ) ' <------------ IS RIGHT THIS ??
     
End Sub

1) Is right that i utilize MyGaller1.ClearGallery ??
2) Why JumpTo dont work ?? i see that i put MsgBox so i stop code... this work , where i must put this code ( Jumpto ) ???

Thank you
Very much
Did you solve your problems?
 

MarcoRome

Expert
Licensed User
Longtime User
Hi Informatix. Unfortunately no. After that i click about image... or i have 150 image or more... i receive error.
 

MarcoRome

Expert
Licensed User
Longtime User
Hi Informatix, sorry but "old" project was deleted :(
Anyway if you work with 100 image or more...and click, one, two, ten time.... dont work. You need to restart the app.
 
Top