How to inflate an optionsMenu vertically on a button click

Question

I'm trying to inflate an options menu on a button click. I managed to inflate it using openOptionsMenu(); in button's onClick event(as we are using a layout with custom fields like ImageView, Textbox on the action bar). But the menu is inflated on the bottom. Right now my menu is inflated like below image:

I want it to be opened vertically(some thing like below).

How can I do it?

Below are my code samples:

Main Activity:

private Button optionsMenu;
optionsMenu = (Button)findViewById(R.id.optionsMenu);

In onCreate:

super.onCreate(savedInstanceState);
setContentView(R.layout.menu_layout);
optionsMenu.setOnClickListener(menuInflate);

 private OnClickListener menuInflate = new OnClickListener() {
        @Override
        public void onClick(View v) {
            openOptionsMenu();
        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.options_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        Uri uri;
        Intent i;
        switch (item.getItemId()) {
            case R.id.option1:
                uri = Uri.parse("http://www.yahoo.com");
                i = new Intent(Intent.ACTION_VIEW, uri);
                startActivity(i);
                return true;
            case R.id.option2:
                uri = Uri.parse("tel:92345678");
                i = new Intent(Intent.ACTION_CALL, uri);
                startActivity(i);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

options_menu.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/option1" android:title="About"
        android:orderInCategory="101" android:showAsAction="withText" />
    <item android:id="@+id/option2" android:title="Help"
        android:orderInCategory="102" android:showAsAction="withText" />
</menu>

menu_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/content_bg_color">
    <RelativeLayout
        android:id="@+id/menu_sub_header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header_bg"
        android:paddingTop="5dip"
        android:paddingBottom="5dip">
        <com.abc.ThirdParty.SmartImageView
            android:id="@+id/user_profile_image"
            android:layout_width="54dip"
            android:layout_height="54dip"
            android:scaleType="fitXY"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/portrait"/>
        <TextView
            android:id="@+id/username_text_show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/user_profile_image"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:textSize="22sp"
            android:fontFamily="sans-serif-light"
            android:textStyle="bold"
            android:textColor="@android:color/white"/>

        <Button
           android:id="@+id/optionsmenu_btn"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentRight="true"
           android:layout_marginRight="5dp"
           android:layout_centerVertical="true"
           android:gravity="center"
           android:background="@drawable/ic_options_menu"/>
    </RelativeLayout>
</RelativeLayout>

Answer 1

To show the menu items on click, set their showAsAction attribute to never as described in the docs :

never : Never place this item in the app bar. Instead, list the item in the app bar's overflow menu.

So set this for the items that you want in the overflow menu :

android:showAsAction="never"

UPDATE

Also, remove the optionsMenu image (the one with three dots) that you've put on the Toolbar manually. Android will put that icon itself if there are menu items with showAsAction attribute set to never or there isn't enough space in the Toolbar to show the items.

and remove these methods from the onClickListener of your image and put them inside your Activity class :

@Override
public boolean onCreateOptionsMenu(Menu menu)

@Override
public boolean onOptionsItemSelected(MenuItem item)

UPDATE #2

If you want a custom Toolbar with overflow menu button, there's no need to put a Button(with 3 dots icon) for that. If you want to customize the Toolbar put your whole layout code inside Toolbar in the xml and set that as the Activity's Toolbar inside onCreate 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" >
        <RelativeLayout 
            xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/content_bg_color">
        <RelativeLayout
            android:id="@+id/menu_sub_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/header_bg"
            android:paddingTop="5dip"
            android:paddingBottom="5dip">
            <com.abc.ThirdParty.SmartImageView
                android:id="@+id/user_profile_image"
                android:layout_width="54dip"
                android:layout_height="54dip"
                android:scaleType="fitXY"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/portrait"/>
            <TextView
                android:id="@+id/username_text_show"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/user_profile_image"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:gravity="center"
                android:textSize="22sp"
                android:fontFamily="sans-serif-light"
                android:textStyle="bold"
                android:textColor="@android:color/white"/>
        </RelativeLayout>
    </RelativeLayout>
    </android.support.v7.widget.Toolbar>

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

Then set the toolbar in the onCreate like this :

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

and don't worry about the overflow menu button, it'll be added automatically in the cases discussed above.

Here's the output of this code :

Answer 2

Change your options_menu.xml like this

    <item
        android:id="@+id/option1"
        android:orderInCategory="100"
        android:title="About"
        app:showAsAction="never" />
    <item
        android:id="@+id/option2"
        android:orderInCategory="100"
        android:title="Help"
        app:showAsAction="never" />

And in your Activity..

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.options_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.option1) {

                //perform with Option1 here

        } else if (item.getItemId() == R.id.option2) {

                //perform with Option2 here
        } 

        return super.onOptionsItemSelected(item);
    }

it will automatically put the button that you want no need to put manually!