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:

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 ?

Loquat

you can create a custom action bar and display the items as you like. – Mascarenas

Why is this a problem? This is a design decision by the platform developers, and this is how Google's apps for Android look. – Gutta

@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. – Loquat

I agree with @Gutta – Dendrology

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

Answer 1

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" />

Ruin

@Sagar Chapagain glad to know that. – Ruin

It is nice solution. really helpful. – Ledford

#47207991 ..Still i am getting gap.! @Sagar Chapagain – Nabors

In my case i didn't use toolbar like this what should i do? Is there any way is there to change programmatically. – Decarlo

Answer 2

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>

Kemberlykemble

Answer 3

Add app:contentInsetStartWithNavigation="0dp" in toolbar

Thundery

Answer 4

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" />

Matador

Answer 5

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,
      ],
    ),
  )

Deictic