VideoView makes black window in Linearlayout

Question

I have a Fragment inside an Activity and inside the fragment I have 2 Linear Layouts. The first Layout contains a VideoView, I want the VideoView to fit the width of screen and the Linear Layout to wrap to its height (VideoView). Then, I want the second LinearLayout to adjust the rest height of the screen.

<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">

    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="1">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_purple"
            android:orientation="vertical">

            <!-- Aqui ira el VideoView -->
            <VideoView
                android:id="@+id/video"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:tag="main"/>

            <!--<ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/entreno3"/>-->

        </LinearLayout>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@android:color/holo_orange_light"
            android:orientation="vertical">

                <!-- Aqui iran los datos del ejercicio -->

        </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_fast_forward"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>

The result that I get with this code is good but I have a problem, the problem is that when this fragment is loaded, the second LinearLayout is stucked in black screen and the floating button is not well positioned for a moment, then in half a second, the second Linear Layout and the button are displayed in their right position.

I have tried this with an ImageView instead of a VideoView and it is well positioned since it is loaded. Here is my java code.

public class Ejercicio extends Fragment {

    private final static String uriPath = "android.resource://com.fitness.dullmonkey.keepingfit/raw/";

    public Ejercicio() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_ejercicio, container, false);

        VideoView video = (VideoView) view.findViewById(R.id.video);
        String path = uriPath + "ejercicio1";
        video.setVideoPath(path);
        video.start();


        Uri uri = Uri.parse(path);
        video.setVideoURI(uri);

        // Inflate the layout for this fragment
        return view;
    }
}

And here is the result I have just when the fragment is loaded and after half a second loaded.

http://es.tinypic.com/view.php?pic=9hnuqt&s=8#.Va92lfntlBc

After debugging I have noticed that what produces the error is the FloatingActionButton view in XML.

Do you have any idea why this is happening?

Answer 1

The best approach I have found is to place the button at the bottom of the screen and set in Java Code

video.setZOrderOnTop(true);

I had to position the button at the bottom because if I set video.setZOrderOnTop(true); the video is displayed over the button.