Implementación de Layout para Actividad de Cámara en Android

Curso de Desarrollo de Aplicaciones con Huawei

Contenido del curso

Introducción a HMS Core

Autenticación con HMS Account Kit

Construyendo nuestra cámara de selfies con HMS ML Kit

Aplicando notificaciones push con HMS Push kit

Conclusiones y consejos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:54

Implementación de Layout para Actividad de Cámara en Android

Curso de Desarrollo de Aplicaciones con Huawei

Clase 20 de 31

Clase 20 / 31

Recursos

¿Cómo personalizar la cámara en una aplicación Android?

Personalizar la interfaz de usuario (UI) de la cámara en una aplicación Android es una habilidad esencial para los desarrolladores que buscan ofrecer experiencias únicas e innovadoras a sus usuarios. En esta clase, nos enfocaremos en crear la actividad de la cámara, añadiendo todos los componentes gráficos que hemos desarrollado en lecciones anteriores para que puedas crear tu propia experiencia de usuario personalizada.

¿Cómo inicializar la actividad de la cámara?

Para comenzar a personalizar la cámara, primero debemos inicializar las variables básicas y asegurarnos de que nuestro entorno está adecuadamente configurado. Aquí te dejo una estructura básica del código necesario:

var previewWidth = 320
var previewHeight = 240

// Verificar que el Lens Engine esté creado
if (lensEngine != null) {
    val size = lensEngine.getDisplayDimensions()
    if (size != null) {
        previewHeight = size.height
        previewWidth = size.width
    }
}

Este fragmento de código proporciona un punto de partida configurando las dimensiones de previsualización y validando que el motor de lente (Lens Engine) está correctamente inicializado.

¿Cómo verificar la configuración del contexto y ajustar el layout?

Para que el layout de la cámara sea el más apto posible en términos de tamaño y orientación, verifica que el contexto está en modo retrato y ajusta tu configuración:

val resources = context.resources
val configuration = resources.configuration

if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
    val temp = previewWidth
    previewWidth = previewHeight
    previewHeight = temp
}

Este proceso asegura que el layout de la cámara sea dinámico y se adapte automáticamente al modo de orientación del dispositivo, lo cual es crucial para ofrecer una visualización óptima.

¿Cómo calcular y ajustar el ratio de la vista?

El cálculo del ratio entre el ancho y la altura es vital para garantizar que la vista de la cámara y el marco no se salgan de los límites. Aquí un ejemplo básico:

val widthRatio = width.toFloat() / previewWidth
val heightRatio = height.toFloat() / previewHeight

if (widthRatio > heightRatio) {
    childWidth = viewWidth
    childHeight = (previewHeight.toFloat() * widthRatio).toInt()
} else {
    childHeight = viewHeight
    childWidth = (previewWidth.toFloat() * heightRatio).toInt()
}

Al mantener estos ratios, se garantiza que la vista de la cámara no exceda el área de visualización disponible, brindando una experiencia de usuario fluida y agradable.

¿Cómo implementar un overlay gráfico y motor de lente?

Una vez configuradas las dimensiones y ratios, es fundamental implementar un overlay gráfico y un motor de lente para finalizar la personalización de la cámara:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LensEnginePreview
        android:id="@+id/preview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <GraphicOverlay
        android:id="@+id/faceOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

Este xml muestra cómo integrar un LensEnginePreview y un GraphicOverlay, elementos esenciales para mostrar y superponer gráficos sobre la vista de la cámara.

A lo largo de este proceso, hemos creado una base sólida para personalizar la interfaz de cámara de una aplicación Android. Este conocimiento no solo enriquece tus habilidades de desarrollo, sino que también mejora el valor de las aplicaciones que desarrollas. Sigue aprendiendo y explorando nuevas posibilidades para llevar tus capacidades al siguiente nivel. ¡Adelante!

package com.sandoval.hselfiecamera.camera

