Display ProgressBar in Toolbar

Question

I would like to show a ProgressBar during the update process at the bottom of the activity's toolbar. However, I still haven't found the right solution for it. How should I start?

I've already tried using a FrameLayout or putting the ProgressBar into the toolbar. Unfortunately, it never looked similar to these ones:

How to do something like this? My intention is that the layout doesn't change when the ProgressBar disappears.

Answer 1

Try as follow on your xml layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <!-- Here your ProgressBar -->

        <ProgressBar
            android:id="@+id/progress"
            android:layout_marginTop="-7dp"
            android:layout_marginBottom="-7dp"
            android:indeterminate="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal" />

    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

The result will be like this

Answer 2

The accepted answer should suffice in most cases, but if you'd rather not deal with the padding values, you can wrap ProgressIndicator and Toolbar, so that ProgressIndicator sits on top of Toolbar.

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.MyApp.AppBarOverlay">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/Theme.MyApp.PopupOverlay" />

        <com.google.android.material.progressindicator.LinearProgressIndicator
            android:id="@+id/progress_indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:indeterminate="true"
            app:hideAnimationBehavior="inward"
            app:indicatorColor="@color/colorSecondary"
            app:showAnimationBehavior="outward" />
    </FrameLayout>
</com.google.android.material.appbar.AppBarLayout>

The difference is, if ProgressIndicator is drawn on top of Toolbar, then the height of AppBarLayout stays same.

[With FrameLayout]                   [Without FrameLayout]
+-------------------+   ^            +-------------------+   ^
|                   |   |            |                   |   |
|                   |   |            |                   |   |
|                   | AppBarLayout   |                   |   |
+-------------------+   |            |                   | AppBarLayout
| ProgressIndicator |   |            |                   |   |
+-------------------+   V            +-------------------+   |
|                   |                | ProgressIndicator |   |
|                   |                +-------------------+   v
|                   |                |                   |
.                   .                .                   .
.                   .                .                   .