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.

Baten

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

Tamarah

I had to change android:layout_marginTop and android:layout_marginBottom to "-9dp", so that the layout isn't changed when the progress bar disappears. But now it works as expected. – Baten

Excellent solution, also marginTop and marginBottom might need some adjustments depending on your setup to avoid cropping. Mine were -7dp for top and -6dp for bottom. – Hetrick

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
|                   |                |                   |
.                   .                .                   .
.                   .                .                   .

Mukerji

What a lovely drawing! – Keen