Android Question Product "browser"

luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Hi to all.
I have to choose a GUI to show a list of products (record with product pic & description) to allow the customer to choose like a movie browser (see the attached pic).

In other words, I'm looking 4 a new way to display this kind of catalog apps.
What do you think about ?
 

Attachments

  • movie_chooser.jpg
    movie_chooser.jpg
    9.1 KB · Views: 191
Sort by date Sort by votes
LucaMs

LucaMs

Expert
Licensed User
Longtime User
It that a pic "3d" scroller with shadows? It is a big job, of course graphic.

When Informatix read this ... :)

To me it is coming to an idea, but I do not know if it is achievable ...

a panel for scrolling the images in the background;

routines to rotate pictures (there are some on the site);

perhaps there are also for shadows.

(We have a nice language, Luke... B4A, of course ;))

An advertisement said:

"We could dazzle you with special effects"

Uhm..
It is probably true: consumers love these things
 
Last edited:
Upvote 0
Informatix

Informatix

Expert
Licensed User
Longtime User
luke2012 said:
Hi to all.
I have to choose a GUI to show a list of products (record with product pic & description) to allow the customer to choose like a movie browser (see the attached pic).

In other words, I'm looking 4 a new way to display this kind of catalog apps.
What do you think about ?
Click to expand...
You can use the Coverflow library available on this forum. If you can't achieve what you want with it, I can provide you with my own version (a different implementation with more settings) against a little donation.
 
Upvote 0
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
@derez what do you think to customize your horizontal wheel project (we could collaborate) in order to implement a GUI like the attached image?
For me the best mode in a usability perspective, is to implement the HWheel in portrait mode with a full screen pic in the center (focus pic) and the other pics (smaller size) on the left & right side of the focus pic.

What do you think about ?
 
Upvote 0
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Informatix said:
You can use the Coverflow library available on this forum. If you can't achieve what you want with it, I can provide you with my own version (a different implementation with more settings) against a little donation.
Click to expand...

Very interesting proposal @Informatix !

There is a demo version or some screenshot of your version so I can evaluate ?
Can you explain better "different implementation with more settings" ?
 
Upvote 0
Informatix

Informatix

Expert
Licensed User
Longtime User
luke2012 said:
Can you explain better "different implementation with more settings" ?
Click to expand...

It is designed with a different philosophy. The images can be supplied in real-time or loaded before displaying the gallery. So you can adapt the loading to the number and size of images to display. Another difference is that I don't put images in a cache. You have to use my Cache library if you need to (and the result will be more effective than the solution chosen by lonelystar which should be named "temp storage with very short life" to be precise). Another difference is that the gallery is able to scale properly the images (you can have different sizes and aspect ratios).
Here all the methods and properties:
  • CoverFlow
    Events:
    • ItemClick (Position As Int)
    • ItemLongClick (Position As Int)
    • ItemSelected (Position As Int)
    • NeedBitmap (Position As Int) As Object
    • NeedBitmapCount As Int
    Methods:
    • AddBitmap (Bmp As BitmapWrapper)
      Adds a bitmap to the list.
      This function is ignored if WithList = false.
    • BitmapCount As Int
      Returns the number of items in the bitmap list.
    • BringToFront
      Changes the Z order of this view and brings it to the front.
    • ClearBitmapList
      Clears the bitmap list. This function is ignored if WithList = false.
    • Initialize (ImageWidth As Int, ImageHeight As Int, WithList As Boolean, WithReflection As Boolean, EventName As String)
      Initializes the CoverFlow view.
      ImageWidth: maximum width of images.
      ImageHeight: maximum height of images.
      WithList: if true, all bitmaps are retrieved from a list populated with AddBitmap. If false, each bitmap is requested when needed by the NeedBitmap event (NeedBitmapCount is called before to return the number of bitmaps) and Refresh must be called to update the gallery.
      WithReflection: if true, a reflection effect is added under each image.
      EventName: prefix of the event handlers (myEventName_ItemClick, myEventName_ItemLongClick, myEventName_ItemSelected, myEventName_NeedBitmap).
    • Invalidate
      Invalidates the whole view forcing the view to redraw itself. Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • Invalidate2 (Rect As Rect)
      Invalidates the given rectangle.
      Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • Invalidate3 (Left As Int, Top As Int, Right As Int, Bottom As Int)
      Invalidates the given rectangle.
      Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • IsInitialized As Boolean
    • Refresh
      Updates the contents of the gallery (the bitmaps displayed).
      Calls to this function are only required if WithList = false.
      It cannot be called in Activity_Create and must be called at least once after Initialize.
    • RemoveView
      Removes this view from its parent.
    • RequestFocus As Boolean
      Tries to set the focus to this view. Returns True if the focus was set.
    • SendToBack
      Changes the Z order of this view and sends it to the back.
    • SetBackgroundImage (Bitmap As Bitmap)
    • SetLayout (Left As Int, Top As Int, Width As Int, Height As Int)
      Changes the view position and size.
    • SetSpacing (Value As Int)
      Sets the spacing between images (default = -15).
    Properties:
    • Background As Drawable
      Gets or sets the background drawable.
    • Color As Int [write only]
      Sets the background of the view to be a ColorDrawable with the given color.
      If the current background is of type GradientDrawable or ColorDrawable the round corners will be kept.
    • Enabled As Boolean
    • Height As Int
    • ImageReflectionRatio As Float
      Gets/sets the image reflection ratio (default = 0.3).
    • Left As Int
    • MaxRotationAngle As Int
      Gets/sets the maximum rotation angle of each image (default = 60).
    • MaxZoom As Int
      Gets/sets the maximum zoom of the central image (default = -120).
    • ReflectionGap As Float
      Gets/sets the reflection gap.
    • ReflectionIntensity As Int
      Gets/sets the reflection intensity (from 0:dark to 255:bright).
    • Selection As Int
      Gets/sets the selected item.
    • Tag As Object
      Gets or sets the Tag value. This is a place holder which can used to store additional data.
    • Top As Int
    • Visible As Boolean
    • Width As Int
      Gets or sets the view's width.
 
