Padding between ActionBar's home icon and title

Question

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

Welcome to the world of hacks: ***Android***. This simple thing should have been found by anyone (even a newbie) if we need this in other UI techs and application programming. However in Android, it's really mysterious. They ***intentionally*** hide the feature away, make it complicated and just to make Android become ***a world of hacks***. I don't know what their final purpose is. — King King, Oct 22 '16 at 04:08
This [question](https://stackoverflow.com/questions/35917867/space-between-toolbar-icon-and-toolbar-title) and answers give way to achieve this with attributes inside the toolbar (support v7) — Eli, Jul 26 '17 at 07:46

Cliffus · Answer 1 · 2013-04-10T18:11:10.837

102

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!

edited Apr 10 '13 at 18:11

answered Jan 16 '13 at 14:20

Cliffus

1,481
2
11
7

The padding added to the image also changes the launcher icon, which is not good at all =/ – Alesqui Mar 05 '13 at 19:50
This is a great and clean solution! Alesqui - just use a different icon for your launcher and your action bar – dhaag23 Mar 20 '13 at 00:37
1

There is a big problem here with this solution. I used it and @Alesqui is right - the app icon changed and became smaller... You could change icon but since dp is different for different phones then this solution doesn't cut it in a production app. – Johan S Mar 20 '13 at 18:43
@dhaag23 to use different icons, the launcher activity cannot have the modified img as icon. So I would have to have a launcher Activity with the unmodified img and then call the Activities with the modified img. And the modified img does not have a margin, but a PADDING instead (which means that the img original icon is forced to reduce horizontally) – Alesqui Mar 20 '13 at 19:38
@Alesqui You can make a drawable with a margin like this: – dhaag23 Apr 05 '13 at 17:32
@dhaag23, that's exactly how Cliffus described in his post. But I tested here and the image gets distorted (like a padding behavior would do). So, it didn't work =/ – Alesqui Apr 05 '13 at 17:52
3

make sure you are setting this drawable as LOGO, not as your app icon. good luck! – Cliffus Apr 10 '13 at 18:06
1

I'm also seeing distortion. If I apply right padding as above, the right hand side of the image is cropped. – Neil Jul 09 '13 at 17:49
Smart and robust solution. Does not depend on internals. – Zsolt Safrany Jul 11 '13 at 12:24
1

Interesting solution but does not work for me - i can either add extra padding this way or crop the logo image - no good (4.3) – Dori Oct 11 '13 at 12:26
1

@Cliffus - nice solution. My requirement was to take the logo to left so I used : android:left="-4dp". – TharakaNirmana Sep 11 '14 at 05:13
Works when all else fails! – User3 Oct 24 '14 at 14:41
if you use logo i think you have to turn it on in the actionbar...setDisplayUseLogoEnabled() Enables the use of an alternative image (a "logo") in the Action Bar, instead of the default application icon. A logo is often a wider, more detailed image that represents the application – j2emanue Oct 24 '14 at 16:26

score 70 · Accepted Answer · answered Oct 29 '14 at 10:02

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.

Sorry, I can't say something about it in 5.1. I switched to the more flexible Toolbar-Control. If not already done, I recommend to open a new question here on StackOverflow and write some more details, what worked for you (<5.1) and what does not work and what you tried with 5.1, but didn't come to a solution. — Minsky, Aug 12 '15 at 08:57
Thank you @Minsky, i inspired from your answer to resolve my problem, i put how in the answer below :) — Context, Dec 04 '15 at 13:52

Rahul Sainani · Answer 3 · 2014-12-16T23:13:06.537

55

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.

edited Dec 16 '14 at 23:13

answered Feb 05 '14 at 13:29

Rahul Sainani

3,437
1
34
48

13

