Customizing up Button in android

Question

I want to customize the up button, I am using appcompat library for my actionbar. I don't want the default up button which android provides. Because I am using actionbar that has produced by style generator. So that up button looks pale with the color of actionbar that I selected. Can someone please suggest me how to achieve it? I have searched lot but couldn't find.

enter image description here

I have prepared my own image for it. So I want to replace that with my image. I believe it is possible. Because googleplay displays the actionbar with up button in different color in the apps section.

Below is the styles.xml:

     <style name="Theme.Customab" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarItemBackground">@drawable/selectable_background_customab</item>
        <item name="popupMenuStyle">@style/PopupMenu.Customab</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Customab</item>
        <item name="actionBarTabStyle">@style/ActionBarTabStyle.Customab</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Customab</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Customab</item>
        <item name="actionModeBackground">@drawable/cab_background_top_customab</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_customab</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Customab</item>

                <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Customab.Widget</item>

**<item name="android:homeAsUpIndicator">@drawable/customup</item>**


    </style>

    <style name="ActionBar.Solid.Customab" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_customab</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_customab</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_customab</item>
        <item name="progressBarStyle">@style/ProgressBar.Customab</item>
    </style>

    <style name="ActionBar.Transparent.Customab" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_customab</item>
        <item name="progressBarStyle">@style/ProgressBar.Customab</item>
    </style>

    <style name="PopupMenu.Customab" parent="@style/Widget.AppCompat.PopupMenu">    
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_customab</item>  
    </style>

    <style name="DropDownListView.Customab" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_customab</item>
    </style>

    <style name="ActionBarTabStyle.Customab" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_customab</item>
    </style>

    <style name="DropDownNav.Customab" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_customab</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_customab</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_customab</item>
    </style>

    <style name="ProgressBar.Customab" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_customab</item>
    </style>

    <style name="ActionButton.CloseMode.Customab" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_customab</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Customab.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Customab</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Customab</item>
    </style>

Have you tried calling `getActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.drawable_to_use))`? — Vikram, Aug 22 '13 at 08:00

hcelaloner · Answer 1 · 2013-08-22T12:53:16.487

Adding this item to your custom theme that is related with pre-Honeycomb will give an error because that attribute does not exist in the Android framework on older devices.

<item name="android:homeAsUpIndicator">@drawable/action_up_caret</item>

Instead of "android:homeAsUpIndicator" you should override "homeAsUpIndicator" attribute in your custom theme if you are using AppCompat library.

<item name="homeAsUpIndicator">@drawable/action_up_caret</item>

Note: Here's the AppCompat source if you're interested. https://github.com/android/platform_frameworks_support/tree/master/v7/appcompat or https://android.googlesource.com/platform/frameworks/support/+/master/v7/appcompat/

Here is some of the files of the my test project:

values\styles_example.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources>

    <style name="Theme.Example" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarItemBackground">@drawable/selectable_background_example</item>
        <item name="popupMenuStyle">@style/PopupMenu.Example</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Example</item>
        <item name="actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Example</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Example</item>
        <item name="actionModeBackground">@drawable/cab_background_top_example</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>

                <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Example.Widget</item>

        <item name="homeAsUpIndicator">@drawable/ic_launcher</item>
    </style>

    <style name="ActionBar.Solid.Example" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_example</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_example</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_example</item>
        <item name="progressBarStyle">@style/ProgressBar.Example</item>
    </style>

    <style name="ActionBar.Transparent.Example" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_example</item>
        <item name="progressBarStyle">@style/ProgressBar.Example</item>
    </style>

    <style name="PopupMenu.Example" parent="@style/Widget.AppCompat.PopupMenu"> 
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>   
    </style>

    <style name="DropDownListView.Example" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_example</item>
    </style>

    <style name="ActionBarTabStyle.Example" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_example</item>
    </style>

    <style name="DropDownNav.Example" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_example</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_example</item>
    </style>

    <style name="ProgressBar.Example" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_example</item>
    </style>

    <style name="ActionButton.CloseMode.Example" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_example</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Example.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Example</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Example</item>
    </style>

