Android - Activity Home/Up arrow has additional padding/margin with SDK 24

Question

I've just updated my app from using SDK 23 to SDK 24.

A problem has arisen for my activities that have show the Up/Home arrow (i.e., getSupportActionBar().setDisplayHomeAsUpEnabled(true)) in that there is now additional (unwanted) space between the Up arrow and the activity title.

For activities that don't have an Up arrow, the activity title is in exactly the same place as before, which suggests the additional padding/margin is associated with the Up arrow rather than with the activity title.

My question is how do I change the layout so that it looks the same with SDK 24 as it did with SDK 23?

Small gap between Up arrow and title using SDK 23:

Large (unwanted) gap between Up arrow and title using SDK 24:

Here is my old build.gradle (SDK 23):

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 19
        targetSdkVersion 23
        versionCode 42
        versionName "0.42"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.google.android.gms:play-services-vision:9.0.2'
    compile 'ch.acra:acra:4.7.0'
    compile 'com.android.support:support-v4:23.4.0'
    compile 'com.android.support:recyclerview-v7:23.4.0'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
    compile 'com.android.support:support-v13:23.4.0'
    compile 'com.journeyapps:zxing-android-embedded:3.2.0@aar'
    compile 'com.google.zxing:core:3.2.1'
}

Here is the new build.gradle (SDK 24):

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "23.0.3"

    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 19
        targetSdkVersion 24
        versionCode 42
        versionName "0.42"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.google.android.gms:play-services-vision:9.0.2'
    compile 'ch.acra:acra:4.7.0'
    compile 'com.android.support:support-v4:24.0.0'
    compile 'com.android.support:recyclerview-v7:24.0.0'
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.android.support:design:24.0.0'
    compile 'com.android.support:support-v13:24.0.0'
    compile 'com.journeyapps:zxing-android-embedded:3.2.0@aar'
    compile 'com.google.zxing:core:3.2.1'
}

Answer 1

I think that this padding is a new standard to match Material spec in SDK 24. First you must hide default toolbar title by this code:

getSupportActionBar().setDisplayShowTitleEnabled(false);

Then make a file called toolbar.xml and add these codes in that file:

<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="56dp"
    android:background="@color/primary_color"
    app:theme="@style/ThemeOverlay.AppCompat"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:contentInsetStartWithNavigation="0dp">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp" <!-- Add margin -->
        android:layout_marginStart="16dp"
        android:gravity="left|center"
        android:text="Toolbar Title" <!-- Your title text -->
        android:textColor="@color/white" <!-- Matches default title styles -->
        android:textSize="20sp"
        android:fontFamily="sans-serif-medium"/>

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

As you see, you can control everything in this file. Look at this line in toolbar.xml :

app:contentInsetStartWithNavigation="0dp"

This is what you want. Goodluck.