How to show the text below the icon in the toolbar menu?

Question

We mainly use the toolbar menu with the icon, sometimes we also use the icon / text together. The icon along with the text is displayed horizontally, as shown in the figure below.

This usually happens, but I want to show the menu icon / text vertically, as shown below.

I made an xml layout with this xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="horizontal"
    android:padding="@dimen/default_margin">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/bg_timeline"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/label_timeline" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/default_margin"
        android:drawableTop="@drawable/ic_about_large"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/label_about" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/ic_achivement_active"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/label_achievements" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/ic_more"
        android:background="?selectableItemBackground"
        android:gravity="center"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_weight="1"
        android:text="@string/label_more" />
</LinearLayout>

My question is how can I implement a toolbar / action bar when a menu item is placed as Text under each icon in general. Is there any way to do this?

Answer 1

inflateMenu, . :

• your_menu :

<?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/your_id"
        android:title="@string/your_string"
        android:icon="@drawable/your_menu_icon"
        app:actionLayout="@layout/your_custom_menu_layout"
        app:showAsAction = "always"
        />
</menu>

2. your_custom_menu_layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingRight="10dp">
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:src="@drawable/your_menu_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingLeft="0dp"
        android:text="your_text"
        android:textColor="@color/white"
        android:textSize="9dp" />
</LinearLayout>

3. -, Java- :

your_toolbar.inflateMenu(R.menu.your_menu);

4. :

= your_toolbar.getMenu();

your_menu_view = menu.findItem(R.id.your_id).getActionView();         your_menu_view.setOnClickListener( View.OnClickListener() {          @Override          public void onClick (View v) {           }});