import android.content.Context
import android.content.res.Configuration
import android.util.AttributeSet
import android.util.Log
import android.view.SurfaceHolder
import android.view.SurfaceView
import android.view.ViewGroup
import com.huawei.hms.common.size.Size
import com.huawei.hms.mlsdk.common.LensEngine
import com.sandoval.hselfiecamera.overlay.GraphicOverlay
import java.io.IOException

class LensEnginePreview(context: Context, attrs: AttributeSet?) : ViewGroup(context, attrs) {

    private val mContext: Context = context
    private val mSurfaceView: SurfaceView
    private var mStartRequested: Boolean
    private var mSurfaceAvailable: Boolean
    private var mLensEngine: LensEngine? = null
    private var mOverlay: GraphicOverlay? = null

    init {
        mStartRequested = false
        mSurfaceAvailable = false
        mSurfaceView = SurfaceView(context)
        // Nuestra vista va a pedir un callback para agregar el lente
        this.addView(mSurfaceView)
    }

    override fun onLayout(
        changed: Boolean,
        left: Int,
        top: Int,
        right: Int,
        bottom: Int
    ) {
        var previewWidth = 320
        var previewHeight = 240
        if (mLensEngine != null) {
            val size: Size? = mLensEngine!!.displayDimension
            if (size != null) {
                previewHeight = size.height
                previewWidth = size.width
            }
        }
        if (mContext.resources
                .configuration.orientation == Configuration.ORIENTATION_PORTRAIT
        ) {
            val tmp = previewWidth
            previewWidth = previewHeight
            previewHeight = tmp
        }

        val viewWidth = right - left
        val viewHeight = bottom - top
        val childWidth: Int
        val childHeight: Int
        var childXOffset = 0
        var childYOffset = 0
        val widthRatio = viewWidth.toFloat() / previewWidth.toFloat()
        val heightRation = viewHeight.toFloat() / previewHeight.toFloat()

        if (widthRatio > heightRation) {
            childWidth = viewWidth
            childHeight = (previewHeight.toFloat() * heightRation).toInt()
            childYOffset = (childHeight - viewHeight) / 2
        } else {
            childWidth = (previewHeight.toFloat() * heightRation).toInt()
            childHeight = viewHeight
            childXOffset = (childWidth - viewWidth) / 2
        }
        for (i in 0 until this.childCount) {
            getChildAt(i).layout(
                -1 * childXOffset, -1 * childYOffset, childWidth - childXOffset,
                childHeight - childYOffset
            )
        }
        try {
            startIfReady()
        } catch (e: IOException) {
            Log.e("Error", "No se pudo iniciar la camara")
        }
    }

    @Throws(IOException::class)
    fun start(lensEngine: LensEngine?, overlay: GraphicOverlay?) {
        mOverlay = overlay
        start(lensEngine)
    }

    @Throws(IOException::class)
    fun start(lensEngine: LensEngine?) {
        if (lensEngine == null) {
            stop()
        }
        mLensEngine = lensEngine
        if (mLensEngine != null) {
            mStartRequested = true
            // Vamos a crear una funcion que nos va a decir
            //si la camara esta lista
        }
    }

    fun stop() {
        if (mLensEngine != null) {
            mLensEngine!!.close()
        }
    }

    fun release() {
        if (mLensEngine != null) {
            mLensEngine!!.release()
            mLensEngine = null
        }
    }

    @Throws(IOException::class)
    fun startIfReady() {
        if (mStartRequested && mSurfaceAvailable) {
            mLensEngine!!.run(mSurfaceView.holder)
            if (overlay != null) {
                val size: Size = mLensEngine!!.displayDimension
                val min: Int = size.width.coerceAtMost(size.height)
                val max: Int = size.width.coerceAtLeast((size.height))
                if (Configuration.ORIENTATION_PORTRAIT == mContext.resources.configuration.orientation) {
                    mOverlay!!.setCameraInfo(min, max, mLensEngine!!.lensType)
                } else {
                    mOverlay!!.setCameraInfo(max, min, mLensEngine!!.lensType)
                }
                mOverlay!!.clear()
            }
            mStartRequested = false
        }
    }

