How to keep a View on top of my Fragments

Question

Sounds like a question that was answered before but from my research I couldn't find a solution. My layout is roughly the following:

The main area is a container where I'll add/replace Fragments, and the bottom is where I place a bottom navigation menu. The pink View is a button that I need to place on top of my menu (and that's not working).

Every time I add a Fragment to the main view, my "Menu" text disappears, even though the TextView is added after the container View. Same with the pink Button, which is added after the bottom menu container (see my xml below).

How can I keep both "Menu" TextView and the pink Button always on top of my Fragments?

This is my xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    tools:context="com.wecancer.wecancer.activities.Menu">

    <FrameLayout
        android:id="@+id/main_container_view"
        android:layout_width="match_parent"
        android:layout_height="520dp"
        android:layout_marginBottom="0dp"
        >
    </FrameLayout>

    <TextView
        android:id="@+id/main_center_tv"
        android:layout_centerVertical="true"
        android:textSize="24sp"
        android:layout_centerHorizontal="true"
        android:text="@string/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:layout_alignParentBottom="true"
        android:id="@+id/main_bottom_menu_container"
        android:layout_width="match_parent"
        android:background="@color/lightGray"
        android:layout_height="40dp"
        >

    </FrameLayout>

    <Button
        android:elevation="1dp"
        android:id="@+id/menu_plus_img"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:background="@color/colorAccent"
        android:layout_width="70dp"
        android:layout_marginBottom="0dp"
        android:layout_height="70dp"
        tools:targetApi="lollipop" />

</RelativeLayout>

Answer 1

Try This`

<FrameLayout
    android:layout_alignParentBottom="true"
    android:id="@+id/main_bottom_menu_container"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary"
    android:layout_height="40dp"
    >

</FrameLayout>

<Button
    android:elevation="1dp"
    android:id="@+id/menu_plus_img"
    android:background="@color/colorAccent"
    android:layout_width="70dp"
    android:layout_height="70dp"
    tools:targetApi="lollipop"
    android:layout_marginLeft="71dp"
    android:layout_marginStart="71dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:id="@+id/main_center_tv"
    android:textSize="24sp"
    android:text="@string/menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:layout_alignBaseline="@+id/menu_plus_img"
    android:layout_alignBottom="@+id/menu_plus_img"
    android:layout_toRightOf="@+id/menu_plus_img"
    android:layout_toEndOf="@+id/menu_plus_img" />

<FrameLayout
    android:id="@+id/main_container_view"
    android:layout_width="match_parent"
    android:layout_height="520dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/menu_plus_img">


</FrameLayout>

`

Answer 2

You just have to change the order of the views in the layout while using a Framelayout

The complexity of your layout does not require a RelativeLayout so you just have to switch.

Answer 3

I don't really know why methods like bringToFront , bringChildToFront , or adding and removing View's children to change their indices didn't work. So I actually had to create a new layout structure.

Instead of:

RelativeLayout
...FrameLayout
...TextView
...FrameLayout
...Button

I did:

FrameLayout
...RelativeLayout
......FrameLayout
......FrameLayout
......TextView
...RelativeLayout
......Button

Whereas the second RelativeLayout has only a button and a transparent background. My full xml code is below as a reference.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_root_view"
    android:layout_height="match_parent">

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#eee"
        tools:context="com.wecancer.wecancer.activities.Menu">

        <FrameLayout
            android:layout_alignParentBottom="true"
            android:id="@+id/main_bottom_menu_container"
            android:layout_width="match_parent"
            android:background="@color/lightGray"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@+id/main_container_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="0dp" />

        <TextView
            android:id="@+id/main_center_tv"
            android:layout_centerVertical="true"
            android:textSize="24sp"
            android:layout_centerHorizontal="true"
            android:text="@string/menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

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

        <Button
            android:onClick="menuPlusBt"
            android:elevation="5dp"
            android:id="@+id/menu_plus_img"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:background="@drawable/green_circle"
            android:layout_width="70dp"
            android:layout_marginBottom="0dp"
            android:layout_height="70dp"
            tools:targetApi="lollipop" />

    </RelativeLayout>

</FrameLayout>