How to reduce the gap between navigation icon and toolbar title?

Question

My problem is the extra space between the nav-drawer icon and toolbar title. The sample images are below:

spacing between nav-drawer icon and title

spacing between back icon and toolbar

The xml view of the toolbar is

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

I have tried to solve this problem by using code below but no change occurred.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //toolbar.setTitleMarginStart(0);
    toolbar.setTitleMarginStart(-8);
}

Is there any way to solve this problem ?

you can create a custom action bar and display the items as you like. — JuLes, Nov 21 '16 at 10:18
Why is this a problem? This is a design decision by the platform developers, and this is how Google's apps for Android look. — Egor, Nov 21 '16 at 10:32
@egor Sometimes the title will be longer and it can give a better look and meaning if we can show 2/3 letters more. Plus experimenting on small things is fun too. — Sagar Chapagain, Nov 21 '16 at 10:40
I'd say you'll get better UX if you keep titles short, rather then tweaking default system UI. However, I can agree with the perspective that each app is unique: test your UI with your users, and if they react well to this kind of tweaks and find longer titles useful - then this would be the way to go. — Egor, Nov 21 '16 at 11:47

score 106 · Accepted Answer · answered Nov 21 '16 at 10:21

106

Add

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"

to the ToolBar.

Complete Code :

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp" />

answered Nov 21 '16 at 10:21

Harshad Pansuriya

20,189
8
67
95

@Sagar Chapagain glad to know that. – Harshad Pansuriya Nov 21 '16 at 10:34
1

It is nice solution. really helpful. – Praveen Mishra Feb 15 '17 at 15:24
1

https://stackoverflow.com/questions/47207491/remove-padding-between-hamburger-icon-and-toolbar ..Still i am getting gap.! @Sagar Chapagain – Ajay Jayendran Nov 09 '17 at 17:00
1

In my case i didn't use toolbar like this what should i do? Is there any way is there to change programmatically. – Vijay Aug 31 '18 at 08:32

score 10 · Answer 2 · answered May 27 '20 at 21:04

With the MaterialToolbar and the androidx.appcompat.widget.Toolbar you can use these attributes:

contentInsetStartWithNavigation: Minimum inset for content views within a bar when a navigation button is present, such as the Up button (default value=72dp).
contentInsetStart: Minimum inset for content views within a bar. Navigation buttons and menu views are excepted (default value = 16dp)
titleMarginStart: specifies extra space on the start side of the toolbar's title. If both this attribute and titleMargin are specified, then this attribute takes precedence. Margin values should be positive.

Just use in your layout:

    <com.google.android.material.appbar.MaterialToolbar
        app:contentInsetStartWithNavigation="0dp"
        app:titleMarginStart="0dp"
        ..>

Default:

With app:contentInsetStartWithNavigation="0dp":

With app:contentInsetStartWithNavigation="0dp" and app:titleMarginStart="0dp":

You can also define a custom style:

<style name="MyToolbar" parent="....">
    <item name="titleMarginStart">0dp</item>
    <item name="contentInsetStart">..dp</item>
    <item name="contentInsetStartWithNavigation">..dp</item>
</style>

score 6 · Answer 3 · answered Apr 26 '18 at 19:59

6

Add app:contentInsetStartWithNavigation="0dp" in toolbar

answered Apr 26 '18 at 19:59

nawaab saab

1,892
2
20
36

score 1 · Answer 4 · edited May 26 '20 at 10:09

Add this line app:contentInsetStartWithNavigation="0dp"

 <android.support.v7.widget.Toolbar
                android:id="@+id/share"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:navigationIcon="@drawable/action_back"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="@{title}"
                android:background="4855b5"
                app:titleTextColor="ffffff"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                app:titleTextAppearance="@style/Toolbar.TitleText"
                app:contentInsetStartWithNavigation="0dp" />

score 0 · Answer 5 · answered Dec 11 '20 at 17:14

To do In Flutter Android use titleSpacing: 0, in ** App Bar** layout

** Sample Code **

appBar: AppBar(
    actions: <Widget>[
      Icon(Icons.search_rounded),
      Icon(Icons.notifications),
      Icon(Icons.add_shopping_cart),
    ],
    leadingWidth: 26,
    titleSpacing: 0,
    backgroundColor: Colors.white70,
    leading: Icon(Icons.menu),
    elevation: 100.0,
    iconTheme: IconThemeData(color: Colors.black),
    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        appbarIcon,
      ],
    ),
  )

How to reduce the gap between navigation icon and toolbar title?

5 Answers5

Linked

Related