How can I align Android Toolbar menu/icons to the left like in Google Maps app?

Question

Here is a screenshot of Google Maps Toolbar.

As you can see icons are aligned to the left instead of right (default behavior). I've tried adding android:layout_gravity="left" and android:gravity="left" to the toolbar but it didn't work. I also tried adding an internal LinearLayout (with same gravity values) to the Toolbar but that didn't work either. Any ideas?

I want to be able to use a regular Android menu with the Toolbar widget instead of recreating everything from scratch.

Answer 1

After some struggling and digging in Android Toolbar code I managed to make it work. Basically, the idea is to add a new android.support.v7.widget.ActionMenuView as child of the Toolbar, set its gravity to top|start, and then add the menu to that action menu view in your Activity. Here is the code:

my_toolbar.xml

<android.support.v7.widget.Toolbar     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:id="@+id/tToolbar"     android:layout_height="?attr/actionBarSize"     android:layout_width="match_parent"     android:background="?attr/colorPrimary"     android:gravity="center_vertical|start"     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"     app:popupTheme="@style/ThemeOverlay.AppCompat.Light">      <android.support.v7.widget.ActionMenuView         android:id="@+id/amvMenu"         android:layout_width="match_parent"         android:layout_height="?attr/actionBarSize"/> </android.support.v7.widget.Toolbar> 

my_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent">      <!--Toolbar-->     <include         android:id="@+id/tToolbar"         android:layout_height="wrap_content"         android:layout_width="match_parent"         layout="@layout/my_toolbar" /> </RelativeLayout> 

MyActivity.java

import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.ActionMenuView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem;  public final class MyActivity extends ActionBarActivity {   private ActionMenuView amvMenu;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     // this layout includes the custom toolbar my_toolbar.xml     setContentView(R.layout.my_activity);      Toolbar t = (Toolbar) findViewById(R.id.tToolbar);     amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu);     amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {       @Override       public boolean onMenuItemClick(MenuItem menuItem) {         return onOptionsItemSelected(menuItem);       }     });      setSupportActionBar(t);     getSupportActionBar().setTitle(null);     getSupportActionBar().setDisplayHomeAsUpEnabled(true);   }    @Override   public boolean onCreateOptionsMenu(Menu menu) {     MenuInflater inflater = getMenuInflater();     // use amvMenu here     inflater.inflate(R.menu.my_activity_menu, amvMenu.getMenu());     return true;   }    @Override   public boolean onOptionsItemSelected(MenuItem item) {     // Do your actions here     return true;   } } 

Answer 2

If there is no special reason to add toolbar items as menu actions, UI controls can be directly added to the toolbar, and aligned similar to aligning any other item inside a layout.

For an example, following toolbar has a left aligned Spinner and a right aligned EditText.

<android.support.v7.widget.Toolbar     android:id="@+id/toolbar_actionbar"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="@color/tab_background"     android:gravity="center_vertical">      <Spinner         android:id="@+id/categorySpinner"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginLeft="10dp" />      <EditText         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="right"         android:hint="Name" />  </android.support.v7.widget.Toolbar>