How can I have a toolbar stay at top of screen instead of showing up on the whole screen?

Question

This could be a problem with the way I'm handling layouts. Sort of new to Java and Android SDK. I'm using Android Studio.

My goal at this point is to have an app going which has the screen showing a navigation bar at the bottom with an icon, and a toolbar at the top with an "OFF" button and a "Save" button. Between the toolbar and the navigation bar should be a blank, white screen.

But I'm having trouble getting the toolbar to just stay at the top of the screen. The grey background takes up the entire screen in front of what was the white background. Here's a screenshot.

And here's what I have:

<RelativeLayout 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"
tools:context=".ContactActivity">

<RelativeLayout
    android:id="@+id/toolbar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/toolbar_background">

    <ToggleButton
        android:id="@+id/toggleButtonEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentleft="true"
        android:layout_marginLeft="20dp"
        android:text="@string/toggle_button" />

    <Button
        android:id="@+id/buttonSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:text="Save" />

    <RelativeLayout
        android:id="@+id/navbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@color/navbar_background"
        android:gravity="center_horizontal">

        <ImageButton
            android:id="@+id/imageButtonList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:contentDescription="Contact List Button"
            android:src="@drawable/contactlisticon" />
        <ImageButton
            android:id="@+id/imageButtonMap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRight0f="@id/imageButtonList"
            android:contentDescription="Contact Map Button"
            android:src="@drawable/mapicon" />
        <ImageButton
            android:id="@+id/imageButtonSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:contentDescription="Settings Button"
            android:layout_toRight0f="@id/imageButtonMap"
            android:src="drawable/settingsicon" />


    </RelativeLayout>

score 0 · Answer 1 · answered Mar 07 '15 at 08:23

You are kind of missing the point of a Toolbar. read about it at Toolbar preview. You on the other end are using RelativeLayout as a Toolbar which is wasteful.

to have a Bottom toolbar you can use another standalone toolbar (as described in the link) or use a LinearLayout like this:

<LinearLayout
    android:id="@+id/check_in_bottom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">
   ...
</LinearLayout>

This is assuming that your root Layout is a RelativeLayout

How can I have a toolbar stay at top of screen instead of showing up on the whole screen?

1 Answers1

Linked