Toolbar With Horizontal Progressbar Underneath

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 p

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

<RelativeLayoutxmlns: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.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimaryDark"/><fr.castorflex.android.smoothprogressbar.SmoothProgressBarandroid:id="@+id/loadProgressBar"style="@style/LoadProgressBar"android:layout_width="match_parent"android:layout_height="4dp"android:layout_below="@+id/toolbar"android:indeterminate="true"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/toolbar"android:orientation="vertical"><!-- Your Content here --><TextViewandroid: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 ActivitiyonCreate method

@OverrideprotectedvoidonCreate(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

<mergexmlns:android="http://schemas.android.com/apk/res/android"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimaryDark"/><fr.castorflex.android.smoothprogressbar.SmoothProgressBarandroid: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

<RelativeLayoutxmlns: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"><includelayout="@layout/toolbar"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/toolbar"android:orientation="vertical"><!-- Your Content here --><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Content Text"/></LinearLayout></RelativeLayout>

Solution 2:

This will show the horizontal toolbar below the toolbar:

<RelativeLayoutxmlns: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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"><android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="wrap_content"/><me.zhanghai.android.materialprogressbar.MaterialProgressBarandroid: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

Solution 3:

Try this, will show under statusBar

<androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns: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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"app:elevation="0dp"android:elevation="0dp"><ProgressBarandroid: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