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.

Ouphe

refer this https://mcmap.net/q/102462/-android-custom-action-bar-how-to-use-entire-width – Baccate

Better if you correct me in the same code – Ouphe

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 – Baccate

Did you solve it? – Premaxilla

Answer 1

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

Ernieernst

Answer 2

Try using mToolbar.setContentInsetStartWithNavigation(0);

Magnesite

This suggestion didnt work. I still have the padding between back arrow and the edit text. Any other suggestions? – Friedman

Doesn't remove all the space but definitely removes some – Patinous

Answer 3

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.

Chuppah

Answer 4

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"

Ludie

Changes appear on IDE but not on device – Ouphe

another way could be to create your own toolbar and not use the default one. – Ludie