View covering action toolbar?

Question

I am trying to create a tool bar associated with an EditText on my scren. Below are the contents of my xml file that I am trying to create:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tool="http://schemas.android.com/tools"
    tool:context=".CreatePost"
    android:id="@+id/create_post">

    <include layout="@layout/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/create_post_toolbar"/>

    <!-- Edit text for typing status. Light gray placeholder. -->

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColorHint="#d3d3d3"
        android:layout_below="@id/create_post_toolbar"
        android:hint="Update your friends!"
        android:padding="10dp"
        android:gravity="top"
        android:background="@android:color/transparent"
        android:inputType="textMultiLine"
        android:id="@+id/type_status"/>

</RelativeLayout>

app_bar.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".CreatePost">

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar_universal"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

However, when I do this, my EditText covers my toolbar. Here is an image to show what happens:

I don't really understand why this is happening, is there anyway to align my EditText so it doesn't cover the toolbar? Thanks!

UPDATE: after adding in Arya's code into mine, my image looks like so, which makes the ActionBar too high. Any ideas on how to fix it?

Answer 1

Your layout, in its current definition, does not make much sense. I think the problem here is that the CoordinatorLayout has been assigned fitsSystemWindows=true. This makes it report its bottom from the very top of the status-bar. On the other hand, the RelativeLayout expects the bottom value from the bottom of the status-bar. This makes your EditText overlap the Toolbar by 25dp - the standard height of a status-bar. You can kind of confirm this by assigning android:fitsSystemWindows="true" to your RelativeLayout with id create_post. In this case, the bottom for CoordinatorLayout will be reported correctly, and the EditText will not overlap the Toolbar.

Usually, the CoordinatorLayout is set to be the parent, and the content (in your case the RelativeLayout) resides as a child of the CoordinatorLayout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".CreatePost">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent" 
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar 
            android:id="@+id/toolbar_universal"
            android:layout_width="match_parent" 
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/create_post">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColorHint="#d3d3d3"
            android:hint="Update your friends!"
            android:padding="10dp"
            android:gravity="top"
            android:background="@android:color/transparent"
            android:inputType="textMultiLine"
            android:id="@+id/type_status"/>

        </RelativeLayout>

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

If you have a specific reason for placing the CoordinatorLayout inside a RelativeLayout, please do share.