[Android SDK] Added hotspots

Release note:

Updates to PXLPhotoProductView

  • If showHotspots = true is passed from the app-side to PXLPhotoProductView, SDK draws hotspots on PXLPhotoProductView similar to lightbox
  • Tapping a hotspot scrolls the product list UI and navigate to the right product.
  • Tapping the content hide and show all hotspots.
  • always read original url to get content's width and height for calculating the positions of hotspots on the screen because bounding_box_products's x, y, with, height are generated based on the original content's width height from Control Panel.


[DEMO] A new example to the demo app

  • how to access the example: Launch the app > main screen > tap Hotspots in PXLPhotoProductView button

[DATA] Added a new field to PXLPhoto

  • boundingBoxProducts contains hotspots' positions on the content
public class PXLPhoto implements Parcelable {
    public List<PXLBoundingBoxProduct> boundingBoxProducts;

public class PXLBoundingBoxProduct implements Parcelable {
    @Json(name = "product_id")
    public String productId;

    @Json(name = "x")
    public int x;

    @Json(name = "y")
    public int y;

    @Json(name = "width")
    public int width;

    @Json(name = "height")
    public int height;

    @Json(name = "aspect_ratio")
    public double aspectRatio;

[UI] Added a new option to PXLPhotoProductView to display hotspots

  • showHotspots: pxlPhotoProductView.setContent(..) is added to PXLPhotoProductView
    - true: display hotspots. tapping on the content show/hide hotspots.
    - false: don't display hotspots.

  • note that hotspots are only visible on Image. it's not available on video.

  • Code Example

    • To display hotspots, you need to set showHotspots = true. Please see the example codes below.
                  showHotspots = true,

Please note that below can happen

Some hotspots are located outside of the screen. This's not a bug. It's from the different screen ratios of mobile devices and the display options which are ImageScaleType's [FIT_CENTER, CENTER_CROP].

What does ImageScaleType do?

  • FIT_CENTER displays all areas of the image keeping the ratio of the content and fill the rest of the screen with a blurry image.
  • CENTER_CROP also keeps the ratio of the content. It fills the screen and crops the rest of the areas.
    Situation 1. FIT_CENTER: displays hotspots in most cases. but it cannot display hotspots that are located outside of the screen area.
    Situation 2. CENTER_CROP: hotspots are located outside of the screen because the areas of the image where certain hotspots are supposed to be located are cropped.

Here's the example

Example 1: Best case

Control Panel

Example 2: in CENTER_CROP, one hotspot is off the screen.

Control Panel

Example 3: in CENTER_CROP, one hotspot is located under the product list UI.

Control Panel

Example 4:

  • FIT_CENTER: a hotspot located top left is partially off the screen.
  • CENTER_CROP: the same hotspot is totally off the screen.
Control Panel