Upvote 0
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Informatix said:

It is designed with a different philosophy. The images can be supplied in real-time or loaded before displaying the gallery. So you can adapt the loading to the number and size of images to display. Another difference is that I don't put images in a cache. You have to use my Cache library if you need to (and the result will be more effective than the solution chosen by lonelystar which should be named "temp storage with very short life" to be precise). Another difference is that the gallery is able to scale properly the images (you can have different sizes and aspect ratios).
Here all the methods and properties:
  • CoverFlow
    Events:
    • ItemClick (Position As Int)
    • ItemLongClick (Position As Int)
    • ItemSelected (Position As Int)
    • NeedBitmap (Position As Int) As Object
    • NeedBitmapCount As Int
    Methods:
    • AddBitmap (Bmp As BitmapWrapper)
      Adds a bitmap to the list.
      This function is ignored if WithList = false.
    • BitmapCount As Int
      Returns the number of items in the bitmap list.
    • BringToFront
      Changes the Z order of this view and brings it to the front.
    • ClearBitmapList
      Clears the bitmap list. This function is ignored if WithList = false.
    • Initialize (ImageWidth As Int, ImageHeight As Int, WithList As Boolean, WithReflection As Boolean, EventName As String)
      Initializes the CoverFlow view.
      ImageWidth: maximum width of images.
      ImageHeight: maximum height of images.
      WithList: if true, all bitmaps are retrieved from a list populated with AddBitmap. If false, each bitmap is requested when needed by the NeedBitmap event (NeedBitmapCount is called before to return the number of bitmaps) and Refresh must be called to update the gallery.
      WithReflection: if true, a reflection effect is added under each image.
      EventName: prefix of the event handlers (myEventName_ItemClick, myEventName_ItemLongClick, myEventName_ItemSelected, myEventName_NeedBitmap).
    • Invalidate
      Invalidates the whole view forcing the view to redraw itself. Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • Invalidate2 (Rect As Rect)
      Invalidates the given rectangle.
      Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • Invalidate3 (Left As Int, Top As Int, Right As Int, Bottom As Int)
      Invalidates the given rectangle.
      Redrawing will only happen when the program can process messages. Usually when it finishes running the current code.
    • IsInitialized As Boolean
    • Refresh
      Updates the contents of the gallery (the bitmaps displayed).
      Calls to this function are only required if WithList = false.
      It cannot be called in Activity_Create and must be called at least once after Initialize.
    • RemoveView
      Removes this view from its parent.
    • RequestFocus As Boolean
      Tries to set the focus to this view. Returns True if the focus was set.
    • SendToBack
      Changes the Z order of this view and sends it to the back.
    • SetBackgroundImage (Bitmap As Bitmap)
    • SetLayout (Left As Int, Top As Int, Width As Int, Height As Int)
      Changes the view position and size.
    • SetSpacing (Value As Int)
      Sets the spacing between images (default = -15).
    Properties:
    • Background As Drawable
      Gets or sets the background drawable.
    • Color As Int [write only]
      Sets the background of the view to be a ColorDrawable with the given color.
      If the current background is of type GradientDrawable or ColorDrawable the round corners will be kept.
    • Enabled As Boolean
    • Height As Int
    • ImageReflectionRatio As Float
      Gets/sets the image reflection ratio (default = 0.3).
    • Left As Int
    • MaxRotationAngle As Int
      Gets/sets the maximum rotation angle of each image (default = 60).
    • MaxZoom As Int
      Gets/sets the maximum zoom of the central image (default = -120).
    • ReflectionGap As Float
      Gets/sets the reflection gap.
    • ReflectionIntensity As Int
      Gets/sets the reflection intensity (from 0:dark to 255:bright).
    • Selection As Int
      Gets/sets the selected item.
    • Tag As Object
      Gets or sets the Tag value. This is a place holder which can used to store additional data.
    • Top As Int
    • Visible As Boolean
    • Width As Int
      Gets or sets the view's width.
Click to expand...

Very interesting !
Can I see some sample screen of rectangular images in portrait mode ?
 
Upvote 0
You must log in or register to reply here.
Top