Toolbar overlaps LinearLayout

Question

I have a LinearLayout with 2 inner LinearLayouts. If I add the Toolbar in this layout-file it always overlaps the whole layout. So only the Toolbar is visible. In the other layout-files it worked without any problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="horizontal"
          tools:context="de.dk.mafi.ActMain">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:padding="2dp"
    app:titleMarginStart="20dp"
    app:titleTextAppearance="@style/MyMaterialTheme.Base.TitleTextStyle"
    app:titleTextColor="@color/textColorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="TEST"
        android:textColor="@android:color/white"
        android:textStyle="bold|italic"/>

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

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/border"
        android:padding="10dp"
        android:text="@string/welcome"/>

    <Button android:id="@+id/button2" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:text="Favoriten"/>


</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:layout_weight="1"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/training"/>

    <Button android:id="@+id/button" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:text="Hauptmenü"/>

</LinearLayout>

What is the problem here?

Answer 1

The first LinearLayout has a wrong orientation. It should be set with vertical, instead of horizontal which gives the other children (as the inner LinearLayouts) to be draw after the Toolbar on the right outside the width screen. Change to:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      ...
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:fitsSystemWindows="true">

Then, remove the android:fitsSystemWindows="true" from the Toolbar.

EDIT:

I just did this, it works as expected:

<LinearLayout 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:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context="...">

    <include layout="@layout/include_toolbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/blue"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/red"/>
</LinearLayout>

Where I'm reusing this Toolbar layout on other Activities:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"/>

Output:

My test contains above/below inner children, but to keep your requirements, juste add a parent container for the children, easily do as:

<LinearLayout ...>

   <include layout="@layout/include_toolbar" />

   <!-- use a parent container with horizontal orientation -->
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal">

       <LinearLayout
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1" .../>

       <LinearLayout
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1" .../>
    </LinearLayout>
</LinearLayout>