CoordinatorLayout place layouts on top of eachother

Question

I have a CoordinatorLayout and I want a FrameLayout be underneath all the other Layouts and widgets. I have tried using android:layout_below/above and app:layout_constraintVertical_bias="0.0", but none of them go above the FrameLayout whose android:id="@+id/container".

I think the easiest way would be to put the FrameLayout beneath others. For example in javascript there is Z-index.

The FrameLayout will containt preview from the Google's Camera2 API.

Here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="ExtraText">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_marginTop="8dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:layout_constraintBottom_toTopOf="@+id/songTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/container"
        app:layout_constraintVertical_bias="0.025">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:elevation="6dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <Button
                android:id="@+id/backToSongList"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Song List" />

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

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/gameBoard"
        android:layout_width="match_parent"
        android:layout_height="132dp"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/songTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_bar"
        app:layout_constraintVertical_bias="0.0">

        <com.jjoe64.graphview.GraphView
            android:id="@+id/graph"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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


    <ImageButton
        android:id="@+id/playRecord"
        android:layout_width="70dp"
        android:layout_height="75dp"

        android:layout_above="@id/container"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@android:drawable/star_big_on"
        app:layout_constraintVertical_bias="0.0"/>

    <TextView
        android:id="@+id/pitchText"
        android:layout_width="113dp"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@+id/playRecord"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.724"
        app:layout_constraintStart_toEndOf="@+id/playRecord"
        app:layout_constraintTop_toBottomOf="@+id/songTitle"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/songTitle"
        android:layout_width="380dp"
        android:layout_height="61dp"
        android:layout_above="@id/container"
        android:layout_marginBottom="12dp"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        android:textColor="@android:color/background_dark"
        android:textSize="24sp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toTopOf="@+id/playRecord"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintStart_toStartOf="parent" />

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="391dp"
        android:layout_height="569dp"
        android:background="#000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        tools:context="com.example.richard.smarttabs.SongPlayer" />


</android.support.constraint.ConstraintLayout>

Since I am learning, all comments on my style are also welcome!

Answer 1

I don't know if I understood what you are looking for, but I tried to edit it to order a bit all components.

The best way (imo) to order views between each other, is to use a RelativeLayout which allows you to set toLeftOf, Above, Below, ...

Try to have a look at this:

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="ExtraText">


    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
        android:layout_alignParentBottom="true"
        tools:context="com.example.richard.smarttabs.SongPlayer" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_marginTop="8dp"
        android:fitsSystemWindows="true"
        android:background="#ffffff"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:elevation="6dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <Button
                android:id="@+id/backToSongList"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Song List" />

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

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/gameBoard"
        android:layout_width="match_parent"
        android:layout_height="132dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/app_bar"
        android:layout_marginBottom="8dp"
        android:layout_above="@id/songTitle"
        android:background="#c1c1c1"
        >

        <com.jjoe64.graphview.GraphView
            android:id="@+id/graph"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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


    <ImageButton
        android:id="@+id/playRecord"
        android:layout_width="70dp"
        android:layout_height="75dp"
        android:layout_above="@+id/pitchText"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="#fff"
        android:src="@mipmap/ic_launcher"
        />

    <TextView
        android:id="@+id/pitchText"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="24sp"
        android:text="This is centered, above frame"
        android:textColor="#fff"
        android:layout_centerInParent="true"
        />

    <TextView
        android:id="@+id/songTitle"
        android:layout_width="380dp"
        android:layout_height="61dp"
        android:layout_above="@+id/playRecord"
        android:layout_marginBottom="12dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        android:textColor="#b3b3"
        android:textSize="24sp"
        android:textStyle="bold|italic"
        />


</RelativeLayout>

Without a "guide" about what you are looking for, it is hard for me to reproduce the exact expected result, but this should be a start for you. (I changed some colors and texts to make more evident where each view is)

In a RelativeLayout the Z order is just about which view is written above another, the first in the XML is behind, the second is above it and so on.

For any help, just ask freely. I will suggest you to look at some tutorial on youtube, I mostly like TheNewBoston ones, hope I helped you.

Little hint

Try to use the minimum number of exact dp value for a view, since it is not going to wrap text or fit screen sizes, just test your layout in many sizes and with many texts inside and go for the better result.

ie: you wrote a TextView with fixed size of 113dp, but a text like "this is centered" was too large and got truncated badly. Use exact dp just when necessary and check many screen sizes for it, (and for margins/paddings that in many cases need an exact value)