CODEWITHSUNDEEP
androidmaterial-designandroid-toolbarlayoutparamsandroid-layoutparams
Solace
Solace

Reputation: 9010

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>

Upvotes: 1

Views: 479

Answers (1)

NXA
NXA

Reputation: 440

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>

Upvotes: 2

Related Questions