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 center all icons in toolbar

I test all availabe ways ...but always icons are floating in left.

I want centering icons (I prefer left icon floats left and right icon floats right and other icons floats center)

Activity.Main.xml

<LinearLayout 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"
    android:orientation="vertical"   // I add vertical
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"  // I add match_parent
        android:layout_gravity="center" />   // I add center
</LinearLayout>.

Also in tool_bar.xml

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

in main_menu.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:icon="@drawable/ic_action_arrow_forward"
    app:showAsAction="always"
    ></item>


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

and for above code (main_menu.xml) in <item> I tried all these codes:

android:layout_width="match_parent"
android:layout_weight=".2" // 20%
android:gravity="center"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

I realy I do not know whats can I do to align icons. I googled hours and I tried all senario

what is my wrong? for all tests I can not see any change ...

before I wanted pic2 (in above picture) But now I just want center it!

For my all test I only get pic 1. without any change.

Bossism

Actually you are not aligning all items in centre. one is left and one is right align and 4 are centre align. So My suggestion is instead of using menu inside of Toolbar use RelativeLayout. – Guarino

why not using custom layout instead toolbar? – Negate

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>

Teleran

I got a better result by (a) taking out all the margins (b) having a fixed icon height and width and (c) adding android:layout_weight="1" to the LinearLayout for the middle buttons so it fills the remaining middle space and centres better. – Aminoplast

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

Etan

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

Bidarka

Answer 4

you can try applying

app:buttonGravity="center"

on Toolbar, that worked perfectly for me.

Violet

Answer 5

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>

Lukasz

I did it for all parents...no change...All icons float left yet. – Bossism

May be it conflict another child or parent alignment. Give us your layout xml – Lukasz

Answer 6

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

Hartnett

Answer 7

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>

Joost