Solace Solace - 6 months ago 32
Android Question

Why does Material Design Toolbar have this strange padding?

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?

enter image description here

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>

NXA NXA
Answer

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>