Android API 21 Toolbar Padding

up vote117down votefavorite

44

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>

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

android android-toolbar

shareimprove this question

edited Oct 24 '14 at 15:42 MrEngineer13 16.7k94975

asked Oct 19 '14 at 20:25 James Cross 3,12651627

4

have you also managed to remove the top/bottom paddings? I tried but nothing happens even setting the all the contentInsetX properties to 0dp. – patrickjason91 Apr 29 '15 at 4:03

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 – Ewoks Feb 9 at 14:00 

add a comment

6 Answers

activeoldestvotes

up vote152down voteaccepted

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.

shareimprove this answer

edited Aug 24 at 11:22 ryanjdillon 2,04812048

answered Oct 21 '14 at 20:42 Chris Banes 22.1k124746

Thank you so much for this. Seems a bit strange to move away from padding and margin though. Is this an android 5 thing? – James Cross Oct 23 '14 at 7:02

1

The contentInsetStart is use to inset from any toolbar provided UI (for instance the navigation icon). – Chris Banes Oct 23 '14 at 9:11

And how would you align the radiobutton with the icon in the toolbar? I have similar issues:stackoverflow.com/questions/26623042/… – Ferran Negre Nov 13 '14 at 23:06

There is also titleMarginStart attr for title padding – deviant Mar 11 '15 at 14:22

@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 – Ewoks Feb 9 at 14:00 

show 2 more comments

 

up vote98down vote

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.

shareimprove this answer

edited Dec 18 '14 at 5:10

answered Dec 5 '14 at 5:41 Varundroid 5,40694676

1

Thanks, it worked fine – user1922137 May 22 '15 at 8:13

this might be the default behaviour. Thanks =) – Luciano Rodríguez Jul 7 '15 at 15:42

You are the best :) – The Finest Artist Jul 26 '15 at 10:28

great answer ^_^ – Nininea Nov 12 '15 at 8:23

1

what about top? – Ewoks Feb 9 at 14:07

add a comment

up vote3down vote

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

shareimprove this answer

answered Sep 9 '15 at 13:00