androidyoutubeandroid-drawableexoplayer

How to create youtube's double-tap gesture on Android?


I have application with exoplayer on Android. I have create youtube's double-tap gesture to jump 10 seconds forward or backward with animation! How create this semicircle with ripple effect on double tap?

Like this

enter image description here

How to do this?


Solution

  • I've also wanted to implement such feature, so I wrote it myself to "copy" YouTube's behavior. It's almost the same. You can find the library here including a sample app: https://github.com/vkay94/DoubleTapPlayerView

    The instructions are written in the README, but due to Stackoverflow principals:

    0) Requirements:

    1) Include it to your gradle (it's hosted on jitpack.io so you've got to add it to your respositories):

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
    
    dependencies {
        implementation 'com.github.vkay94:DoubleTapPlayerView:1.0.0'
    }
    

    2) Add the views inside your XML:

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        
        <com.github.vkay94.dtpv.DoubleTapPlayerView
            android:id="@+id/playerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            
            app:dtpv_controller="@+id/youtube_overlay" />
    
        <com.github.vkay94.dtpv.youtube.YouTubeOverlay
            android:id="@+id/youtube_overlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible"
            
            app:yt_playerView="@+id/playerView" />
    </FrameLayout>
    

    3) Set it up inside your activity:

    youtube_overlay
        .performListener(object : YouTubeOverlay.PerformListener {
            override fun onAnimationStart() {
                // Do UI changes when circle scaling animation starts (e.g. hide controller views)
                youtube_overlay.visibility = View.VISIBLE
            }
    
            override fun onAnimationEnd() {
                // Do UI changes when circle scaling animation starts (e.g. show controller views)
                youtube_overlay.visibility = View.GONE
            }
        })
        // Uncomment this line if you haven't set yt_playerView in XML
        // .playerView(playerView)
    
    // Uncomment this line if you haven't set dtpv_controller in XML 
    // playerView.controller(youtube_overlay)
    
    // Call this method whenever the player is released and recreated
    youtube_overlay.player(simpleExoPlayer)