---
updatedAt: 2026-10-08T06:46:01.000Z
agentTools:
  projectIndex: https://docs.spyne.ai/llms.txt
---

# Initiating Images and 360 Shoot

## About Shoot Builder

Shoot builder is an object where all the configuration settings are set up for Spyne Android SDK. Shoot builder expects basic parameters and allows you to use advanced functionalities as well.

### Create a shoot builder function

Shoot builder function expects 4 values,

1. **context** is the current activity context
2. **userId** is a string value and needs to be an Email ID.
   1. Note: Typically this should be the email id of the user currently logged in, please connect with us in case your platform doesn't support capturing an email id of the user.
3. **skuListener** is the callback interface which you have to implement in your activity/fragment and over-ride the given methods,
   * **onSkuCreated**: This callback is returned on project creation & returns SpyneSKUId. SpyneSKUId will be useful on fetching processed images using our Public API.
   * **onShootCompleted**: This callback is returned on project completion. Please note, in case of reshoot, this callback is returned will extra parameter **isReshoot**. This parameter will be true in cases where reshoot has taken place.
4. **Angle** is the integer value and denotes the count of exterior angles to be shot by the user.

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
            <div class = "tab">skuListener methods</div>
    </div>
        <div class='text-area'>
            <span class = "orange">fun</span> onSkuCreated (skuId: <span class = "green">String</span>)
                <br>
                <span class = "orange">fun</span> onShootCompleted(skuId: <span class = "green">String</span>, isReshoot: <span class = "orange">Boolean</span>)
                <br><br>
            </div>
                </div>
      </body>
</html>
`}</HTMLBlock>

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
            <div class = "tab">Shoot Builder Object</div>
    </div>
        <div class='text-area'>
            <span class = "orange">var</span> builder = Spyne.ShootBuilder(
                <br/>
                <div class = "left-border">
                        context: <span class = "orange">this</span>,
                        <br>
                        userId: <span class = "green">"myUniqueEmailId"</span>
                        <br>
                        skuListener: <span class = "orange">this</span>,
                        <br>
                        angle: <span class = "blue">8</span>
                        <br>
            </div>
            )
                </div>
      </body>
</html>
`}</HTMLBlock>

### Add ShootID configuration to Shoot Builder

ShootID expects a string value and is a **mandatory** key which will be mapped to the unique Spyne SKU Id (SKU Name).\
Do note, ShootID does not allow blank values and special characters.

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
    </div>
        <div class='text-area'>
        <span class = "blue">builder.uniqueShootId</span>(uniqueShootId: <span class = "green"> "myUniqueShootId"</span>)
</div>
</body>
</html>
`}</HTMLBlock>

### Specifying Shoot type

Spyne SDK allows user to shoot through guided flow as well as Upload images. Before initiating the SDK shoot, shoot type expects a specific value.

**Shoot** will initiate the Spyne guided shoot flow

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
    </div>
        <div class='text-area'>
        <span class = "blue">builder.ShootType</span>(ShootType.<span class = "purple">SHOOT</span>)
        
</div>
</body>
</html>
`}</HTMLBlock>

###

### Initiating the image shoot flow

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
    </div>
        <div class='text-area'>
        <span class = "orange">val </span><span class = "white">spyne = builder.build()
        <br>
        spyne.start()</span></div>
</div>
</body>
</html>
`}</HTMLBlock>

###

### Initiating the 360 shoot flow

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
    </div>
        <div class='text-area'>
        <span class = "orange">val </span><span class = "white">spyne = builder.build()
        <br>
        spyne.spyne.startVideoThreeSixty()</span></div>
</div>
</body>
</html>
`}</HTMLBlock>

###

### Setting up advanced configurations in Shoot Builder

Spyne SDK allows you to add advanced features as per your requirement. You can append these advance features in the Shoot Builder function before starting it, as shown below. To know more about the Advanced SDK configurations, please click [here]().

<HTMLBlock>{`
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet"> <style>
  .box-container {
        display: inline-block;
        background: #2B2B2B;
        color:#fff;
        position: relative;
        width:600px;
        line-height:20px !important;
        font-family: 'Inconsolata', monospace;
    }
    .left-box {
        position: absolute;
        height:100%;
        width:20px;
        background-color:#39393A;
        left:0px;
        top:0px;
    }
    .text-area {
        position:relative;
        padding:20px 50px;
    }
    .text-area div {
        padding-left:30px;
    }
    .top-left {
        left: 10px;
        top:10px;
    }
    .top-right {
        right:10px;
        top:10px;
    }
    .bottom-left {
        bottom:10px;
        left:10px;
    }
    .bottom-right {
        bottom:10px;
        right:10px;
    }
    .left-border {
        border-left: 1px solid #39393A;
    }
    .purple {
        color:#9876AA;
    }
    .green{
        color:#6A8759;
    }
    .orange{
        color:#b46d31
    }
    .blue{
        color:#6492b3
    }
    .tab {
        width:fit-content !important;
        display:flex;
        justify-content: left;
        align-items: left;
        padding:5px 10px;
        background-color: #39393A;
        /* background-color: ; */
        cursor: pointer;
    }
    .header {
        display: flex;
        justify-content: left !important;
        align-items: left !important;
    }
</style>
</head>
<body>
    <div class="box-container">
        <div class = "header">
    </div>
        <div class='text-area'>
        <span class = "blue">builder.uniqueShootId</span>(<span class = "green">"myUniqueShootId"</span>)<span class = "blue">.shootLocation</span>(<span class = "orange">false</span>)
</div>
</body>
</html>
`}</HTMLBlock>