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.
  • Under tab GlamAR > Skin Analysis, should have atleast one app with its appId

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

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)
}

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()
        val overrides = GlamAROverrides(
            category = "skinanalysis",
            configuration = Configuration(
                skinAnalysis = SkinAnalysisConfig(
                    appId = "YOUR_skin-app-id"
                ),
            )
        )
        GlamAr.init(context = this, accessKey = "YOUR_ACCESS_KEY", overrides = overrides)
    }
}

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.

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​

skinAnalysis​

Open the live camera to start skin analysis flow. If cateogry and appId is not provided correctly, it will show an error

GlamAr.skinAnalysis("start");

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("skin-analysis"){
    GlamArLogger.d("TAG", "skin-analysis callback")
}

removeEventListener​

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

GlamAr.removeEventListener("skin-analysis")