Why the down vote? Don't reckon it's a wrong answer, just another way of doing it. – Rahul Sainani Mar 05 '14 at 10:32
This is not a clean way of doing this at all. Yes, it works, but so do table-based layouts in HTML. Ask any web developer, and they'll say table-based layouts are a sign of sloppy/inexperienced coding. – LukeWaggoner Dec 13 '14 at 01:38
3

@idratherbeintheair Yes I agree this isn't the "cleanest" way so now it only says easiest. But when you point out something, please post an alternative solution. I faced this issue and this is what I've used in my app, so I shared. – Rahul Sainani Dec 16 '14 at 23:15
3

Really? This solution might not work the same on different screens with different DPI. – Roman Bugaian Mar 28 '15 at 19:16
Not how I'd like to do it :) But it works ! And was the quickest :) – Prakash Raman Jun 09 '15 at 10:02
5

I'll not choose this solution because I really need sth more stable in my app, but I want to ask all those people saying "It's not clean". Oh, My, God, where is CLEAN solution for this problem? All those hacks with logos, setPadding don't look clean to me either! Just read comments, how many people have problems with those too. Setting android:paddingLeft on title - that what would be CLEAN if it had worked. We are left here in the dark to invent hacks because for some reason it just does not work the way it should have worked. So nothing is "not clean". – Varvara Kalinina Oct 15 '15 at 11:49
This somehow gives different results to different devices. How would I achieve something like `getSupportActionBar().setTitle("Player O: " + " " + "Player X: ");` with both `Player O` and `Player X` align to left and right of the action bar? – DirtyBit Aug 05 '16 at 10:34
its a slang solution – Zaid Mirza Mar 25 '17 at 13:42
1

A cleaner solution would be to use the `app:titleMarginStart` attribute in the layout XML. – LarsH Jul 25 '17 at 02:57

score 40 · Answer 4 · answered Apr 12 '12 at 09:06

40

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

answered Apr 12 '12 at 09:06

Dushyanth

461
5
4

1

@Dushyanth i just tried but says null pointer exception on imageview. i have both homeUpIndicator and home icon in action bar. – Krishna Shrestha Dec 21 '12 at 04:50
1

This is only working for API >= 11 as android.R.id.home was introduced in API 11. I use actionbarcompat to have an actionbar also on pre honeycomp devices. How to handle it there? – tobias Dec 29 '12 at 12:01
A little bit of a hack. See Cliffus's answer below for a cleaner solution. – dhaag23 Mar 20 '13 at 00:38
the home spacing is no longer set using `padding`, it seems to use `marginEnd` since api 17 - which will probably break this solution. See mine below – Dori Oct 11 '13 at 12:41
@tobias R.id.home is allways there, even before level 11.it just not available – oscarthecat Oct 30 '13 at 11:38

score 32 · Answer 5 · answered Nov 12 '15 at 19:49

32

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:

answered Nov 12 '15 at 19:49

themichaelscott

496
4
10

This is not at all working in my case. Please let me know the style set to activity – Nitin Mesta Nov 25 '15 at 11:33
11

This is the right way to do this. There is also `app:titleMarginStart="dimension"` to target the title directly. – Markus Rubey Dec 25 '15 at 13:06
Think for most users this will be the "right" answer. Works as a charm, Thanks! – Taras Sep 13 '16 at 13:40
1

How is this the "right" answer, if the question was about padding between the home icon and the title? The home icon isn't mentioned here (nor the logo or whatever variation). If `contentInsetStart` puts space between the home icon and the title, the answer could at least say so. My test just now with `contentInsetStart` seemed to put the space *before* the logo (which admittedly is not the same as the home icon). – LarsH Jul 25 '17 at 00:24

tryp · Answer 6 · 2017-08-21T07:28:18.063

32

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

edited Aug 21 '17 at 07:28

answered Dec 08 '16 at 09:57

tryp

1,120
20
26

