Toolbar With Horizontal ProgressBar underneath

Question

With the new Toolbar API in Android Lollipop and AppCompat-v7, they are removing a lot of the automatic features to make Toolbar/ActionBar more robust. One of those things is the progress bar. Since Toolbar is simply a ViewGroup, I assumed adding a ProgressBar would be simple. However, I cannot seem to get it to work properly.

I have done the following (using the SmoothProgressBar library):

    // I instantiate the toolbar and set it as the actionbar
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

    // I create a ProgressBar and set the drawable to the SmoothProgressBar drawable
    ProgressBar progressBar = new ProgressBar(this);
    progressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(this).color(Color.BLUE).interpolator
            (new DecelerateInterpolator()).sectionsCount(4).separatorLength(8).speed(2f).mirrorMode(true).build());
    // I add the progressbar to the view with what I thought were the proper LayoutParams.
    Toolbar.LayoutParams params = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 20);
    params.gravity = Gravity.BOTTOM;
    mToolbar.addView(progressBar, params);
    progressBar.setIndeterminate(true);

I had figured this would work as I'm simply adding a ProgressBar to the bottom of the ViewGroup. However, it is not showing at all and is removing the Title. Below you can see a before and after. Does anyone know how to go about fixing this? My goal is to have a ProgressBar underneath the actionbar.

Before

After

Doroteya

Answer 1

The easiest way is to the to add the ProgressBar directly in the XML-Layout files.

1. One time Solution

Using a RelativeLayout as root and use android:layout_below to keep the ProgressBar and the main content below the toolbar.

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"/>

    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        android:id="@+id/loadProgressBar"
        style="@style/LoadProgressBar"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_below="@+id/toolbar"
        android:indeterminate="true"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:orientation="vertical">
        <!-- Your Content here -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content Text"/>

    </LinearLayout>

</RelativeLayout>

Now you can access the Toolbar and the ProgressBar in the Activitiy onCreate method

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    progressBar = (SmoothProgressBar) findViewById(R.id.loadProgressBar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
    }
}

2. General solution using include

A more general approach is to put the Toolbar and the ProgressBar in a separate XML-Layout file and include this in the activity layout.

toolbar.xml

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"/>

    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        android:id="@+id/loadProgressBar"
        style="@style/LoadProgressBar"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_below="@+id/toolbar"
        android:indeterminate="true"/>

</merge>

activity_main.xml

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

    <include
        layout="@layout/toolbar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:orientation="vertical">
        <!-- Your Content here -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content Text"/>

    </LinearLayout>

</RelativeLayout>

Miasma

This is what I was doing in my app. I just thought there may be a way to add it directly to the Toolbar. – Doroteya

I don´t think there is any way to do this by adding an View to the Toolbar. The 'Toolbar' is a 'ViewGroup' but before the childs of the 'ViewGroup` gets layouted the NavigationIcon, the Title and the Subtitle gets layout at the left of this ViewGroup and on the right the Menu gets his space. Here is my result by setting params.gravity = Gravity.FILL_HORIZONTAL : !Toolbar Image – Miasma

@DavidWiesner: In the newer versions of android, when used in Android Studio, the merge tag alone having the xml schema doesnot help. The android.support.v7.widget.Toolbar also needs to have the xml schemas as well – Sphygmograph

Answer 2

This will show the horizontal toolbar below the toolbar:

<RelativeLayout 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">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <me.zhanghai.android.materialprogressbar.MaterialProgressBar
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:indeterminate="true"
            app:mpb_progressStyle="horizontal"
            app:mpb_useIntrinsicPadding="false"
            android:layout_alignParentBottom="true"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

    </RelativeLayout>

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

You can visit my github for more information Horizontal Progressbar below toolbar or watch this youtube tutorial Toolbar with Horizontal Progressbar

Larcher

Answer 3

Try this, will show under statusBar

<androidx.coordinatorlayout.widget.CoordinatorLayout
  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">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp"
    android:elevation="0dp">
    <ProgressBar
        android:id="@+id/progressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:max="100"
        android:layout_marginTop="-7dp"
        android:layout_marginBottom="-7dp"
        android:visibility="visible" />
    <androidx.appcompat.widget.Toolbar

Rufena

Why set the top and bottom margin to -7dp? – Terris