How to customize the back button on ActionBar

Asked 12/2, 2012 at 20:24 Answered 11/4, 2019 at 8:12

194

I have been able to customize the action bar's background, logo image and text color using suggestions from these:
Android: How to change the ActionBar "Home" Icon to be something other than the app icon?
ActionBar text color
ActionBar background image

The last piece I want to customize is the back button image. It's grey by default and I would like it to be white. Either changing the color, specifying a drawable or simply making it transparent (and adding the chevron to my customized logo image) would work. How do I go about that?

Brufsky answered 12/2, 2012 at 20:24 Comment(7)

There is no BACK button on the action bar. The BACK button is on the system bar, or is not on the screen (for devices with an off-screen BACK button). – Graniah 12/2, 2012 at 20:55

@CommonsWare, I am not sure what the 'left chevron' in the action bar is called - but that's one I am referring to as the back button. I think it is expected to replace the physical back button on android devices going forward. – Brufsky 13/2, 2012 at 1:49

No and no. That is the "up" indicator (despite the arrow orientation). You enable it via setDisplayHomeAsUpEnabled() on ActionBar. It is specifically NOT supposed to simply go "back". It means that tapping the app icon will go "up" a hierarchy rather than back to the previous activity (as does the BACK button on the system bar). – Graniah 13/2, 2012 at 12:16

@CommonsWare, so what about the new devices that do not have a physical back button, do they all display a 'soft' back button. I have seen a couple of tablets do that. In that case, can I customize the up button to be white instead of the default grey? – Brufsky 13/2, 2012 at 18:16

"so what about the new devices that do not have a physical back button, do they all display a 'soft' back button" -- they all should have a BACK button in the system bar. – Graniah 13/2, 2012 at 19:1

just want to add in a lot of cases the UP button WILL simply go back. See "When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back key will have the same result as pressing an Up button -- this is a common occurrence. " from developer.android.com/design/patterns/navigation.html – Bulldoze 28/3, 2012 at 17:1

@Bulldoze this is true only if there is just one activity after the "root" one. when there are more on the stack, it should usually go to the root. same goes to fragments in case you use them instead. – Leader 1/8, 2013 at 7:21

395

The "up" affordance indicator is provided by a drawable specified in the homeAsUpIndicator attribute of the theme. To override it with your own custom version it would be something like this:

<style name="Theme.MyFancyTheme" parent="android:Theme.Holo">
    <item name="android:homeAsUpIndicator">@drawable/my_fancy_up_indicator</item>
</style>

If you are supporting pre-3.0 with your application be sure you put this version of the custom theme in values-v11 or similar.

Nyssa answered 13/2, 2012 at 18:21 Comment(21)

works for me too. I was declaring inside the style set as my ActionBarStyle as in AOSP on github but it was not working - moving out into the main theme did the trick! +1 – Bulldoze 28/3, 2012 at 16:59

<item name="android:homeAsUpIndicator">@drawable/my_fancy_up_indicator</item> didn't work for me, but <item name="homeAsUpIndicator">@drawable/my_fancy_up_indicator</item> did. Guess it's android version thing – Trafalgar 10/6, 2012 at 9:39

Is there any way to set the top and bottom padding for this to 0dp? – Fastness 22/2, 2013 at 15:16

@JamesMcCracken the only way I was able to do this was via a custom layout. – Borak 4/6, 2013 at 22:6

@MichałK actually i think that just like all the other stuff you can customize, if you want to handle both API11 and above and below, you need to have both items used. – Leader 1/8, 2013 at 7:25

use this in main theme， not in actionbarStyle， as https://mcmap.net/q/102680/-actionbarsherlock-changing-homeasupindicator-doesn-39-t-work/13168883#13168883 works for sherlock 4.4.0 – Lepidote 30/10, 2013 at 11:33

Doesn't work for me. Showing error. I tried <item name="homeAsUpIndicator">@drawable/ic_action_arrow_back</item> in the values>styles.xml and values-v11>styles.xml. I am using v7-appcompat library. – Reproof 6/1, 2014 at 22:19