Great. It would be better if you can provide the sample related XML to clarify where to put this. (I do know where to put this line) – John Pang Dec 18 '16 at 16:44
@JohnPang i detailed my answer, hope it will help you to understand how to use this property. – tryp Dec 21 '16 at 07:33
@Bolein95 are you uisng the support library ? to be able to help you please provide more information. – tryp Feb 17 '17 at 10:11
Worth noting that this parameter was introduced in version 24 of the design library. So if you're stuck in eclipse at version 23 (like I used to until yesterday...), you won't have access to it. – FlorianT Aug 20 '17 at 22:35
@FloriantT thank you for the precision, i've updated my answer regarding your comment. – tryp Aug 21 '17 at 07:27

Ajit · Answer 7 · 2016-12-19T05:18:50.983

30

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>

edited Dec 19 '16 at 05:18

answered Sep 27 '16 at 05:19

Ajit

964
10
17

1

Thank you so much. @Ajit – shahid17june Nov 22 '16 at 12:14
1

Great. It would be better if you can provide the sample related XML to clarify where to put this. (I do know where to put this line) – John Pang Dec 18 '16 at 16:44
Hello @JohnPang, you can put this in the Toolbar of your layout as shown above. – Ajit Dec 19 '16 at 05:13

score 6 · Answer 8 · answered Nov 01 '16 at 18:52

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

score 4 · Answer 9 · answered May 16 '17 at 20:09

4

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

answered May 16 '17 at 20:09

Zanini

41
3

score 2 · Answer 10 · answered Oct 11 '13 at 12:33

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!

@Diri can u add more can we make action bar at up ,down,left,right — Amitsharma, Feb 14 '14 at 11:09
@amitsharma - im not sure what you mean exactly - do you mean moving the action bar from the top of the screen? If so I think you would need to create a custom action bar view to do this - it sounds like it may not be good ux though :) — Dori, Feb 14 '14 at 16:07
in that case I dont know what you mean by "can u add more can we make action bar at up ,down,left,right" — Dori, Feb 17 '14 at 09:49

score 2 · Answer 11 · edited Dec 07 '16 at 09:26

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

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

raptors · Answer 12 · 2013-11-05T16:32:32.430

0

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.

edited Nov 05 '13 at 16:32

answered Nov 05 '13 at 16:24

raptors

232
1
5
12

score 0 · Answer 13 · answered Dec 04 '15 at 13:49

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!

Andriy Fediv · Answer 14 · 2016-01-04T16:18:34.250

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);

score 0 · Answer 15 · answered Jun 22 '16 at 03:41

0

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);

answered Jun 22 '16 at 03:41

THANN Phearum

1,969
22
19

Martin Schüller · Answer 16 · 2016-10-20T15:41:47.697

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)

score 0 · Answer 17 · edited Aug 25 '17 at 12:44

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);

E Player Plus · Answer 18 · 2019-03-10T13:56:47.557

0

You can achieve same by method as well:

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

edited Mar 10 '19 at 13:56

answered Mar 10 '19 at 09:01

E Player Plus

1,836
16
21

score 0 · Answer 19 · answered Aug 04 '19 at 14:51

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

score 0 · Answer 20 · answered Jul 01 '21 at 09:07

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

score -2 · Answer 21 · edited Jan 31 '17 at 12:26

-2

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>"));

edited Jan 31 '17 at 12:26

V-rund Puro-hit

5,518
9
31
50

answered Jul 26 '15 at 09:58

Muhammad Dawood

1
1

score -2 · Answer 22 · edited Jan 31 '17 at 13:15

-2

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

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

edited Jan 31 '17 at 13:15

Martijn Pieters

1,048,767
296
4,058
3,343

answered Aug 13 '15 at 10:17

Manohar

19

This is not bad, i dont know why it got so downvoted – Martin De Simone Aug 17 '17 at 15:38
maybe sometimes the simplest of the solution is the best! thanks – Nuhman Aug 07 '18 at 07:08

Padding between ActionBar's home icon and title

22 Answers22

Linked