</resources>

values-v14\styles_example.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources>

    <style name="Theme.Example" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarItemBackground">@drawable/selectable_background_example</item>
        <item name="android:popupMenuStyle">@style/PopupMenu.Example</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Example</item>
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
        <item name="android:actionDropDownStyle">@style/DropDownNav.Example</item>
        <item name="android:actionBarStyle">@style/ActionBar.Solid.Example</item>
        <item name="android:actionModeBackground">@drawable/cab_background_top_example</item>
        <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
        <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>

                <!-- Light.DarkActionBar specific -->
        <item name="android:actionBarWidgetTheme">@style/Theme.Example.Widget</item>

        <item name="android:homeAsUpIndicator">@drawable/ic_launcher</item>
    </style>

    <style name="ActionBar.Solid.Example" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/ab_solid_example</item>
        <item name="android:backgroundStacked">@drawable/ab_stacked_solid_example</item>
        <item name="android:backgroundSplit">@drawable/ab_bottom_solid_example</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Example</item>
    </style>

    <style name="ActionBar.Transparent.Example" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@drawable/ab_transparent_example</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Example</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Example.Widget" parent="@style/Theme.AppCompat">
        <item name="android:popupMenuStyle">@style/PopupMenu.Example</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Example</item>
    </style>

</resources>

This way should able to able to get a look like this in your activity.

Added this line in Them.customab style tag, but doesn't show up. Am I missing something or misplacing it? — rick, Aug 22 '13 at 10:08
I made a small test using the emulator(2.1) to check the answer and it worked perfectly. I also added the item same place in styles xml file. If you used style generator probably you have two style.xml: one in values\styles_yourstylename.xml and one in values-v14\styles_yourstylename.xml. Add "@drawable/action_up_caret" to values\styles_yourstylename.xml and add "@drawable/action_up_caret" to values-v14\styles_yourstylename.xml. And test it again, this may be your issue. — hcelaloner, Aug 22 '13 at 10:42
+1 and Please see my edit. I have added the same way in both the styles. But I don't know why it doesn't work. — rick, Aug 22 '13 at 12:04
I don't know where the issue is but I edited my answer to add my sample project files that modify up indicator. You can compare the related parts with your files. — hcelaloner, Aug 22 '13 at 12:54
@hcelaloner how to do this Button for Appcompat lib? android:Widget.Button to @style/Widget.AppCompat.Button be not working!! — LOG_TAG, Nov 12 '13 at 11:37

score 0 · Answer 2 · answered Aug 22 '13 at 06:59

0

Keep your image in drawable folder specify attribute .

android:logo

Because ActionBar will use the android:logo attribute of your manifest, if one is provided. That lets you use separate drawable resources for the icon (Launcher) and the logo (ActionBar, among other things).

answered Aug 22 '13 at 06:59

CodingRat

1,934
3
23
43

Sorry this is wrong answer. My question is about up navigation button and your answer is about the icon next to the up button. – rick Aug 22 '13 at 07:10

score 0 · Answer 3 · answered Aug 22 '13 at 07:00

0

I've not used AppCompat, but it's pretty simple(but hard to find out) on Android 4.0.

You need to add the following item to your Application theme XML.

<item name="android:homeAsUpIndicator">@drawable/action_up_caret</item>

answered Aug 22 '13 at 07:00

Vinay S Shenoy

4,028
3
31
36

I have seen this http://stackoverflow.com/questions/9252354/how-to-customize-the-back-button-on-actionbar but I want to apply it for the app compat styles. whenever I try to add this in styles, it shows as error that no resource is found with this homeAsUpIndicator. – rick Aug 22 '13 at 07:11
Can you update your question with your Application style xml? – Vinay S Shenoy Aug 22 '13 at 07:15
@rick Your Theme.Customab should be able to take this value – Vinay S Shenoy Aug 22 '13 at 11:17
Are the rest of the theme properties being applied? And have you set the theme to the Application? – Vinay S Shenoy Aug 22 '13 at 11:17

Customizing up Button in android

3 Answers3