Padding between ActionBar's home icon and title

AndroidAndroid Actionbar

Android Problem Overview


Does anybody know how to set padding between the ActionBar's home icon and the title?

Android Solutions


Solution 1 - Android

EDIT: make sure you set this drawable as LOGO, not as your app icon like some of the commenters did.

Just make an XML drawable and put it in the resource folder "drawable" (without any density or other configuration).

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item
        android:drawable="@drawable/my_logo"
        android:right="10dp"/>
        

</layer-list>

The last step is to set this new drawable as logo in your manifest (or on the Actionbar object in your activity)

Good luck!

Solution 2 - Android

I adapted Cliffus answer and assigned the logo-drawable in my actionbar style definition, for instance like this in res/style.xml:

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#3f51b5</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleText</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
        <item name="android:logo">@drawable/actionbar_space_between_icon_and_title</item>
</style>

The drawable looks like Cliffus' one (here with the default app launcher icon) in res/drawable/actionbar_space_between_icon_and_title.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher"
        android:right="20dp"/>
</layer-list>

In the android_manifest.xml you can still set a different app icon (launcher icon on 'desktop'. Any different logo definition here are visible in activities without an action bar.

Solution 3 - Android

I also faced a similar issue, in my case I had to set titles dynamically on each activity depending on the content.

So this worked for me.

actionBar.setTitle("  " + yourActivityTitle);

If all you want is the spacing, this is the easiest solution I could think of.

Solution 4 - Android

This is how I was able to set the padding between the home icon and the title.

ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);

I couldn't find a way to customize this via the ActionBar xml styles though. That is, the following XML doesn't work:

<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">        
    <item name="android:titleTextStyle">@style/ActionBarTitle</item>
    <item name="android:icon">@drawable/ic_action_home</item>        
</style>

<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingLeft">12dp</item>   <!-- Can't get this padding to work :( -->
</style>

However, if you are looking to achieve this through xml, these two links might help you find a solution:

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

(This is the actual layout used to display the home icon in an action bar) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml

Solution 5 - Android

This is a common question in Material Design as you may want to line your toolbars title with the content in the fragment below. To do this, you can override the default padding of "12dp" by using the attribute contentInsetStart="72dp" in your toolbar.xml layout as shown below

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/app_theme_color"
    app:contentInsetStart="72dp"/>

Then in your activity, call

Toolbar toolbar = (Toolbar) activity.findViewById(R.id.toolbar);
toolbar.setTitle("Title Goes Here");

And you end up with this:

Toolbar

Solution 6 - Android

If you are using toolbar from AppCompat (android.support.v7.widget.Toolbar, >= revision 24, June 2016), the padding between the icon and the title can be changed with the following value :

  app:contentInsetStartWithNavigation="0dp"

To improve my answer, you can use it on your toolbar directly inside your activity or you can create a new layout file for your toolbar. In this case, you just have to import your toolbar's @id using the include property on each needed views.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>

You can then import your layout on your activity.xml

<include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Solution 7 - Android

For me only the following combination worked, tested from API 18 to 24

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

where in "app" is : xmlns:app="http://schemas.android.com/apk/res-auto"

for example.

 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/SE_Life_Green"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                >
				.......
				.......
				.......
            </android.support.v7.widget.Toolbar>

Solution 8 - Android

Using titleMarginStart works for me. Xamarin example:

<android.support.v7.widget.Toolbar
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:titleMarginStart="24dp"/>

Set the logo like so:

mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";

Solution 9 - Android

I used \t before the title and worked for me.

Solution 10 - Android

Im using a custom image instead of the default title text to the right of my apps logo. This is set up programatically like

    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setCustomView(R.layout.include_ab_txt_logo);
    actionBar.setDisplayShowCustomEnabled(true);

The issues with the above answers for me are @Cliffus's suggestion does not work for me due to the issues others have outlined in the comments and while @dushyanth programatic padding setting may have worked in the past I would think that the fact that the spacing is now set using android:layout_marginEnd="8dip" since API 17 manually setting the padding should have no effect. See the link he posted to git to verify its current state.

A simple solution for me is to set a negative margin on my custom view in the actionBar, like so android:layout_marginLeft="-14dp". A quick test shows it works for me on 2.3.3 and 4.3 using ActionBarCompat

Hope this helps someone!

Solution 11 - Android

I solved this problem by using custom Navigation layout

Using it you can customize anything in title on action bar:

build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:21.0.+'
    ...
}

AndroidManifest.xml

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name">
        <activity
            android:name=".MainActivity"
            android:theme="@style/ThemeName">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

styles.xml http://schemas.android.com/tools">

<style name="ThemeName" parent="Theme.AppCompat.Light">
   <item name="actionBarStyle">@style/ActionBar</item>
   <item name="android:actionBarStyle" tools:ignore="NewApi">@style/ActionBar</item>

<style name="ActionBar" parent="Widget.AppCompat.ActionBar">
   <item name="displayOptions">showCustom</item>
   <item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>

    <item name="customNavigationLayout">@layout/action_bar</item>
   <item name="android:customNavigationLayout" tools:ignore="NewApi">@layout/action_bar</item>

    <item name="background">@color/android:white</item>
   <item name="android:background">@color/android:white</item>

