---
agentTools:
  projectIndex: https://developers.pixlee.com/llms.txt
---

# [Android SDK] Added hotspots

Release note: <https://github.com/pixlee/android-sdk/releases/tag/2.2.0>

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

### Example

<img src="https://i.ibb.co/8gFhsnW/ezgif-com-gif-maker.gif" width="300" />

### \[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

```java
#!java
public class PXLPhoto implements Parcelable {
...
    public List<PXLBoundingBoxProduct> boundingBoxProducts;
...
}

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

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

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

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

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

    @Json(name = "aspect_ratio")
    @NullableDouble
    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.
  ```kotlin
  #!kotlin
  pxlPhotoProductView
            .setContent(..
                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

<Table>
  <thead>
    <tr>
      <th>
        Control Panel
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/WtbQtC7/cp-car-person.png" width="600" />
      </td>
    </tr>
  </tbody>
</Table>

<Table>
  <thead>
    <tr>
      <th>
        .FIT\_CENTER
      </th>

      <th>
        .CENTER\_CROP
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/VmnjvTZ/fit-car-person.png" width="300" />
      </td>

      <td>
        <img src="https://i.ibb.co/ZH1m90K/crop-car-person.png" width="300" />
      </td>
    </tr>
  </tbody>
</Table>

### Example 2: in CENTER\_CROP, one hotspot is off the screen.

<Table>
  <thead>
    <tr>
      <th>
        Control Panel
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/qW4Bs2b/cp-guitar.png" width="600" />
      </td>
    </tr>
  </tbody>
</Table>

<Table>
  <thead>
    <tr>
      <th>
        .FIT\_CENTER
      </th>

      <th>
        .CENTER\_CROP
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/kHXcRSf/fit-guitar.png" width="300" />
      </td>

      <td>
        <img src="https://i.ibb.co/C8vwbb1/crop-guitar.png" width="300" />
      </td>
    </tr>
  </tbody>
</Table>

### Example 3: in CENTER\_CROP, one hotspot is located under the product list UI.

<Table>
  <thead>
    <tr>
      <th>
        Control Panel
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/bmcHp7P/cp-bicyclers.png" width="600" />
      </td>
    </tr>
  </tbody>
</Table>

<Table>
  <thead>
    <tr>
      <th>
        .FIT\_CENTER
      </th>

      <th>
        .CENTER\_CROP
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/pbGS9dP/fit-bicyclers.png" width="300" />
      </td>

      <td>
        <img src="https://i.ibb.co/gjhkdnR/crop-bicyclers.png" width="300" />
      </td>
    </tr>
  </tbody>
</Table>

### Example 4:

* FIT\_CENTER: a hotspot located top left is partially off the screen.
* CENTER\_CROP: the same hotspot is totally off the screen.

<Table>
  <thead>
    <tr>
      <th>
        Control Panel
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/JndGDMn/cp-workout.png" width="600" />
      </td>
    </tr>
  </tbody>
</Table>

<Table>
  <thead>
    <tr>
      <th>
        .FIT\_CENTER
      </th>

      <th>
        .CENTER\_CROP
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/gMPjt5y/fit-workout.png" width="300" />
      </td>

      <td>
        <img src="https://i.ibb.co/GR1PpP0/crop-workout.png" width="300" />
      </td>
    </tr>
  </tbody>
</Table>