UI Customization

Before starting this guide, complete Basic Usage.

Overview

PetnowCameraFragment allows you to customize the camera UI to meet client requirements:

Add Custom UI - Method to customize the camera screen from the client
Place Guide UI Over Tracker - Method to customize FloatingGuide UI on the screen from the client

Add Custom UI

Customize the camera screen UI by creating a custom UI layout and injecting it into the module.

class ClientCameraFragment : PetnowCameraFragment(), PetnowCameraDetectionListener {
    private var _binding: FragmentClientCameraBinding? = null
    private val binding get() = _binding!!

    override fun provideCustomOverlayLayout(): Int = R.layout.fragment_client_camera

    override fun onAttach(context: Context) {
        super.onAttach(context)
        setPetnowCameraDetectionListener(this)
    }

    override fun onAddedCustomLayout(view: View) {
        super.onAddedCustomLayout(view)
        _binding = FragmentClientCameraBinding.bind(view)
        
        binding.statusText.text = "Camera is ready"
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }

    override fun onDetectionStatus(primaryDetectionStatus: PetnowDetectionStatus) {
        when (primaryDetectionStatus) {
            PetnowDetectionStatus.Detected -> {
                binding.statusText.text = "Nose print scans are coming through!"
                binding.statusText.setTextColor(Color.GREEN)
            }
            PetnowDetectionStatus.TooClose -> {
                binding.statusText.text = "It's too close! Stay away from your pet's face about a handspan."
                binding.statusText.setTextColor(Color.RED)
            }
            // ... handle other statuses
            else -> {
                binding.statusText.text = "Align your pet's face in the frame"
                binding.statusText.setTextColor(Color.WHITE)
            }
        }
    }

    override fun onDetectionProgress(progress: Int) {
        binding.detectionProgress.progress = progress
        if (progress == 100) {
            binding.statusText.text = "Detection Finished"
        }
    }

    override fun onDetectionFinished(result: DetectionCaptureResult) {
        when (result) {
            is DetectionCaptureResult.Success -> {
                val (noseImages, faceImages) = result
                // Handle success
            }
            is DetectionCaptureResult.Fail -> {
                // Handle failure
            }
        }
    }
}

Method Descriptions

provideCustomOverlayLayout()

Create a custom layout in XML and inject it into the UI module with this function

onAddedCustomLayout(view: View)

This function is called after the client-created custom view is inflated

When manipulating client-created UI, operate after receiving the inflated view in this function.

Place Guide UI Over Tracker

Customize a floating guide UI (that moves with the tracking UI) by creating a guide UI and injecting it into the module.

The UI module automatically sets coordinates and renders according to the TrackingUI
The app only specifies which UI to draw
These methods are optional

class ClientCameraFragment : PetnowCameraFragment(), ... {
    private var _floatingBinding: LayoutFloatingGuideBinding? = null
    
    override fun provideFloatingGuideLayout(): Int = R.layout.layout_floating_guide

    override fun onFloatingGuideAdded(view: View) {
        _floatingBinding = LayoutFloatingGuideBinding.bind(view)
        floatingBinding.layoutCameraGuideFloating.isVisible = false
        _floatingBinding.textCameraGuideFloatingMessage.text = "Floating guide text!"
    }
    
    override fun onDetectionProgress(progress: Int) {
        if (progress > 0) {
            floatingBinding.layoutCameraGuideFloating.isVisible = true
        }
    }

    override fun onDetectionFinished(result: DetectionCaptureResult) {
        floatingBinding.layoutCameraGuideFloating.isVisible = false
    }
}

Method Descriptions

provideFloatingGuideLayout()

Create a custom FloatingGuideLayout in XML and inject it into the UI module with this function

onFloatingGuideAdded(view: View)

This method is called after the client-created FloatingGuide custom view is inflated

When manipulating client-created UI, operate after receiving the inflated view in this function.

Next Steps

Once you've learned UI customization, refer to the following documentation:

Sound Guide - Sound playback settings

UI Customization

Overview

Add Custom UI

Method Descriptions

Place Guide UI Over Tracker

Method Descriptions

Next Steps

On this page