How can I place a ProgressBar at the right of the Toolbar?

Question

With the new Lollipop API, we have to use a Toolbar if we want to personalize the action bar aspect.

Adding a ProgressBar to the Toolbar is as simple as adding it to

Answer 1

A workaround to create the layout completely in xml would be replacing the toolbar content with your own relative layout. To do that, you need to fake the activity title (and also the navigation icon if you are using one), which is literally nesting the following in your Toolbar block.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height"
        android:paddingRight="2dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:fontFamily="sans-serif-medium" />

        <ProgressBar
            android:id="@+id/toolbar_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminateTint="#795548"
            android:indeterminateTintMode="src_in" />

</RelativeLayout>

Note that 20sp sans-serif-medium is the font used in lollipop toolbar, you might need to adjust the text view parameters to make it look natural in earlier versions.

Answer 2

You can try this. It worked for me. Key here is to define layout_gravity in the xml: android:layout_gravity="right"

<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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<!-- Color is Brown 500 -->
<ProgressBar
    android:id="@+id/toolbar_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateTint="#795548"
    android:indeterminateTintMode="src_in"
    android:layout_gravity="right"
/>

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

Answer 3

I also hit the same wall, but programmatically it works:

    Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT,
            Gravity.TOP | Gravity.RIGHT);

In my snippet, I align it to the top, to match the alignment of the menu.