how to center icons in toolbar in android

Question

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

Answer 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>

Answer 2

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

Answer 3

Perhaps help you :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarPath"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary">

            <ImageView
                android:id="@+id/imgBack"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="left"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="4dp"
                android:src="@drawable/ic_action_back" />

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

                <ImageView
                    android:id="@+id/imgClear"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_discard" />

                <ImageView
                    android:id="@+id/imgStop"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_stop" />

                <ImageView
                    android:id="@+id/imgPath"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_merge" />

                <ImageView
                    android:id="@+id/imgToggle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_action_map" />
            </LinearLayout>

            <ImageView
                android:id="@+id/imgForward"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="right"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="4dp"
                android:src="@drawable/ic_action_forward" />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/mapPath"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBar" />

</RelativeLayout>

In your style.xml write :

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Then in manifest.xml :

<application
    android:name="com.ir.zanis.app.AppController"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme.NoActionBar"> <===See here===
      .......
      .............
       .............

Answer 4

you can do it programmatically as follows:

mToolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            ImageView imageView = (ImageView)mToolbar.findViewById(R.id.logo);
            if( mToolbar == null ){
                return;
            }
            int toolbarWidth = mToolbar.getWidth();
            int imageWidth = imageView.getWidth();
            imageView.setX((toolbarWidth-imageWidth)/2);
        }
    });

customise your layout_toolbar.xml:

    <android.support.v7.widget.Toolbar 
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            style="@style/Toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/toolbar_height"                                                                   
            android:background="@drawable/toolbar_background"
            android:focusable="false"                                
            app:titleTextAppearance="@style/AppTheme.Toolbar.Title">
            <ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/toolbar_logo"/>

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

Answer 5

you can try applying

app:buttonGravity="center"

on Toolbar, that worked perfectly for me.

Answer 6

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>