how to center icons in toolbar in android

partiz picture partiz · Jul 1, 2015 · Viewed 19.8k times · Source

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 ... enter image description here

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.

Answer

asadnwfp picture asadnwfp · Dec 3, 2015

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>