Floating action button cannot be found on emulator

Question

I have created a layout with an ImageView, VideoView and a floating action button. My idea is to keep on showing the floating action button above the VideoView and ImageView.

Below is my XML code and it looks like the floating action button is hidden behind ImageView and VideoView. Any help would be highly appreciated.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000"
    android:contentDescription="@string/app_name"
    android:id="@+id/frame"
    tools:context="com.serv24.eframe.FullscreenActivity" >

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:visibility="visible"
        tools:visibility="visible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_dialog_email"
        android:visibility="visible"
        app:backgroundTint="@android:color/holo_red_dark"
        app:rippleColor="?android:attr/colorActivatedHighlight" />

    <VideoView
        android:id="@+id/videoView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical|center_horizontal"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical|center_horizontal"
        android:contentDescription="@string/app_name"
        android:visibility="visible" />
</FrameLayout>

Answer 1

I would suggest using a RelativeLayout instead of FrameLayout for easier implementation in your case. You just have to put the elements below some other elements to go on top of the elements above in your layout. I am sharing a version of your layout using RelativeLayout. Hope that helps!

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true" />

    <VideoView
        android:id="@+id/videoView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        android:visibility="visible"
        app:backgroundTint="@android:color/holo_red_dark"
        app:rippleColor="?android:attr/colorActivatedHighlight" />

</RelativeLayout>