@MSI it seems you're missing something "android:homeAsUpIndicator" not "homeAsUpIndicator" alone – Impletion 19/2, 2014 at 14:42

@Impletion : I applied both. 'android:homeAsUpIndicator' in values-v14, 'homeAsUpIndicator' in default values. It works only for few devices of version sdk 14 and above(works for 4.4 and 4.1 but not for 4.3). For old devices running on 2.3, it doesn't work at all. – Reproof 19/2, 2014 at 15:14

@MSI nope, it says there, v-11 folder – Impletion 20/2, 2014 at 1:36

@Impletion yeah did that too. Anyways, I was actually trying to change the color of up icon. don't work for all devices. Nevermind. – Reproof 20/2, 2014 at 15:13

Is there a possibility to provide padding for the "up" indicator and the logo that I would be using beside it? – Wincer 10/3, 2014 at 15:31

Might be worth noting that if you want the already available holo icons, use @drawable/abc_ic_ab_back_holo_light or @drawable/abc_ic_ab_back_holo_dark – Belden 4/7, 2014 at 6:17

you are genius @jake and helped me a lot in android learning. – Silicosis 28/8, 2014 at 14:25

I had to add it to both the main theme and actionbar theme. Otherwise it did't appear in all activities. – Baloney 11/11, 2014 at 11:16

Anyone made this work with Navigation Drawer? I guess ActionBarDrawerToggle replaces the up indicator with one of its own, therefore setting it on style has no effect... – Deangelis 4/3, 2015 at 13:32

kindly update according to new appcompat support library – Inaugurate 25/8, 2015 at 11:36

This gave me both the default back arrow and the selected icon instead of replacing the back arrow. – Hyperkinesia 3/2, 2016 at 19:27

This is the best way to do it. Because using R.drawable.abc_ic_ab_back_mtrl_am_alpha to change color has risks, as support version changes the drawable resource frequently. – Cum 13/3, 2016 at 6:13

Note that if your activity doesn't have a parent declared on the manifest, it won't show the icon. – Leeannaleeanne 16/12, 2016 at 15:30

@JakeWharton This solution seems to not work with Jetpack navigation architecture component. See this question #54234981 and this issuetracker.google.com/u/1/issues/121078028. Despite navigation component reaching version 2.2.1 customizing nav icon is still not supported. – Postulant 23/3, 2020 at 16:57

So you can change it programmatically easily by using homeAsUpIndicator() function that added in android API level 18 and upper.

ActionBar().setHomeAsUpIndicator(R.drawable.ic_yourindicator);

If you use support library

getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_yourindicator);

Eccrinology answered 14/2, 2015 at 15:29 Comment(3)

If you are using a drawer, you must call drawerToggle.setDrawerIndicatorEnabled(false); before changing the indicator – Maurilia 28/4, 2015 at 16:13

@Maurilia Thank you, setDrawerIndicatorEnabled(false / true); solved my problem to set home button as consistent 'Back' and (Open Drawer / Close Drawer) based on my requirements. – Teddman 22/5, 2015 at 5:2

@Maurilia drawerToggle.setDrawerIndicatorEnabled(false); it works for me :) – Rafaelita 3/12, 2015 at 15:29

I have checked the question. Here is the steps that I follow. The source code is hosted on GitHub: https://github.com/jiahaoliuliu/sherlockActionBarLab

Override the actual style for the pre-v11 devices.

Copy and paste the follow code in the file styles.xml of the default values folder.

<resources>
    <style name="MyCustomTheme" parent="Theme.Sherlock.Light">
    <item name="homeAsUpIndicator">@drawable/ic_home_up</item>
    </style>
</resources>

Note that the parent could be changed to any Sherlock theme.

Override the actual style for the v11+ devices.

On the same folder where the folder values is, create a new folder called values-v11. Android will automatically look for the content of this folder for devices with API or above.

