How to render and use a CameraVideoButton in your Android app

Let's say you are creating some kind of a selfie app, you may be interested in launching your camera using a much more modern way. This tutorial presents to you the solutions which you can use to launch the camera.

[lwtoc]

(a). Use CameraVideoButton

Instagram like animated button for taking photo or recording video.

This is just a dummy view. All recording or taking picture operation is up to you.

Step 1: Install it

The first step is to install the camera video button. Register jitpack in your project-level build.gradle as follows:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Then under the dependencies closure in your app level build.gradle add the implementation statement:

 implementation 'com.github.iammert:CameraVideoButton:0.2'

Step 2: Add to Layout

The next step is to add the camera video button to your xml layout:

<com.iammert.library.cameravideobuttonlib.CameraVideoButton
    android:id="@+id/videoRecordButton"
    android:layout_width="120dp"
    android:layout_height="120dp"
    app:cvb_recording_color="#D438A2"/>

Step 3: Write Code

First reference the CameraVideoButton whether it is by findViewById, data binding, kotlin synthetics or view binding.

Then you can customize its properties:

videoRecordButton.setVideoDuration(10000)
videoRecordButton.enableVideoRecording(true)
videoRecordButton.enablePhotoTaking(true)

Then you can now observer different events:

videoRecordButton.actionListener = object : CameraVideoButton.ActionListener{
    override fun onStartRecord() {
        Log.v("TEST", "Start recording video")
    }

    override fun onEndRecord() {
        Log.v("TEST", "Stop recording video")
    }

    override fun onDurationTooShortError() {
        Log.v("TEST", "Toast or notify user")
    }

    override fun onSingleTap() {
        Log.v("TEST", "Take photo here")
    }
}

Example

Let's look at a simple example using the CameraVideoButton.

First imstall the library as discussed earlier.
Then add the camera videobutton to the xml layout:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#232323">

    <com.iammert.library.cameravideobuttonlib.CameraVideoButton
        android:id="@+id/button"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="16dp"
        android:layout_alignParentBottom="true"
        app:cvb_recording_color="#D438A2"/>

</RelativeLayout>

3.Lastly write your kotlin code:

MainActivity.kt

package com.iammert.library.cameravideobutton

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.util.Log
import com.iammert.library.cameravideobuttonlib.CameraVideoButton

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val videoRecordButton = findViewById<CameraVideoButton>(R.id.button)
        videoRecordButton.setVideoDuration(10000)
        videoRecordButton.actionListener = object : CameraVideoButton.ActionListener {
            override fun onCancelled() {
                Log.v("TEST", "onCancelled")
            }

            override fun onStartRecord() {
                Log.v("TEST", "onStartRecord")
            }

            override fun onEndRecord() {
                Log.v("TEST", "onEndRecord")
            }

            override fun onDurationTooShortError() {
                Log.v("TEST", "onDurationTooShortError")
            }

            override fun onSingleTap() {
                Log.v("TEST", "onSingleTap")
            }

        }

        Handler().postDelayed(Runnable {
            videoRecordButton.cancelRecording()
        }, 5000)
    }
}

That's it. You can find the code here.

Reference

Find reference here.