action_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/action_bar_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:drawableLeft="@drawable/ic_launcher"
          android:drawablePadding="10dp"
          android:textSize="20sp"
          android:textColor="@android:color/black"
          android:text="@string/app_name"/>

Solution 12 - Android

I had a similar issue but with spacing between the up and the custom app icon/logo in the action bar. Dushyanth's solution of setting padding programatically worked for me (setting padding on app/logo icon). I tried to find either android.R.id.home or R.id.abs__home (ActionBarSherlock only, as this ensures backwards compatibility), and it seems to work across 2.3-4.3 devices I've tested on.

Solution 13 - Android

For my case, it was with Toolbar i resolved it like this:

ic_toolbar_drawble.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@drawable/ic_toolbar"
    android:right="-16dp"
    android:left="-16dp"/>
</layer-list>

In my Fragment, i check the api :

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
      toolbar.setLogo(R.drawable.ic_toolbar);
else
      toolbar.setLogo(R.drawable.ic_toolbar_draweble);

Good luck!

Solution 14 - Android

You can change drawableSize of your DrawerArrow like this:

<style name="MyTheme" parent="android:Theme.WithActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="barLength">24dp</item>
    <item name="arrowShaftLength">24dp</item>
    <item name="arrowHeadLength">10dp</item>
    <item name="drawableSize">42dp</item> //this is your answer
</style>

It isn't correct answer, because you can't choose padding side and DrawerArrow icon scaling when change drawableSize (drawableSize = width = height). But you can margin from left. To margin from right do

findViewById(android.R.id.home).setPadding(10, 0, 5, 0);

Solution 15 - Android

I used this method setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight) and it works!

int padding = getResources().getDimensionPixelSize(R.dimen.toolbar_content_insets);
mToolbar.setContentInsetsAbsolute(padding, 0);

Solution 16 - Android

When you are using a custom Toolbar, you can use

toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.activity_title);
setSupportActionBar(toolbar);
getSupportActionBar().setLogo(R.drawable.logo);

and in your toolbar layout simply set app:titleMarginStart="16dp"

Note that you have to set the icon as a logo, don't use getSupportActionBar().setIcon(R.drawable.logo) instead use: getSupportActionBar().setLogo(R.drawable.logo)

Solution 17 - Android

I used AppBarLayout and custom ImageButton do to so.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp"
    android:background="@android:color/transparent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
           
       <ImageView
           android:layout_width="32dp"
           android:layout_height="32dp"
           android:src="@drawable/selector_back_button"
           android:layout_centerVertical="true"
           android:layout_marginLeft="8dp"
           android:id="@+id/back_button"/>

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </RelativeLayout>    
</android.support.design.widget.AppBarLayout>

My Java code:

findViewById(R.id.appbar).bringToFront();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
getSupportActionBar().setDisplayShowTitleEnabled(false);

Solution 18 - Android

You can achieve same by method as well:

Drawable d = new InsetDrawable(getDrawable(R.drawable.nav_icon),0,0,10,0);
mToolbar.setLogo(d);

Solution 19 - Android

In your XML, set the app:titleMargin in your Toolbar view as following:

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleMarginStart="16dp"/>

Or in your code:

toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom

Solution 20 - Android

Just include:

    app:titleMargin="10dp"

Within your xml file, like:

    <androidx.appcompat.widget.Toolbar
    android:id="@+id/tbrMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleMargin="10dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme" />

Solution 21 - Android

this work for me to add padding to the title and for ActionBar icon i have set that programmatically.

 getActionBar().setTitle(Html.fromHtml("<font color='#fffff'>&nbsp;&nbsp;&nbsp;Boat App </font>"));

Solution 22 - Android

<string name="app_name">"    "Brick Industry</string>

Just add " " for your app name It will add space between icon and title

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlesquiView Question on Stackoverflow
Solution 1 - AndroidCliffusView Answer on Stackoverflow
Solution 2 - AndroidMinskyView Answer on Stackoverflow
Solution 3 - AndroidRahul SainaniView Answer on Stackoverflow
Solution 4 - AndroidDushyanthView Answer on Stackoverflow
Solution 5 - AndroidthemichaelscottView Answer on Stackoverflow
Solution 6 - AndroidtrypView Answer on Stackoverflow
Solution 7 - AndroidAjitView Answer on Stackoverflow
Solution 8 - AndroidDruidView Answer on Stackoverflow
Solution 9 - AndroidZaniniView Answer on Stackoverflow
Solution 10 - AndroidDoriView Answer on Stackoverflow
Solution 11 - Androidmc.devView Answer on Stackoverflow
Solution 12 - AndroidraptorsView Answer on Stackoverflow
Solution 13 - AndroidContextView Answer on Stackoverflow
Solution 14 - AndroidAndriy FedivView Answer on Stackoverflow
Solution 15 - AndroidTHANN PhearumView Answer on Stackoverflow
Solution 16 - AndroidMartin SchüllerView Answer on Stackoverflow
Solution 17 - AndroidNouman ChView Answer on Stackoverflow
Solution 18 - AndroidE Player PlusView Answer on Stackoverflow
Solution 19 - AndroidAhmed AshourView Answer on Stackoverflow
Solution 20 - AndroidcmjmView Answer on Stackoverflow
Solution 21 - AndroidMuhammad DawoodView Answer on Stackoverflow
Solution 22 - AndroidManoharView Answer on Stackoverflow