Search code examples
androidmenuandroid-actionbarappbar

how to align action items & title in action bar/ app bar?


I'm a new android developer and I made lots of documentation till I got my own action bar with actions icon/items. but I want to know two things:

  1. How to align the title at the center of action bar (lots of documentation showed it by using gravity attribute with new textView)?
  2. How to align action items to the left of the action bar (as it is auto-positioned at the right side)? TIP: prefered to code in XML.

Here's my action bar

action bar

menu.XML

<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:title="@string/action_search"
        android:id="@+id/action_search"
        android:icon="@drawable/outline_search_white_24dp"
        android:orderInCategory="1"
        app:showAsAction="always"
        />
    <item android:title="@string/action_bookmark"
        android:id="@+id/action_bookmark"
        android:icon="@drawable/outline_bookmark_border_white_24dp"
        android:orderInCategory="2"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/action_help"
        android:title="@string/action_help"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="never" />


    <item
        android:id="@+id/action_update"
        android:title="@string/action_update"
        app:showAsAction="never" />


</menu>

Solution

  • You can use Relative layout inside your Toolbar like this

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentTop="true"
            android:background="#000000">
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerVertical="true"
                    android:padding="8dp"
                    android:src="@android:drawable/ic_dialog_dialer" />
    
                <TextView
                    style="@style/Base.TextAppearance.AppCompat.Medium"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="Your Title"
                    android:textColor="#ffffff"
                    android:textStyle="bold" />
    
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="8dp"
                    android:padding="8dp"
                    android:src="@android:drawable/ic_dialog_map" />
    
            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    
    </RelativeLayout>