Create a new file called styles.xml and paste the follow code into the file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyCustomTheme" parent="Theme.Sherlock.Light">
    <item name="android:homeAsUpIndicator">@drawable/ic_home_up</item>
    </style>
</resources>

Note tha the name of the style must be the same as the file in the default values folder and instead of the item homeAsUpIndicator, it is called android:homeAsUpIndicator.

The item issue is because for devices with API 11 or above, Sherlock Action Bar use the default Action Bar which comes with Android, which the key name is android:homeAsUpIndicator. But for the devices with API 10 or lower, Sherlock Action Bar uses its own ActionBar, which the home as up indicator is called simple "homeAsUpIndicator".

Use the new theme in the manifest

Replace the theme for the application/activity in the AndroidManifest file:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/MyCustomTheme" >

Athalla answered 30/12, 2013 at 14:55 Comment(1)

And you can try @drawable/abc_ic_ab_back_holo_light or @drawable/abc_ic_ab_back_holo_dark if you're looking for already available holo icons. – Belden 4/7, 2014 at 6:15

Changing back navigation icon differs for ActionBar and Toolbar.

For ActionBar override homeAsUpIndicator attribute:

<style name="CustomThemeActionBar" parent="android:Theme.Holo">
    <item name="homeAsUpIndicator">@drawable/ic_nav_back</item>
</style>

For Toolbar override navigationIcon attribute:

<style name="CustomThemeToolbar" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="navigationIcon">@drawable/ic_nav_back</item>
</style>

Natant answered 18/11, 2015 at 13:48 Comment(0)

I did the below code onCreate() and worked with me

getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_yourindicator);

Tonus answered 19/10, 2015 at 20:33 Comment(0)

If you are using Toolbar, you don't need those solutions. You only have to change the theme of the toolbar

app:theme="@style/ThemeOverlay.AppCompat.Light"

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

If you are using a dark.actionBar your back button is going to be white else if you are using light actionbar theme it is going to be black.

Mozambique answered 31/3, 2015 at 22:57 Comment(6)

Your code works for me, but can we change the color of that indicator? – Stump 24/11, 2015 at 8:54

colorControlNormal and android:textColorSecondary values are responsible for that but i'm not very sure what else these values also changes. You can try yourself by defining these values on your toolbars theme. – Mozambique 24/11, 2015 at 9:28

I'm using "app:theme="@style/ThemeOverlay.AppCompat.Light"" to display navigationIcon in background white, but it's displaying the default gray icon, i need to change it to blue. "colorControlNormal and android:textColorSecondary" doesn't work. – Stump 24/11, 2015 at 9:50

Use a custom theme which has "ThemeOverlay.AppCompat.Light" as a parent. This might work. – Mozambique 24/11, 2015 at 9:55

Yeah, but what attributes should i use for <item> in custom style? – Stump 24/11, 2015 at 10:4

I found the solution to change the nav icon, using name="colorControlNormal" not name="android:colorControlNormal". But i want to change to the other drawable, maybe? – Stump 25/11, 2015 at 9:10

tray this:

getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close);

inside onCreate();

Rumery answered 11/4, 2019 at 8:12 Comment(1)

It's working but how to get back earlier back button – Innutrition 18/5, 2019 at 7:13

I used back.png image in the project menifest.xml file. it is fine working in project.

<activity
        android:name=".YourActivity"
         android:icon="@drawable/back"
        android:label="@string/app_name" >
    </activity>

Crybaby answered 27/11, 2015 at 11:43 Comment(0)

I had the same issue of Action-bar Home button icon direction,because of miss managing of Icon in Gradle Resource directory icon

like in Arabic Gradle resource directory you put icon in x-hdpi and in English Gradle resource same icon name you put in different density folder like xx-hdpi ,so that in APK there will be two same icon names in different directories,so your device will pick density dependent icon may be RTL or LTR

Jokjakarta answered 23/8, 2017 at 10:50 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags