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.Toolbarandroid: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 --><ImageViewandroid: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 --><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal"android:layout_gravity="center"android:gravity="center"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button1"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button2"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button3"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button4" /></LinearLayout><!-- Code for your Right Button --><ImageViewandroid: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.Toolbarxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button1"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button2"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_launcher"android:id="@+id/button3"/><Buttonandroid: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.

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

    Buttonbutton1= (Button) mToolbar.findViewById(R.id.button1);
    Buttonbutton2= (Button) mToolbar.findViewById(R.id.button2);
    Buttonbutton3= (Button) mToolbar.findViewById(R.id.button3);
    Buttonbutton4= (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.

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><Button...anyattributes.../>
...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:

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><android.support.v7.widget.Toolbarandroid: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.Toolbarandroid: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.Toolbarandroid: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