Janneman96 Janneman96 - 4 months ago 17
Android Question

Toolbar fills the whole screen

I'm new to the drawer layout and the use of fragments.

I used the tutorial on creating an activity with a

DrawerLayout
.
It gave me a nullpointer on
getActionBar()
, so I added a toolbar to the activity main and used
getSupportActionBar()
instead.

Now it looks like the toolbar fills the entire screen, because the title is in the middle of the screen and the background of the toolbar is on the whole screen too. Here is the xml code:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" />
<!-- The navigation drawer -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>


I've tried replacing the layout_height with 56dp and i've tried making a seperate layout file with the toolbar in it and include it into this xml, but that didn't work.

Why is my Toolbar filling the entire screen?

Answer

A DrawerLayout expects 2 Views in it. You supply 3.

The first view is the "background". It is the content of your screen. The second view, the drawer, is supposed to animate in and out.

You supply 3 views. So your toolbar is "the content"—thus fullscreen, and your drawer is your actual content.

To fix your issue, try something like this:

<DrawerLayout>

  <!-- The main content view -->
  <LinearLayout>
    <Toolbar/>
    <FrameLayout
       android:id="@+id/content_frame"/>
  </LinearLayout>

  <!-- The navigation drawer -->
  <ListView/>
</DrawerLayout>