Bottom toolbar layout

Question

I have created two toolbars one top and one bottom.

And the result is like this:

My question is, how can i make my bottom toolbar's items centered and their widths span vertically to fit the toolbar?

Here is what i've done:

<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"
tools:context="app.shinobi.org.ssmis.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/main_toolbar" />
    </LinearLayout>

    <app.shinobi.org.util.tab.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="2dp"
        android:background="@color/primaryColor"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include
        android:id="@+id/stats_toolbar"
        layout="@layout/stats_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
       />
</LinearLayout>

These are my two menus:

for the top toolbar:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="app.shinobi.org.ssmis.MainActivity">

<item android:id="@+id/search" android:title="@string/search"
    android:icon="@drawable/ic_search"  android:orderInCategory="1" app:showAsAction="always"/>
<item android:id="@+id/refresh" android:title="@string/action_refressh"
    android:icon="@drawable/ic_refresh" android:orderInCategory="2" app:showAsAction="always" />

for the bottom toolbar:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="app.shinobi.org.ssmis.MainActivity">

<item android:id="@+id/monthly" android:title="@string/action_monthly"
    android:icon="@drawable/ic_refresh" android:orderInCategory="3" app:showAsAction="always" />
<item android:id="@+id/yearly" android:title="@string/action_yearly"
    android:icon="@drawable/ic_refresh" android:orderInCategory="4" app:showAsAction="always" />
<item android:id="@+id/drugs" android:title="@string/action_drugs"
    android:icon="@drawable/ic_refresh" android:orderInCategory="5" app:showAsAction="always" />

Thanks!

Answer 1

I can suggest one not very good solution but it works. If i right understand in include layout you have a toolbar view. Its a container so you can use it like relative or linear layout. And put buttons or other views inside it. And write properties like gravity in center. That is all.

Another way - do smth with items in menu layout may be. But i don't know how(

PS: a short example

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="previousActivity"
            android:src="@drawable/ic_navigate_before_white_24dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contact us"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title" />

    </android.support.v7.widget.Toolbar>

Answer 2

Creating a menu will always put your button to the end of the toolbar. If you want to center these buttons, you will have to use toolbar.addView(view) where your view can inflate from a xml file like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="3"
    >

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

</LinearLayout>

Then you just have to:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setContentInsetsRelative(0, 0);
        toolbar.addView(
                LayoutInflater.from(this).inflate(R.layout.toolbar, null, false),
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        );

Answer 3

Actually you can use a ActionMenuView to replace your bottom Toolbar

Or you can try this SplitToolbar implementation

https://gist.github.com/dodgex/7bc81fd2cbb70a8d5117