v7 Toolbar OptionsMenu Item to far right - how to add margin

Question

I am using the android.support.v7.widget.Toolbar in my activity.

I added it into my layout for the activity as following:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/add_contact_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"
        android:elevation="6dp"
        android:title="@string/add_contact_toolbar_title"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


</RelativeLayout>

I inflate the options menu in onCreateOptionsMenu of the activity and I inflate my menu.xml :

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/add_contact_optionmenu_save"
        android:title="@string/add_contact_optionmenu_save"
        app:showAsAction="always"/>
</menu>

But unfortunately, the item appears way too far right and is too small:

How can I make it to appear like in all other apps? Bigger, and with more right margin?

Cheers!

Answer 1

Well to move the MenuItem to a bit left from the right edge, you need to set paddingRight attribute to the android.support.v7.widget.Toolbar.

android:paddingRight="20dp"

To change the size, add the following style <item> to your App Theme.

<item name="actionMenuTextAppearance">@style/ActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextAppearance">@style/ActionBar.MenuTextStyle</item>

<style name="ActionBar.MenuTextStyle"
       parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">48dp</item>
</style>

All this being said, a better design pattern is simply to go ahead and follow the Material Design guidelines. I would suggest you have an icon for save rather than the text.