Remove margin in android toolbar icon

Question

I get this weird margin in my app toolbar between icon and navigation icon in the toolbar (as in the image). I've got no idea about where it comes from and how to remove it. After searching the internet I found this:

<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_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimaryDark"
    android:layout_margin="0dp"
    android:contentInsetLeft="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetStart="0dp"
    android:contentInsetEnd="0dp"
    android:padding="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetEnd="0dp">
</android.support.v7.widget.Toolbar>

But I still get this margin as in the figure:

Edit >> Solution

Well after using layout bound I figured much of the margins are of the icon(as in figure). But can I still remove this margin and change the size of the icon and the title text.

Edit

Following @Amir solution: Helper for java:

class BasicActivity extends AppCompatActivity{
    protected Toolbar mToolbar;    /// Initilize it in onCreate methode
    .....

     protected void setupToolbar(String title) {
        toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar ab = getSupportActionBar();
        if (ab != null) {
            ab.setDisplayHomeAsUpEnabled(true);
            ab.setDisplayShowHomeEnabled(true);
        }

       if (!TextUtils.isEmpty(title)) {
        setTitle(title);
    }
}

}

And in your activity class:

class Main extends BasicActivity{
     @override
     protected void onCreate(Bundle saved){
          super.onCreate(saved);
          ....
          setupToolbar("MAIN");
     }
}

contentInsetStart | contentInsetLeft | contentInsetEnd | contentInsetRight — Amir, Jul 11 '16 at 07:29
So easiest way is to turn on Layout bound and you can find out it's related to your home icon or drawer Icon. — Amir, Jul 11 '16 at 07:31

Amir · Accepted Answer · 2016-07-20T09:01:17.467

You can easily remove Margin | padding between title and back icon with:

app:contentInsetStartWithNavigation="0dp"

Margin | padding In left/right side of toolbar with:

app:contentInsetStart="0dp"

Also if you need more customization do with following:

<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
    android:background="@color/color_primary"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/icon_toolbar_left"
            style="@style/IconFont.Large"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="?attr/selectableItemBackground" />



        <TextView
            android:id="@+id/text_toolbar_title"
            style="@style/Textview.White.MediumSmall"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/icon_toolbar_right"
            android:layout_toRightOf="@+id/icon_toolbar_left"
            android:gravity="center"
            android:text="@string/nav_category"/>


        <ImageView
            android:id="@+id/icon_toolbar_right"
            style="@style/IconFont.Large"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="?attr/selectableItemBackground"/>

    </RelativeLayout>

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

well i got it but I've got one more problem now if I want to set title and icons i'll have to declare functions per activity can you give me a way out of that too.( maybe how to create a custom toolbar view extending the toolbar) — Anish Silwal, Jul 15 '16 at 16:47
@ASK Create a BaseActivity that extend your Activity and put **setToolbarTitle** , **setToolbarIcon** and other kinds of method inside. then you just need to pass your title and icons :) — Amir, Jul 15 '16 at 16:51
I've edited my question with a solution from your approach. Plz check to see if I'm in the right track or plz edit the mistakes — Anish Silwal, Jul 15 '16 at 17:05

score 7 · Answer 2 · answered Nov 09 '18 at 10:59

You can adjust the margins by modifying the theme and style, like this：

<style name="cusToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
    <!--default is 56dp-->
    <item name="android:minWidth">0dp</item>  
    <item name="android:paddingLeft">16dp</item>
    <item name="android:paddingRight">16dp</item>
</style>

<style name="cusToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <!--default 4dp-->
    <item name="titleMargin">0dp</item> 
    <!--default @dimen/abc_action_bar_content_inset_with_nav-->
    <item name="contentInsetStartWithNavigation">0dp</item> 
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="toolbarNavigationButtonStyle">@style/cusToolbarNavigationButtonStyle</item>
    <item name="toolbarStyle">@style/cusToolbarStyle</item>

</style>

score 1 · Answer 3 · edited Sep 17 '20 at 05:00

1

if you are using this

   <android.widget.Toolbar>
    android:contentInsetStart="0dp"
    android:contentInsetLeft="0dp"
</android.widget.Toolbar>

if using

    <androidx.appcompat.widget.Toolbar>

    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
</androidx.appcompat.widget.Toolbar>

edited Sep 17 '20 at 05:00

Javad Dehban

1,282
3
11
24

answered Sep 17 '20 at 04:47

Muhammad Awais

11
3

score 0 · Answer 4 · answered Dec 18 '17 at 12:25

0

If you want to remove the margin/padding from the title in a CollapsingToolbarLayout you might find this usefull:

<android.support.design.widget.CollapsingToolbarLayout
    app:expandedTitleMarginStart="0dp"
    .../>

answered Dec 18 '17 at 12:25

jobbert

3,297
27
43

score 0 · Answer 5 · answered Sep 30 '20 at 19:18

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:contentInsetEnd="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:contentInsetEndWithActions="0dp"
            >

Remove margin in android toolbar icon

5 Answers5

Linked