Android API 21 Toolbar Padding

Question

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="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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>

Bardo

have you also managed to remove the top/bottom paddings? I tried but nothing happens even setting the all the contentInsetX properties to 0dp. – Isma

similar as @patrickjason91 is it possible to align ImageView with Toolbar top (image has w,h: wrap_content) inside Toolbar? I was trying everything but couldn't make it.. My goal is to have something like bookmark ribbon image "hanging" from the top of the Toolbar, bet there is always some padding that I can not eliminate it – Bruell

Answer 1

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.

Foxy

Thank you so much for this. Seems a bit strange to move away from padding and margin though. Is this an android 5 thing? – Bardo

The contentInsetStart is use to inset from any toolbar provided UI (for instance the navigation icon). – Foxy

And how would you align the radiobutton with the icon in the toolbar? I have similar issues: #26623542 – Transponder

There is also titleMarginStart attr for title padding – Parallax

@ChrisBanes is it possible to align imageView with Toolbar top (image has w,h: wrap_content) inside Toolbar? I was trying everything but couldn't make it.. My goal is to have something like bookmark ribbon image "hanging" from the top of the Toolbar, bet there is always some padding that I can not eliminate it – Bruell

app:contentInsetStart="72dp" – Carine

@ChrisBanes When using a SearchView (which aligns with the avatars by default) and you combine it with this solution, the title is aligned but the SearchView becomes missaligned. Any ideas? I created a question here: https://mcmap.net/q/129328/-align-toolbar-title-and-searchview-with-list-content-with-avatars/2153926 – Electrostatics

setting contentInsetStartWithNavigation to 0 did the trick for me with support-v4:25.0.1 – Doehne

don't forget to set android:padding="0dp" also – Jutta

any idea why contentInsetStartWithNavigation doesn't work if ToolBar's children are wrapped in ConstraintLayout. (I needed to show/hide some views(horizontal) based on user's Game progress. So I thought ConstraintLayout is better for not having empty space after hide some view and show some view) – Anorthosite

Answer 2

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.

Cockeyed

Not working for CollapsingToolBarLayout . Please help me . – Tajo

adding android:padding="0dp" helped me – Mossback

along with the 4 stated above, app:contentInsetStartWithNavigation might help fix things if not already enough – Marela

Answer 3

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"

Lenitalenitive

Answer 4

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);

Hijacker

don't you need to convert the padding to dp's and take into account the display density. – Tenebrae

Answer 5

A combination of

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

and

mToolbar.setContentInsetsAbsolute(0, 0) In the code

This worked for me.

Minima

Answer 6

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

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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

Orangeade

Answer 7

Make your toolbar like:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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

Steffaniesteffen

Answer 8

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>

Tenebrae

Answer 9

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...

Atherton

Answer 10

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

Woolworth