Why does Material Design Toolbar have this strange padding?

Question

In my ToolBar with android:padding=0dp, and in it I have a single LinearLayout with android:width=match_parent and android:layout_marginLeft="0dp". So at least width-wise, no part of the Toolbar (colored black in this example) should show on the sides of the LinearLayout (colored red in this SSCCE).

The problem is that the Toolbar is showing on the left side of the child LinearLayout. How do I make the LinearLayout span the entire Toolbar so that no part of the Toolbar shows?

MainActivity.java:

package tests.example_one;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

@SuppressLint("NewApi")
public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.mainActivity_appBar);

        setSupportActionBar(toolbar); 
    }

}

res/layout/activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/fullBackgroundPadding" >


    <include layout="@layout/app_bar"
        android:id="@+id/mainActivity_appBar" />

</LinearLayout>

res/layout/app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/appBarHeight"
    android:background="#000"
    android:padding="0dp" >


    <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F44336"
        android:layout_marginLeft="0dp">

    </LinearLayout>


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

res/values/dimens.xml

<resources>

    <dimen name="fullBackgroundPadding">8dp</dimen>

    <!-- App Bar -->
    <dimen name="appBarHeight">48dp</dimen>

</resources>

Toolbar is already a LinearLayout. So you don't need to add a LinearLayout but rather just the child views that you would like to show. — Steve C., May 22 '16 at 23:55
@SteveC. But it doesn't extend LinearLayout, rather directly extends ViewGroup — Solace, May 23 '16 at 00:20
Thats interesting because when I tried your app_bar layout in android studio, the design tab shows it as a LinearLayout. I was able to remove the LinearLayout you declared and add multiple child views within the toolbar and run it and it worked perfectly. May I ask what it is that you are trying to achieve by adding a LinearLayout? — Steve C., May 23 '16 at 00:24
@SteveC Just some Views (icon, textfield) added to Toolbar horizontally one after the other. I checked the reference for `Toolbar` and saw that it does not inherit from LinearLayout. SO I thought I was supposed to add the LinearLayout into it. — Solace, May 23 '16 at 00:31
@SteveC. I tried removing the LinearLayout. It didn't help. See the accepted answer. That is what that black part is. — Solace, May 23 '16 at 16:12

score 2 · Accepted Answer · answered May 23 '16 at 01:00

That black part is the inset the Toolbar applies to its content. Add the following two lines to your Toolbar's XML:

app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"

Also, don't forget to the app namespace.

So you are essentially changing your app_bar.xml from

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/appBarHeight"
    android:background="#000"
    android:padding="0dp" >


    <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F44336"
        android:layout_marginLeft="0dp">

    </LinearLayout>


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

to

<?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:layout_width="match_parent"
    android:layout_height="@dimen/appBarHeight"
    android:background="#000"
    android:padding="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp" >


    <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F44336">

    </LinearLayout>


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

Why does Material Design Toolbar have this strange padding?

1 Answers1