How to center&left&right align the ActionBar icons in Android

Question

hi there I want align a set of icons in toolbar like below picture.

I googled and after some change I have:

mainActivity.xml

...

<include
    android:id="@+id/tool_bar_bottom"
    layout="@layout/tool_bar"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    />
 ....

And in menu_bottom.xml:

<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=".MainActivity">

    <item
        android:id="@+id/action_forward"

        android:title="forward"
        android:orderInCategory="100"
        android:icon="@drawable/ic_action_arrow_forward"
        android:layout_alignParentRight="true"
        app:showAsAction="always"
        ></item>


    <item
        android:id="@+id/action_zoom_in"
        android:orderInCategory="200"
        android:title="zoom in"
        android:icon="@drawable/ic_action_zoom_in"
        app:showAsAction="always"
        ></item>



    <item
        android:id="@+id/action_home"
        android:orderInCategory="300"
        android:title="home"
        android:icon="@drawable/ic_action_home"
        app:showAsAction="always"
        ></item>


    <item
        android:id="@+id/action_refresh"
        android:orderInCategory="400"
        android:title="refresh"
        android:icon="@drawable/ic_action_refresh"
        app:showAsAction="always"
        ></item>

    <item
        android:id="@+id/action_zoom_out"
        android:orderInCategory="500"
        android:title="zoom out"
        android:icon="@drawable/ic_action_zoom_out"
        app:showAsAction="always"
        ></item>

    <item
        android:id="@+id/action_back"
        android:orderInCategory="600"
        android:title="back"
        android:icon="@drawable/ic_action_arrow_back"
        android:layout_alignParentLeft="true"
        app:showAsAction="always"
        ></item>


</menu>

I added android:layout_alignParentLeft/right="true" for left and right also

According the picture,I wand float right icon to left and right icon to right.

Also I want float center all other icon beside each other...

The code do not any change.

Also I add android:layout_centerVertical = "true" to all other icons...

how can correct display view?

Hoicks

See this answer: #26628112 – Malnourished

Also see here: #31154529 – Gambado

Answer 1

This answer might be a bit late. However, using today's current material components library you can use a bottom app bar to achieve your desired result. See pseudo code snippet:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorBottomBar"
        app:fabAlignmentMode="center"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"

            </TextView>
        </LinearLayout>
    </com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

android:drawableTop="@drawable/ic_blur" would be used to represent the icons that you want to have displayed in the bottom app bar.

You would have to import the material components library for you to use the bottom app bar

Flutter