In Android, How can i use Youtube Player with indicator?

Question

In my project, i use youtube player.

my project is shopping app, i set youtube player in ViewPager. It's perfect. no problem. however, my client want add circle indicator.

I can't understand, it has problem. I add indicator in my XML file, youtube player play just one second. i click play, one sec play and stop again. What happen???

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/btnMusicPlayer"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="15dp"
        android:background="@drawable/btn_music" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="260dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager_main"
            android:layout_width="match_parent"
            android:layout_height="260dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />

        <me.relex.circleindicator.CircleIndicator
            android:id="@+id/indicators"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true" />

    </RelativeLayout>

</FrameLayout>

that's my activity xml code. I insert lower xml to ViewPager by lower code.(ViewPager Adaptor)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <view
        android:id="@+id/video_viewpager_childvideo"
        class="com.google.android.youtube.player.YouTubePlayerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

and it's ViewPager Adaptor.

    view= inflater.inflate(R.layout.layout_viewpager_child_video, null);

    final YouTubePlayerView video = (YouTubePlayerView) 
    view.findViewById(R.id.video_viewpager_childvideo);
    String fullurl = mediaUrls.get(position).getUrl();
    YouTubeHelper youTubeHelper = new YouTubeHelper();

    final String videoUrl = youTubeHelper.extractVideoIdFromUrl(fullurl);

    listener = new YouTubePlayer.OnInitializedListener(){

        @Override
        public void onInitializationSuccess(YouTubePlayer.Provider provider, 
    YouTubePlayer youTubePlayer, boolean b) {
            youTubePlayerInstance = youTubePlayer;
            youTubePlayer.cueVideo(videoUrl);
        }

        @Override
        public void onInitializationFailure(YouTubePlayer.Provider provider,
     YouTubeInitializationResult youTubeInitializationResult) {

        }
    };

    video.initialize(youTubeApiKey, listener);

if i remove me.relex.circleindicator.CircleIndicator, perfectly work. if just change two view's position, it works too.

me.relex.circleindicator.CircleIndicator is just now try. i try 4 kind of insicator, anyone has problems. one time I add just View for some black shadow, it has problem too.

this.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/btnMusicPlayer"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="15dp"
        android:background="@drawable/btn_music"
        android:onClick="onClickMusic" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="260dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="top"
        android:layout_alignParentTop="true"
        android:background="@drawable/shadow_down" />

</FrameLayout>

I cant understand, why btnMusicPlayer dosen't make error?? I think youtube player has problem when some view over that. isn't it?

Please help me!!

Answer 1

If you read your logcat you'll see that you cannot have views overlapping the YouTubePlayer, that's why it stops.

You have to alternatives:

1. Remove the overlaying View.
2. Use a WebView-based implementation, like android-youtube-player.

Answer 2

I think this is what you're looking for. It will allow you to use custom UI for the API. It is an open source library intended to be used as a replacement for the official YouTube Android Player API.

I hope it helps.