AppCompat Toolbar not showing icon set in menu XML

Question

I am unable to get the icon to show with or without the title text using the AppCompat Toolbar. The title text appears fine, but there is no icon shown at all.

The icon and title text are defined in a menu.xml using the following xml:

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:android="http://schemas.android.com/apk/res/android"
  tools:context="ui.CreateProfileActivity">
  <item
    android:id="@+id/create_profile_submit"
    android:title="@string/create_profile_submit"
    app:icon="@drawable/ic_done_white_24dp"
    app:showAsAction="always"/>
</menu>

In my styles.xml I've set the icon color to be white explicitly (the background of the Toolbar is blue):

<item name="actionBarIconColor">#fff</item>

This is the toolbar_actionbar.xml that is used to display the Toolbar:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"
    android:id="@+id/toolbar_actionbar"
    android:background="?attr/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

When I launch the application in either portrait or landscape, the icon does not appear.

How do I get the Toolbar to either show:

1. The icon and text
2. Only the icon (See Edit Below)

EDIT: 2014.12.14

I was able to get the icon, and only the icon, to show by updating the menu.xml "icon" property to use "android" instead of "app". The new xml is as follows:

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:android="http://schemas.android.com/apk/res/android"
  tools:context="ui.CreateProfileActivity">
  <item
    android:id="@+id/create_profile_submit"
    android:title="@string/create_profile_submit"
    android:icon="@drawable/ic_done_white_24dp"
    app:showAsAction="always"/>
</menu>

I am still unable to get the icon AND text to show at the same time in portrait mode. It does show both in landscape mode.

Answer 1

Get the reference of the toolbar within your activity and set the Icon or most of its parts

ToolBar toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
toolbar.setLogo(R.drawable.yourdrawable);
toolbar.setTitle("Your Title");
toolbar.setSubtitle("list");
toolbar.setNavigationIcon(R.drawable.drawer_icon);

I know this is beyond what is requested of the question, buh i wanted to shed more light on what you can Try out to solve the problem.

I hope this helps somebody.

Answer 2

try this menu: for toolbar

`

<item
    android:id="@+id/menu_overflow"
    android:enabled="true"
    android:icon="@drawable/ic_menu_moreoverflow_mtrl_alpha"
    app:showAsAction="always"
    android:title="">
    <menu>
        <item
            android:id="@+id/action_more"
            android:icon="@drawable/ic_more_apps"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="More apps"/>
        <item
            android:id="@+id/action_rate"
            android:icon="@drawable/ic_rating"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Rate this app"/>
        <item
            android:id="@+id/action_feedback"
            android:icon="@drawable/ic_feedback"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Feedback"/>
        <item
            android:id="@+id/action_share"
            android:icon="@drawable/ic_share"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Share this app"/>
    </menu>
</item>

`

try this menu for actionbar

`

<item
    android:id="@+id/menu_overflow"
    android:enabled="true"
    android:icon="@drawable/ic_menu_moreoverflow_mtrl_alpha"
    android:showAsAction="always"
    android:title="">
    <menu>
        <item
            android:id="@+id/action_more"
            android:icon="@drawable/ic_more_apps"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="More apps"/>
        <item
            android:id="@+id/action_rate"
            android:icon="@drawable/ic_rating"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Rate this app"/>
        <item
            android:id="@+id/action_feedback"
            android:icon="@drawable/ic_feedback"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Feedback"/>
        <item
            android:id="@+id/action_share"
            android:icon="@drawable/ic_share"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Share this app"/>
    </menu>
</item>

`

Answer 3

I think this is so late. But this code works well. You can try this.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (menu instanceof MenuBuilder) {
        ((MenuBuilder) menu).setOptionalIconsVisible(true);
    }
    getMenuInflater().inflate(R.menu.menu_quran, menu);
    return true;
}