Q:

AppBarLayout and Toolbar invisible on Android 4.x

I am using the new AppbarLayout and Toolbar from the v22 design support library. But they appear invisible on 4.x devices. Is this a known issue? How do I fix it?
Here's my XML:
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    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:title="inSight Source"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways"/>

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

They're in a relativelayout. Moving them into a CoordinatorLayout did not fix the issue.
The AppbarLayout and Toolbar are there, since there is a 'shade' when you pull the underlying scrollview, but they are invisible.
My full layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/setting_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/setting_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#fff"
        app:title="inSight Source" />

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/setting_bg_img"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/baseimg"
    android:scaleType="centerCrop" />

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/setting_appbar" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="10dp">

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/login_insight_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:typeface="roboto_thin"
            android:text="inSight Source"
            android:textSize="40dp"
            android:textColor="#fff"
            android:layout_marginTop="20dp"
            android:layout_gravity="center_horizontal" />

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/login_companion_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:typeface="roboto_thin"
            android:text="companion app"
            android:textSize="20dp"
            android:layout_marginTop="6dp"
            android:textColor="#fff"
            android:layout_below="@id/login_insight_label"
            android:layout_gravity="center_horizontal" />

        <!-- invisible view for margin -->
        <View
            android:layout_width="match_parent"
            android:layout_height="30dp" />

        <include
            android:id="@+id/setting_card_driver"
            layout="@layout/include_setting_card" />

        <!-- invisible view for margin -->
        <View
            android:layout_width="match_parent"
            android:layout_height="30dp" />

        <include
            android:id="@+id/setting_card_vehicle"
            layout="@layout/include_setting_card" />

        <!-- invisible view for margin -->
        <View
            android:layout_width="match_parent"
            android:layout_height="30dp" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="#fff" >

            <com.devspark.robototextview.widget.RobotoTextView
                android:id="@+id/setting_info_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:typeface="roboto_regular"
                android:text="Deze instellingen kunt u aanpassen in inSight Source"
                android:textSize="13dp"
                android:layout_marginTop="6dp"
                android:textColor="@color/insight_antraciet"
                android:layout_centerInParent="true" />

        </RelativeLayout>

        <Button
            android:id="@+id/setting_logout_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="LOG UIT"
            android:theme="@style/ButtonStyle"
            android:textColor="#fff"
            android:layout_marginBottom="5dp"/>

    </LinearLayout>
</ScrollView>
</RelativeLayout>

I have also tried placing the AppBarLayout in a CoordinatorLayout but that did not solve the problem.

A:

Why are you using a theme on the AppBarLayout? If you remove that your Toolbar will probably appear again. You can move the theme to the Toolbar:
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Edit
Add this to your ImageView: 
android:layout_below="@id/setting_appbar"

Your ImageView was above your Toolbar so that's why you couldn't see it. One other thing you could do is put the Toolbar at the bottom of the layout so it appears above the ImageView.

