Camera Button like SnapChat

Issue

I’m new to kotlin so I have no clue to implement this. I want to implement a button like snapchat, where single click takes pic, and on hold makes the button animation, and Button animation should be reset after the animation ends or after the user releases the finger but in my code Either one of the Ontouch is only working.

my code for single tap

val gestureDetectorCompat  GestureDetectorCompat(applicationContext, object : GestureDetector.SimpleOnGestureListener() {
            override fun onSingleTapUp(e: MotionEvent?): Boolean {
                Log.d("va","button lame")


                Log.d("va","button up")


                button.frame0
                button.cancelAnimation()
                return super.onSingleTapUp(e)
            }


        })
        button.setOnTouchListener { _, event -> gestureDetectorCompat.onTouchEvent(event) }
        button.isClickabletrue

My code for Hold

button.setOnTouchListener { _, event ->


                    if (event.actionMotionEvent.ACTION_DOWN) {
                        Log.d("actiondd","btn press?")
                       //here i want animation to start and end after 5 secs if user still holds the button
                        button.playAnimation()
                        val handler  Handler(Looper.getMainLooper())
                        handler.postDelayed(
                            {
                                button.frame  0
                               button.cancelAnimation()
                            }, 5000)



                    } else if (event.action  MotionEvent.ACTION_UP) {      
//Here i need animation to stop right after user removes finger             

                        button.frame  0
                        button.cancelAnimation()
                        Log.i("heyyy", "anim stoppedd")
                    }
                    false
                }

Solution

I have found the answer to my question I have totally changed the code from my previous one.I have used Kotlin Timers and Ontouchlistener to achieve this[SnapChat camera button with animation].I have also implemented camera capture and video recording with cameraX with the same button.

//camera_capture_button is a lottie animation view
 camera_capture_button.setOnTouchListener{ v, event ->

            if (event.action  MotionEvent.ACTION_DOWN) {
                Log.d("button","down")


                timer  object: CountDownTimer(5000, 500) {
                    override fun onTick(millisUntilFinished: Long) {
                        Log.d("timerr", fire.toString())
                        fire + 1

                        if(fire  2){
                            if (isrecordingfalse) {
                                Log.d("timerr", "start recording")
                                takeVideo()
                                camera_capture_button.playAnimation()
                                vfx1.visibility  View.VISIBLE


                            }
                        }

                    }

                    override fun onFinish() {
                        Log.d("timerr","Timeup")
                        if (isrecordingtrue) {
                            stopRecording()
                            camera_capture_button.frame  0
                            camera_capture_button.cancelAnimation()
                            vfx1.visibility  View.GONE
                        }
                    }
                }
                (timer as CountDownTimer).start()

                vfx1.addAnimatorListener(object : Animator.AnimatorListener {
                    override fun onAnimationStart(animation: Animator?) {

                    }

                    override fun onAnimationEnd(animation: Animator?) {
//                        stopRecording()
//                        camera_capture_button.frame  0
//                        camera_capture_button.cancelAnimation()
//                        vfx1.visibilityView.GONE
                    }

                    override fun onAnimationCancel(animation: Animator?) {
                        TODO("Not yet implemented")
                    }

                    override fun onAnimationRepeat(animation: Animator?) {
                        TODO("Not yet implemented")
                    }

                })
            }
            if (event.action  MotionEvent.ACTION_UP) {
                Log.d("timerr","up")
                timer?.cancel()
//                    stopRecording()
                if (fire<2){
                    Log.d("timerr","tap")
                    takePic()
                }
                if (fire>2){
                    Log.d("timerr","stop recording")
                    stopRecording()
                }
                fire  0
                camera_capture_button.frame  0
                camera_capture_button.cancelAnimation()
                vfx1.visibilityView.GONE
            }

            true
        }
        camera_capture_button.isClickabletrue

Answered By – FrozenHacks

Leave a Comment