Skip to main content

Android Framework Setup

Overview​

As you follow this tutorial, we recommend using our demo project reference to assist you in integrating the SDK into your project.

icon

Android Demo Project

Prerequisites​

To follow along you should have basic knowledge of creating android apps with Android Studio and it's ecosystem. In this tutorial we are going to use:

Don't worry if you don't have a lot of experience with these (or any experience at all). It is pretty straightforward to use and we will explain everything along.

Install Android Studio and its relevant SDK and NDK's to be able to use and run projects, if you haven't already.

  • Your access key must be setup under Pixelbin > GlamAR console.
  • Any valid SKU inside your Product Inventory under GlamAR.

Visit Getting Started Page if access key or SKU has not been created

Installation​

Maven Central​

The GlamAR SDK is available on Maven Central. Add the following dependency to your app's build.gradle:

dependencies {
    implementation 'io.pixelbin.glamar:glamar:2.0.0'
}

Manual Installation​

Alternatively, you can manually include the .aar file:

  1. Place the .aar file in your project's libs directory
  2. Add the following to your app's build.gradle:
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
    implementation 'com.google.code.gson:gson:2.10.1'
    implementation 'com.squareup.okhttp3:okhttp:4.11.0'
}

Sync your project with Gradle files.

Required Permissions​

Add these permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" /> <!-- Required for camera preview mode -->

Initialization​

Initialize the SDK in your Application class to ensure it is set up when your app starts.

class MyApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        GlamAr.init(context = this, accessKey = "YOUR_ACCESS_KEY")
    }
}

Don't forget to register your Application class in the AndroidManifest.xml:

<application
    android:name=".MyApplication"
    ... >
    <!-- Other configurations -->
</application>

This "init" will prompt our SDK to create a webview and open our SDK in it.

Initialization options​

Opens the SDK Home screen with relevant category module setup.

import io.pixelbin.glamar.model.GlamAROverrides

val overrides = GlamAROverrides(
    category = "sunglasses",
)
GlamAr.init(context = this, accessKey = "YOUR_ACCESS_KEY", overrides)

AR View​

To use the webview we have created you will need to add it your layout. Paste the following code inside your layout xml file where you want to show the webview.

<FrameLayout
    android:id="@+id/glamARView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Inside the activity class add the following code:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // This passes the activity context to the webview
        GlamArWebViewManager.setUpActivityContext(this)

        // This adds the webview created by SDK in the layout
        GlamArWebViewManager.getPreparedWebView()?.let { webView ->
            val glamARView = findViewById<FrameLayout>(R.id.glamARView)
            glamARView.apply {
                addView(webView)
            }
        }
    }
}

You should be able to see GlamAR SDK page being loaded.

Basic Functions​

applyBySku​

Load a virtual try-on using applyBySku method and passing the relevant SKU ID.

GlamAr.applyBySku(skuId = "SKU_ID")

applyByCategory​

Allows the client to pass a subcategory (e.g., sunglasses,necklace,earrings), which the SDK will use to fetch all corresponding SKUs from the Console’s product inventory.

GlamAr.applyByCategory("sunglasses"); // Replace with the desired subcategory

open​

Open the live camera to see the SKU that you applied. If no sku data has been pass to SDK, it will show an error

GlamAr.open();

Permissions​

Ensure that you handle permissions appropriately, especially for camera access when using openLiveOnInit.

override fun onRequestPermissionsResult(
    requestCode: Int,
    permissions: Array<out String>,
    grantResults: IntArray
) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    GlamArPermissionHandler.onRequestPermissionsResult(requestCode, grantResults)
}

Event Handling​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.

addEventListener​

// Can be any event type sent from SDK
GlamAr.addEventListener("sku-applied"){
    GlamArLogger.d("TAG", "sku-applied callback")
}

removeEventListener​

Can also unregister from listening to events previously registered to but calling

GlamAr.removeEventListener("sku-applied")

Example Usage​

Here's a example demonstrating the usage of GlamAr and GlamArView:

class MainActivity : AppCompatActivity() {

    // To properly handle camera and intenert permissions
    override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<out String>,
        grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        GlamArPermissionHandler.onRequestPermissionsResult(requestCode, grantResults)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        // This passes the activity context to the webview
        GlamArWebViewManager.setUpActivityContext(this)

        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        // This adds the webview created by SDK in the layout
        GlamArWebViewManager.getPreparedWebView()?.let { webView ->
            val glamARView = findViewById<FrameLayout>(R.id.glamARView)
            glamARView.apply {
                addView(webView)
            }
        }

        // Make sure to add such a button in you layout xml, otherwise it will not work
        val applyBtn = findViewById<Button>(R.id.apply_sku)

        applyBtn.setOnClickListener {
            GlamAr.applySku(skuId = "YOUR-SKU-ID")
        }
    }
}