Change custom Up/Back Button Icon on Android ActionBar

David picture David · Nov 10, 2017 · Viewed 10.6k times · Source

I'm trying to use a custom up/back button icon with a different color since I haven't been able to figure out a straight forward way of changing the color of the default android up/back button.

I downloaded a 128x128 back button icon (PNG) and changed it to the color I want, also placed it in my drawable folder. But i have not been able to get it to display, still.

Here's what I tried so far,

In my Styles.xml, I included this:

<style name="customStyle" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarStyle">@style/customActionBarStyle</item>
        <item name="android:textColorPrimary">@color/titletextcolor</item>
    </style>

    <style name="customActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/custom</item>
        <item name="android:homeAsUpIndicator">@drawable/upbutton</item>
    </style>

In my Activity's onCreate, I included this:

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

And in the onOptionsItemSelected, I did this:

@Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        switch (item.getItemId())
        {
            case android.R.id.home:
                finish();
        }
        return true;
    }

Please can anyone help figure out what i'm doing wrong, or what I'm missing? Thanks in advance.

Answer

Sileria picture Sileria · Jan 17, 2019

Here is my toolbar.xml

<android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <TextView
                    android:id="@+id/activity_title"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_gravity="center"
                    android:gravity="center"
                    tools:text="[ACTIVITY TITLE]"/>

        </LinearLayout>

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

and the entry in the styles.xml

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">@color/colorDarkBlue</item>
    <item name="android:homeAsUpIndicator">@drawable/upbutton</item>
</style>

You still have to do:

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