How to shift the close button in the toolbar to the left

Question

I am working on this app. And using a transparent toolbar. I have added menu items on it.

As shown in the image

Now how should I shift the close button in the toolbar to the left side.

Here is the code

MainActivity.java

transparent_toolbar.inflateMenu(R.menu.menu_play_screen);

menu_play_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item

    android:id="@+id/action_back"
    android:orderInCategory="0"
    android:title="@string/action_settings"
    app:showAsAction="always"
    android:icon="@drawable/ic_close_white_24dp"/>

<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="never" />
<item
    android:id="@+id/action_playQueue"
    android:orderInCategory="99"
    android:title="Add to queue"
    app:showAsAction="always"
    android:icon="@drawable/ic_queue_music_white_24dp"
    />

</menu>

Answer 1

I dont't think you'll be able to do it with the help of menu. But you have several options:

1. Use the navigation button. First, set your custom navigation icon, then set the navigation listener to listen for click event.

2. Toolbar is a ViewGroup, so you may add any views to it.

Personally, I think the first option is more logical, because the "close" button has the navigation purpose. Moreover, you may want to set your toolbar as an app bar to integrate it with your fragment/activity.

Answer 2

You can't do it with a menu.xml. If you want the button to be on the left you need a custom layout for your toolbar, something like this:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <Button
            android:id="@+id/close_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|start"
            android:background="?android:selectableItemBackground"
            android:drawableStart="@drawable/close_button"
            android:text="@string/close" />
    </android.support.v7.widget.Toolbar>

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

Then inflate the rest of your menu in the toolbar.