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: enter image description here

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 desc

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

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>

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 04: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 09 '16 at 14:00

score 295 · Accepted Answer · edited Aug 24 '16 at 11:22

295

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.

edited Aug 24 '16 at 11:22

ryanjdillon

17,658
9
85
110

answered Oct 21 '14 at 20:42

Chris Banes

31,763
16
59
50

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 07:02
1

The contentInsetStart is use to inset from any toolbar provided UI (for instance the navigation icon). – Chris Banes Oct 23 '14 at 09:11
And how would you align the radiobutton with the icon in the toolbar? I have similar issues: http://stackoverflow.com/questions/26623042/align-an-icon-with-the-toolbar-icon-android-material-design – 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 09 '16 at 14:00
`app:contentInsetStart="72dp"` – Roel Mar 11 '16 at 13:59
@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: http://stackoverflow.com/q/38998161/2153926 – GSala Aug 17 '16 at 13:41
2

setting `contentInsetStartWithNavigation` to 0 did the trick for me with support-v4:25.0.1 – Quentin G. Dec 06 '16 at 15:51
don't forget to set `android:padding="0dp"` also – 4emodan Dec 18 '17 at 12:42
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) – kiranking Mar 07 '19 at 10:13

score 149 · Answer 2 · edited Dec 23 '22 at 08:12

149

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.

edited Dec 23 '22 at 08:12

starball

20,030
7
43
238

answered Dec 05 '14 at 05:41

Varundroid

9,135
14
63
93

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

Not working for CollapsingToolBarLayout . Please help me . – aslamhossin Jan 30 '17 at 11:29
adding android:padding="0dp" helped me – AITAALI_ABDERRAHMANE Feb 19 '17 at 15:09
1

along with the 4 stated above, `app:contentInsetStartWithNavigation` might help fix things if not already enough – computingfreak Jun 13 '17 at 03:49

score 12 · Answer 3 · answered Jan 02 '17 at 06:08

12

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"

answered Jan 02 '17 at 06:08

Amit Walke

293
3
6

score 9 · Answer 4 · answered Nov 17 '15 at 05:20

9

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

answered Nov 17 '15 at 05:20

worked

5,762
5
54
79

don't you need to convert the padding to dp's and take into account the display density. – Someone Somewhere Apr 03 '18 at 21:36

score 4 · Answer 5 · answered Nov 18 '16 at 22:46

4

A combination of

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

and

mToolbar.setContentInsetsAbsolute(0, 0) In the code

This worked for me.

answered Nov 18 '16 at 22:46

Jraco11

4,526
3
20
20

score 3 · Answer 6 · answered Feb 20 '15 at 15:37

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

enter image description here

score 3 · Answer 7 · answered Sep 09 '15 at 13:00

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

score 2 · Answer 8 · edited Sep 08 '21 at 17:21

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>

JamisonMan111 · Answer 9 · 2015-12-03T00:06:49.547

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

score -2 · Answer 10 · edited May 15 '17 at 15:44

-2

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

edited May 15 '17 at 15:44

Paul Roub

36,322
27
84
93

answered May 15 '17 at 09:22

Ahmet Zorer

1
1

Android API 21 Toolbar Padding

10 Answers10

Linked

Related