Navigation Drawer and VideoView in android

Question

I am using a navigation drawer plus a tablayout. I have a video in my tab which was not visible at first, but I can hear the sound. Once I set

video_view.setZOrderOnTop(true);

and I can also see the video, but this causes an issue with navigation drawer.

When I slide it, the video doesn't hide behind the navigation drawer as do all other elements.

If I don't use

video_view.setZOrderOnTop(true);

then my drawer is works fine.

main_activity.xml

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Framelayout to display Fragments -->
<android.support.design.widget.CoordinatorLayout 
    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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/menuwhite2"
                    android:id="@+id/custom_home"
                    android:gravity="center"
                    android:layout_gravity="right"
                    android:layout_marginRight="10dp"/>

                <android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabMode="fixed"
                    app:tabGravity="fill"
                    />

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
</android.support.design.widget.CoordinatorLayout>


<!-- Listview to display slider menu -->
<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    android:choiceMode="singleChoice"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"
    android:listSelector="@drawable/list_selector"
    android:background="@color/list_background"/>

tab_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"/>
    </android.support.v7.widget.CardView>

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

        <RelativeLayout
            android:id="@+id/layoutTop"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <VideoView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/video_player_view"
                android:layout_height="200dp"
                android:layout_width="fill_parent"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layoutBottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/layoutTop">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello"/>

        </RelativeLayout>
        <ImageView
            android:id="@+id/overlapImage"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_above="@id/layoutBottom"
            android:adjustViewBounds="true"
            android:src="@mipmap/ic_launcher" />

    </RelativeLayout>
</LinearLayout>

TabFragment.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    final View view = inflater.inflate(R.layout.tab_fragment, container, false);
    VideoView video_player_view = (VideoView) view.findViewById(R.id.video_player_view);
    video_player_view.setVideoURI("videourl");
    video_player_view.setZOrderOnTop(true);
    video_player_view.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
             @Override
             public void onPrepared(MediaPlayer mp) {
                 video_player_view.start();
             }
         });        
    return  view;
}

So can Anyone guide me with an alternative for that.

Gallicism

setZOrderOnTop(false) when drawing out Drawer. – Medin

well I thought of doing that but my problem is that drawer is in activity and videoview is in tablayout.. So any idea about that. – Gallicism

What will happen if your video is stopped before the opening? – Steiger

if i setZOrderOnTop(false) then video behave normally and if it is set true then is always remain on top whether it is playing or not. – Gallicism

Put relevance part of code. DrawerLayout & VideoView – Embryology

@Embryology , updated my question – Gallicism

In your tabs_fragment remove other views and just place single videoView. I guess other Layout appear on top of your VideoView and you just hear the sound. ( make sure to remove setZOrderOnTop) – Embryology

@Embryology i need to show other content with video too. removing them isn't a solution for me. – Gallicism

@Gallicism I know but first just test it single videoView if it was Ok, then your problem is not related to another thing. – Embryology

this is working @Embryology if i only show video but not with other content – Gallicism

So as I guess, you put some layout on the VideoView and you can't see ( But you hear). For seeing what's going on turn LayoutBound in settings of you phone/emulator. – Embryology

can you guide me.. I don't know about it. And also If I have to turn on something from my setting then why it is working when I am using only videoview in my layout – Gallicism

See this thread for Layout bound: tysmith.me/post/27035355999/layoutbounds – Embryology

This is not solve the issue, Its just show some guidelines to see How your layout aligned in your tab_fragment. – Embryology

Your activity will have to tell the activeFragment, via an Interface, to videoView.setZOrderOnTop(false) when drawer is coming out (onDrawerSlide / onDrawerOpened), and videView.setZOrderOnTop(true) when drawer is closed/collapsed. (onDrawerClosed) – Medin

@Shark, Can you show me how through code. – Gallicism

@Gallicism Try my answer...... – Kuo

Answer 1

@Atula I suggest you a simple solution for this....This is work Perfect

I attach the screenshot working properly....

Try this

Used this

  video_player_view.setZOrderMediaOverlay(true);

Instead Of

  video_view.setZOrderOnTop(true);

Kuo

Answer 2

When you setZOrderOnTop(true) it will be on top of other Layout. In fact it Control whether the surface view's surface is placed on top of it window [see more].

I have a video in my tab which was not visible at first but I can hear sound.

Based on your comment you put other Layout on VideoView so you can't see VideoView But you hear the sound.

By turning Layout bound in phone:

Setting-> developer option -> show Layout bound

You can see what's going on in your Layouts. I guess you can't see VideoView because of those match_parents in your layout_height double check them ( e.g: put 50dp for each of them) and your problem will be fixed.

Also make root Layout match_parent instead of wrap_content. it's not solve the problem but its much better.

Embryology

Your answer didnot help me but gave me an idea for solving my issue thanks – Gallicism

Answer 3

After a few comments, the OP wanted to see some code.

Ok, let's try something like this:

private DrawerLayout drawer;
private ActionBarDrawerToggle toggle;

protected void onResume() {
    drawer.addDrawerListener(toggle);
    toggle.syncState();
}

protected void onPause() {
    drawer.removeDrawerListener(toggle);
    toggle.syncState();
}

protected void onCreate(Bundle saveInstanceState) {

    toggle = new ActionBarDrawerToggle(this, drawer, 
        toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            public void onDrawerClosed(View view) {
                Log.d(TAG, "--> ActionBarDrawerToggle::onDrawerClosed
                    (view=" + view + ")");
                syncActionBarArrowState();
                //call videoView.setZOrderOnTop(true) so it's over everything
            }

            public void onDrawerOpened(View drawerView) {

                Log.d(TAG, "--> ActionBarDrawerToggle::onDrawerOpened
                    (drawerView=" + drawerView + ")");
                toggle.setDrawerIndicatorEnabled(true);
                //call videoView.setZOrderOnTop(false) so it's NOT over the drawer
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                 super.onDrawerSlide(drawerView, 0);
                 //call videoView.setZOrderOnTop(false) 
                 //so it's not over the drawer being pulled out
            }
        };
}

Medin

Answer 4

Did you try to use TextureView instead VideoView?
ViedoView is well known as bug prone view.

I wrote frame-video-view which (among other things) simplifies using TextureView as a video player.

Esterify