What is the best way to properly center a logo on an ActionBar?

Question

The purpose of what I want to achieve is to center a custom logo on the ActionBar. I have the following custom layout for my ActionBar:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:contentDescription="@string/app_name"
        android:src="@drawable/logo_header" />
</FrameLayout>

This gives the expected visual result if there aren't any icons/overflow action button on the right. If there are, the logo will be centered relative to the available space on the ActionBar which makes it look like it's not centered because the logo will appear to be aligned to the left.

High level, what I want to try is calculate the difference between the absolute width of the ActionBar on screen and its available width and then apply a layoutMarginLeft on the logo equal to the value of that difference. I am thinking I can achieve this by getting the number of visible menu items and multiply them by their width (I suppose I can find a default dimension for that).

However, before I do that, I was wondering whether there is a simpler solution that I am overlooking? Can this be solved only via the custom layout for example?

Thanks!

Answer 1

Based on @Amokrane Chentir response I was able to create a simple custom layout file res/layout/custom_actionbar_content.xml. It can contain any text/images that we can customize.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_journal_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@android:color/transparent">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="INSIDE ORIGINAL ACTION TOOLBAR"/>

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

and then in the Acivity oncreate():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val abLayoutParams = ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);
    val abCustomView = layoutInflater.inflate(R.layout.custom_actionbar_content, null)
    supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
    supportActionBar?.setCustomView(abCustomView, abLayoutParams)

    title = ""
}

Result:

Answer 2

A day later, I found an answer that was posted on StackOverflow a while back which works very well.

Here is the gist of it:

ActionBar.LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);

View customView = getLayoutInflater().inflate(R.layout.action_bar_custom_view, null);

getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM)
getActionBar().setCustomView(customView, lp);

Answer 3

I had this same issue. I ended up using the theme NoActionabr theme then using the toolbar and placing the view over it making it centered.

Theme

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
    </style>

</resources>

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_journal_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/primary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_marginLeft="72dp"
        android:layout_marginRight="72dp">

        <ImageView
            android:id="@+id/datePrevious"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_centerVertical="true"
            android:background="@drawable/button_flat_selector"
            android:clickable="true"
            android:padding="8dp"
            android:src="@mipmap/ic_chevron_left"/>

        <TextView
            android:id="@+id/tbDate"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Today, April 20"
            android:textColor="@color/white"
            android:textSize="18dp"
            android:textStyle="bold"/>

        <ImageView
            android:id="@+id/dateNext"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/button_flat_selector"
            android:clickable="true"
            android:padding="8dp"
            android:src="@mipmap/ic_chevron_right"/>
    </RelativeLayout>
</RelativeLayout>