CODEWITHSUNDEEP
androidandroid-toolbar
James Cross
James Cross

Reputation: 7859

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

Upvotes: 206

Views: 111443

Answers (10)

Varundroid
Varundroid

Reputation: 9234

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.

Upvotes: 152

Someone Somewhere
Someone Somewhere

Reputation: 23787

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>

Upvotes: 2

Ahmet Zorer
Ahmet Zorer

Reputation: 1

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

Upvotes: -2

Amit Walke
Amit Walke

Reputation: 293

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"

Upvotes: 12

Jraco11
Jraco11

Reputation: 4586

A combination of

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

and

mToolbar.setContentInsetsAbsolute(0, 0) In the code

This worked for me.

Upvotes: 4

Chris Banes
Chris Banes

Reputation: 31871

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.

Upvotes: 299

JamisonMan111
JamisonMan111

Reputation: 200

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

Upvotes: 0

worked
worked

Reputation: 5880

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

Upvotes: 9

Aneh Thakur
Aneh Thakur

Reputation: 1100

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

Upvotes: 3

Michael
Michael

Reputation: 9864

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

Upvotes: 3

Related Questions