    private inner class SurfaceCallback : SurfaceHolder.Callback {

        override fun surfaceChanged(
            holder: SurfaceHolder?,
            format: Int,
            width: Int,
            height: Int
        ) {
        }

        override fun surfaceDestroyed(holder: SurfaceHolder?) {
            mSurfaceAvailable = false
        }

        override fun surfaceCreated(holder: SurfaceHolder?) {
            mSurfaceAvailable = true
            try {
                startIfReady()
            } catch (e: IOException) {
                Log.e("Error: ", "No pudimos iniciar la camra $e")
            }
        }
    }
}

package com.sandoval.hselfiecamera.camera

import android.content.Context
import android.content.res.Configuration
import android.util.AttributeSet
import android.util.Log
import android.view.SurfaceHolder
import android.view.SurfaceView
import android.view.ViewGroup
import com.huawei.hms.common.size.Size
import com.huawei.hms.mlsdk.common.LensEngine
import com.sandoval.hselfiecamera.overlay.GraphicOverlay
import java.io.IOException

class LensEnginePreview(context: Context, attrs: AttributeSet?) : ViewGroup(context, attrs) {

    private val mContext: Context = context
    private val mSurfaceView: SurfaceView
    private var mStartRequested: Boolean
    private var mSurfaceAvailable: Boolean
    private var mLensEngine: LensEngine? = null
    private var mOverlay: GraphicOverlay? = null

    init {
        mStartRequested = false
        mSurfaceAvailable = false
        mSurfaceView = SurfaceView(context)
        // Nuestra vista va a pedir un callback para agregar el lente
        this.addView(mSurfaceView)
    }

    override fun onLayout(
        changed: Boolean,
        left: Int,
        top: Int,
        right: Int,
        bottom: Int
    ) {
        var previewWidth = 320
        var previewHeight = 240
        if (mLensEngine != null) {
            val size: Size? = mLensEngine!!.displayDimension
            if (size != null) {
                previewHeight = size.height
                previewWidth = size.width
            }
        }
        if (mContext.resources
                .configuration.orientation == Configuration.ORIENTATION_PORTRAIT
        ) {
            val tmp = previewWidth
            previewWidth = previewHeight
            previewHeight = tmp
        }

        val viewWidth = right - left
        val viewHeight = bottom - top
        val childWidth: Int
        val childHeight: Int
        var childXOffset = 0
        var childYOffset = 0
        val widthRatio = viewWidth.toFloat() / previewWidth.toFloat()
        val heightRation = viewHeight.toFloat() / previewHeight.toFloat()

        if (widthRatio > heightRation) {
            childWidth = viewWidth
            childHeight = (previewHeight.toFloat() * heightRation).toInt()
            childYOffset = (childHeight - viewHeight) / 2
        } else {
            childWidth = (previewHeight.toFloat() * heightRation).toInt()
            childHeight = viewHeight
            childXOffset = (childWidth - viewWidth) / 2
        }
        for (i in 0 until this.childCount) {
            getChildAt(i).layout(
                -1 * childXOffset, -1 * childYOffset, childWidth - childXOffset,
                childHeight - childYOffset
            )
        }
        try {
            startIfReady()
        } catch (e: IOException) {
            Log.e("Error", "No se pudo iniciar la camara")
        }
    }

    @Throws(IOException::class)
    fun start(lensEngine: LensEngine?, overlay: GraphicOverlay?) {
        mOverlay = overlay
        start(lensEngine)
    }

    @Throws(IOException::class)
    fun start(lensEngine: LensEngine?) {
        if (lensEngine == null) {
            stop()
        }
        mLensEngine = lensEngine
        if (mLensEngine != null) {
            mStartRequested = true
            // Vamos a crear una funcion que nos va a decir
            //si la camara esta lista
        }
    }

