How To Center Icons In Toolbar In Android

I asked a similar question here... I got some tutorials in the answers. But this question is diffrenet. because none of that method do not works in my project. I want center all

Solution 1:

Fix to the issue, enjoy :)

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    android:background="?attr/colorPrimary">
    <!-- Code for your Left Button -->
    <ImageView
        android:id="@+id/yourId"
        android:src="@mipmap/yourLeftIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_gravity="left" />
        <!-- Here is the main code for your Middle Buttons -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:gravity="center">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button2"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button3"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button4" />
        </LinearLayout>
    <!-- Code for your Right Button -->
    <ImageView
        android:id="@+id/yourId"
        android:src="@mipmap/yourRightIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>

Solution 2:

The toolbar is like any other view. You can add children to it directly and access then like you would for a normal view.

This is not the exact the answer to your question, but it will tell you the way to go.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/holo_red_light"
    android:elevation="2dp"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button4" />

    </LinearLayout>

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

Then in your main fragment or where ever else you can access something like this.

    Toolbar mToolbar = (Toolbar) root.findViewById(R.id.tool_bar);

    Button button1 = (Button) mToolbar.findViewById(R.id.button1);
    Button button2 = (Button) mToolbar.findViewById(R.id.button2);
    Button button3 = (Button) mToolbar.findViewById(R.id.button3);
    Button button4 = (Button) mToolbar.findViewById(R.id.button4);

You can use this method to make a custom toolbar any way you like. You will probably want to use a relative layout.

Solution 3:

you can try applying

app:buttonGravity="center"

on Toolbar, that worked perfectly for me.

Solution 4:

You should try to apply any alignment for parents layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<Button ...any attributes.../>
...any items...
</LinerLayout>

Solution 5:

I know, that this solution is terrible, but for me it works.

Firstly, in LinearLayout you could place 3 Toolbars instead of 1:

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

    <android.support.v7.widget.Toolbar android:id="@+id/bottomToolbarLeft"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1.0"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <android.support.v7.widget.Toolbar android:id="@+id/bottomToolbarCenter"
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <android.support.v7.widget.Toolbar android:id="@+id/bottomToolbarRight"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1.0"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

</LinearLayout>

Each toolbar should have it`s own menu resource.

Then, you will get something like that: Icons are centered, but left icon is not aligned to left border

Finally, to align left icon you can simply set this parameter for left toolbar:

android:layoutDirection="rtl"

The result is: The desired order