How can I align Android Toolbar menu/icons to the left like in Google Maps app?
AndroidAndroid LayoutAndroid 5.0-LollipopToolbarAndroid ToolbarAndroid Problem Overview
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.
Android Solutions
Solution 1 - Android
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;
}
}
Solution 2 - Android
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>