    fun stop() {
        if (mLensEngine != null) {
            mLensEngine!!.close()
        }
    }

    fun release() {
        if (mLensEngine != null) {
            mLensEngine!!.release()
            mLensEngine = null
        }
    }

    @Throws(IOException::class)
    fun startIfReady() {
        if (mStartRequested && mSurfaceAvailable) {
            mLensEngine!!.run(mSurfaceView.holder)
            if (overlay != null) {
                val size: Size = mLensEngine!!.displayDimension
                val min: Int = size.width.coerceAtMost(size.height)
                val max: Int = size.width.coerceAtLeast((size.height))
                if (Configuration.ORIENTATION_PORTRAIT == mContext.resources.configuration.orientation) {
                    mOverlay!!.setCameraInfo(min, max, mLensEngine!!.lensType)
                } else {
                    mOverlay!!.setCameraInfo(max, min, mLensEngine!!.lensType)
                }
                mOverlay!!.clear()
            }
            mStartRequested = false
        }
    }

    private inner class SurfaceCallback : SurfaceHolder.Callback {

        override fun surfaceChanged(
            holder: SurfaceHolder?,
            format: Int,
            width: Int,
            height: Int
        ) {
        }

        override fun surfaceDestroyed(holder: SurfaceHolder?) {
            mSurfaceAvailable = false
        }

        override fun surfaceCreated(holder: SurfaceHolder?) {
            mSurfaceAvailable = true
            try {
                startIfReady()
            } catch (e: IOException) {
                Log.e("Error: ", "No pudimos iniciar la camra $e")
            }
        }
    }
}

Introducción a HMS Core

Creación de Cámara Selfie con Kits de Huawei

Depuración de Aplicaciones en la Nube con Huawei Cloud Debugging

Desarrollo de Aplicaciones con Huawei Mobile Services Core

Creación de Proyecto Android Studio con Huawei Kits

Creación de Aplicaciones en AppGallery Connect de Huawei

Generación de Huella Digital SHA-256 para Android Studio

Configuración de APIs Huawei para Proyecto de Selfies en Android Studio

Configuración de Gradle para Huawei en Android Studio

Sincronización de aplicaciones con dependencias Huawei en Gradle

Autenticación con HMS Account Kit

Diseño de Pantalla de Login con Huawei Account Kit

Autenticación con Huawei Account Kit en Aplicaciones Android

Autenticación con Huawei ID en Aplicaciones Android

Implementación de Logout con Huawei AccountKit y Refactorización en Android

Construyendo nuestra cámara de selfies con HMS ML Kit

Diseño de Pantalla en Selficam con Huawei ML Kit

Permisos de Cámara en Aplicaciones Android

Configuración y Personalización de Cámaras en Android

Personalización de Interfaz Gráfica para Cámara en Android

Reconocimiento Facial con Machine Learning en Android

Creación del Motor de Lente para Selfie Cam en Android

Implementación de Layout para Actividad de Cámara en Android

Integración de Cámara y Botones en Aplicación de Selfies

Implementación de Verificación Facial en App Android

Detección de Sonrisa y Rostro en Cámaras Huawei

Detección de Rostros y Cambio de Cámara en Android Studio

Implementación de Funcionalidad de Toma y Retoma de Fotos en Android

Guardar fotos en la galería con Android y Huawei Machine Learning

Aplicando notificaciones push con HMS Push kit

Implementación de Huawei Push Notifications en Android

Implementación de Push Notifications en AppGallery Connect

Configuración y Envío de Notificaciones Push en AppGallery Connect

Conclusiones y consejos

Solución de Problemas Comunes en Desarrollo con Huawei HMS Core

Eventos de Huawei para Desarrolladores y Servicios Ofrecidos

Implementación de Layout para Actividad de Cámara en Android