Remove space between back arrow & image in toolbar

Question

I want to remove space between in-built back arrow & imageview in toolbar.

Below is my xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activities.AppBaseActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            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/colorPrimary"
            android:contentInsetStart="0dp"
            android:contentInsetLeft="0dp"
            android:contentInsetRight="0dp"
            android:contentInsetEnd="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetEnd="0dp"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <RelativeLayout
                android:id="@+id/rl_User_Profile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/imageView_User_Image"
                    android:layout_width="150dp"
                    android:layout_height="40dp"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_centerVertical="true"
                    android:layout_margin="1dp"
                    android:src="@drawable/app_logo" />

                <itcube.spcl.mobileapp.ui.view.CustomTextView
                    app:font="droid-serif.regular.ttf"
                    android:id="@+id/textView_User_Name"
                    android:text="jkdfsbjkbdkjsbf"
                    android:layout_marginLeft="3dp"
                    android:layout_toRightOf="@+id/imageView_User_Image"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_alignTop="@+id/imageView_User_Image"/>
            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_app_base" />

</android.support.design.widget.CoordinatorLayout>

styles xml

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

PSA snapshot shows space which I have to remove. Java file is just having code to define toolbar & set home button enabled means back arrow.

try using framelayout instead of relativelayout or you should give padding and margin 0 to rl_User_Profile. please use background color for it to check how much of the area is occupied by it — Amrut Bidri, Feb 14 '17 at 12:11

score 17 · Answer 1 · edited Sep 24 '18 at 11:31

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:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    app:contentInsetStartWithNavigation="0dp" />

score 11 · Answer 2 · answered Feb 14 '17 at 13:09

11

Try using mToolbar.setContentInsetStartWithNavigation(0);

answered Feb 14 '17 at 13:09

Sourabh

8,243
10
52
98

1

This suggestion didnt work. I still have the padding between back arrow and the edit text. Any other suggestions? – anoo_radha Feb 05 '18 at 15:22
1

Doesn't remove all the space but definitely removes some – Matthew Mitchell Jan 24 '21 at 13:41

score 0 · Answer 3 · answered Feb 14 '17 at 11:45

In your styles.xml :

Add

<style name="homeToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
        <item name="titleTextColor">@color/White</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="contentInsetLeft">12dp</item>
        <item name="contentInsetStart">12dp</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
        <item name="android:paddingLeft">10dp</item>
    </style>

and,

<style name="homeToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="android:minWidth">0dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:scaleType">centerInside</item>
    </style>

In your styles-v21, add

<style name="homeToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
        <item name="titleTextColor">@color/White</item>
        <item name="android:windowActionModeOverlay">true</item>
        <item name="android:contentInsetLeft">12dp</item>
        <item name="android:contentInsetStart">12dp</item>
        <item name="android:textColorSecondary">@color/White</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
        <item name="android:paddingLeft">10dp</item>
    </style>

and,

<style name="homeToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="android:minWidth">0dp</item>
        <item name="android:scaleType">centerInside</item>
        <item name="android:paddingRight">@dimen/dp10</item>
    </style>

Now in your App theme, add :

    <item name="toolbarStyle">@style/homeToolbarStyle</item>
    <item name="toolbarNavigationButtonStyle">@style/homeToolbarNavigationButtonStyle</item>

You can modify your parent themes as in your app.

score -1 · Answer 4 · answered Feb 14 '17 at 11:29

-1

As much as I know, that space is clickable area for the arrow.

The easiest way to do this, I think is to set minus margin for red box.

android:layout_marginLeft="-20dp"

answered Feb 14 '17 at 11:29

Mohammad Zarei

1,773
14
33

Changes appear on IDE but not on device – VVB Feb 14 '17 at 11:32
another way could be to create your own toolbar and not use the default one. – Mohammad Zarei Feb 14 '17 at 11:41

Remove space between back arrow & image in toolbar

4 Answers4