Android Api 21 Toolbar Padding

Android Api 21 Toolbar Padding

How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?

I am talking about the red arrows on this picture:

Here is the code I am using:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:padding="0dp"
        android:layout_margin="0dp">

        <RelativeLayout
            android:id="@+id/action_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="0dp"
            android:padding="0dp"
            android:background="#000000">

            <Spinner
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </RelativeLayout>
</Toolbar>

As you can see I've set all the relevant padding to 0, but there is still padding around the Spinner. What have I done wrong or what do I need to do to get rid of the extra padding?

Edit Some have questioned why I am trying to do this.

As per the Material Design specs, the spinner should be 72dp from the left side

I need to neutralize the padding Google have put there in order to properly place my spinner:

Edit 2

As per Chris Bane's answer below I set the contentInsetStart to 0. For the support library you will need to use the app namespace:

<android.support.v4.widget.DrawerLayout
    xmlns:android=""
    xmlns:app=""
    android:layout_width="match_parent"
    android:layout_height="match_parent">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="@dimen/action_bar_height"
        android:background="?attr/colorPrimary"
        android:contentInsetStart="0dp"
        android:contentInsetLeft="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v4.widget.DrawerLayout>

I hope this helps someone, it had me confused for several days.

2

10 Answers

The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.

Change this to 72dp to align to the keyline.

Update for support library v24.0.0:

To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.

10

Above answer is correct but there is still one thing that might create issues (At least it did create an issue for me)

I used the following and it doesn't work properly on older devices -

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

The trick is here just use the following -

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

and get rid of -

android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"

And now it should work fine throughout all the devices.

Hope it helps.

4

Simpley add this two line in toolbar. Then we get new removed left side space bcoz by default it 16dp.

android:contentInsetStart="0dp"
app:contentInsetStart="0dp"

In case someone else stumbles here... you can set padding as well, for instance:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

int padding = 200 // padding left and right

toolbar.setPadding(padding, toolbar.getPaddingTop(), padding, toolbar.getPaddingBottom());

Or contentInset:

toolbar.setContentInsetsAbsolute(toolbar.getContentInsetLeft(), 200);
1

A combination of

android:padding="0dp" In the xml for the Toolbar

and

mToolbar.setContentInsetsAbsolute(0, 0) In the code

This worked for me.

Here is what I did and it works perfectly on every version of Android.

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android=""
    xmlns:app=""
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@color/primary_color"
    app:theme="@style/ThemeOverlay.AppCompat"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp" <!-- Add margin -->
        android:layout_marginStart="16dp"
        android:gravity="left|center"
        android:text="Toolbar Title" <!-- Your title text -->
        android:textColor="@color/white" <!-- Matches default title styles -->
        android:textSize="20sp"
        android:fontFamily="sans-serif-medium"/>

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

MyActivity.java (To hide default toolbar title)

getSupportActionBar().setDisplayShowTitleEnabled(false); // Hide default toolbar title

Result with Keylines Shown

Make your toolbar like:

<android.support.v7.widget.Toolbar xmlns:android=""
xmlns:app=""
android:id="@+id/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="@color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>

You need to add

contentInset

attribute to add spacing

please follow this link for more - Android Tips

Update AndroidX toolbar:

<!-- TOOLBAR -->
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentInsetStart="0dp">

    <TextView
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/create_account_title"
        android:textColor="@color/color_dark_grey"/>

</androidx.appcompat.widget.Toolbar>

Ok so if you need 72dp, couldn't you just add the difference in padding in the xml file? This way you keep Androids default Inset/Padding that they want us to use.

So: 72-16=56

Therefor: add 56dp padding to put yourself at an indent/margin total of 72dp.

Or you could just change the values in the Dimen.xml files. that's what I am doing now. It changes everything, the entire layout, including the ToolBar when implemented in the new proper Android way.

Dimen Resource File

The link I added shows the Dimen values at 2dp because I changed it but it was default set at 16dp. Just FYI...

((Toolbar)actionBar.getCustomView().getParent()).setContentInsetsAbsolute(0,0);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

David Miller
Author

David Miller

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.