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?

score 2 · Accepted Answer · answered Dec 06 '15 at 18:44

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.

Wow, this is amazing. Thank you so much. It worked perfectly. I appreciate all your help! :) just one question: I have an `AppBarLayout` in most if not all of my activities. I see in this answer that you provided the `AppBarLayout` directly in the file instead of putting it into another file where I can just do ``. In my context I can't include the `app_bar.xml` in every file and have the layout like this so I would have to declare it in every file that uses it then? — user1871869, Dec 06 '15 at 22:48
Also, is it wrong to put a `CoordinatorLayout` inside a `RelativeLayout`? I see on a few examples like so: http://stackoverflow.com/a/33452360/1871869 that people HAVE put it in. What are the reasons for actually doing so? — user1871869, Dec 06 '15 at 23:11
@user1871869 No, you can still use `` - but only for ``. So, your setup will look something like this: ``. I hope this is legible enough. BUT, I do see your point, and unfortunately, `` will have to be put in every layout file. — Vikram, Dec 09 '15 at 04:29
@user1871869 Well, apart from the problem you just faced placing `CoordinatorLayout` inside a `RelativeLayout`, the documentation [here](http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html) points out the primary use-cases: #1 is how I have always used a `CoordinatorLayout`. #2 kind of implies that placing it inside another container _should_ work. But I haven't done that myself. So, its not _wrong_ per se. Perhaps, removing the `fitsSystemWindows` attribute when placing `CoordinatorLayout` inside another `ViewGroup` is all that's required. — Vikram, Dec 09 '15 at 04:43

Arya · Answer 2 · 2015-11-30T10:27:40.933

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/tabheader"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
    android:id="@+id/htab_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 
        <android.support.v7.widget.Toolbar
            android:id="@+id/htab_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>         
</android.support.design.widget.AppBarLayout>

Hi, the action bar now shows up properly without being hidden by the `EditText` but now the action bar is too high. I have updated my post above to show what it looks like now. Is there anyway to fix this? And I would prefer not to use `app:titleMarginTop="13dp"` either. Thanks! — user1871869, Nov 30 '15 at 10:23
That did not fix it. It is exactly the same as it was above. — user1871869, Dec 01 '15 at 09:23

score 0 · Answer 3 · answered Nov 30 '15 at 04:08

0

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

answered Nov 30 '15 at 04:08

Mr Robot

1,747
6
35
67

View covering action toolbar?

3 Answers3