Search code examples
androidandroid-actionbarandroid-actionbar-compat

Customizing Up/Back/Burger background in my ActionBar


I'm trying to customize the background of my action bar items with a selector, to override what is shown when the button is pressed. This was pretty easy with menu buttons (e.g., overflow icon), as you can style them with actionBarItemBackground .

Sadly this does not apply for the up/home/left indicator. I have unsuccessfully tried, in my styles.xml:

  • <item name="actionButtonStyle">;

  • <item name="actionBarStyle">;

  • <item name="toolbarStyle">;

None of the nested attributes seem to act on the home icon background. I also searched over android.R.attr and gave a look at this. Is there any way?

I would like to stay with the "up" indicator, without inflating a custom view. In that case, I would also have to inflate the title as well as custom views naturally appear at the end of the title. AND I would lose the burger-to-arrow animation, AND I would have to take care about margins and design guidelines (now managed by AppCompat), and some other bad thing on the way.

I thought about setting a Logo, but that would have some complications as well and I don't think I could change the background anyway.

I thought about Toolbar being a Layout, so I could put custom views in it from XML. If I'm not wrong they appear after the title, so neither this is a good idea.

What can I do?


Solution

  • please let me know if it works
    add this to your your theme or if it doesn't take both remove the one with android prefix

    <item name="android:selectableItemBackground">@drawable/selector</item>
    <item name="selectableItemBackground">@drawable/selector</item>
    

    Example @drawable/selector:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:state_pressed="true"
            android:drawable="#ddffffff" />
        <item
            android:drawable="@android:color/transparent" />
    </selector>