Toolbar with horizontal progress bar under

Question

With the new toolbar APIs in Android Lollipop and AppCompat-v7, they remove a lot of automatic features to make the toolbar / ActionBar more robust. One of these things is an indicator of progress. Since the toolbar is just a ViewGroup, I assumed that adding a ProgressBar would be simple. However, I cannot get it to work correctly.

I did 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 realized this would work as I just add a ProgressBar to the end of the ViewGroup. However, it does not appear at all and deletes the name. Below you can see before and after. Does anyone know how to fix this? My goal is to have a ProgressBar under the action bar.

Before

After

Answer 1

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

1. One-time solution

Using RelativeLayout as root and use android:layout_below to save the ProgressBar and main content under 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> 

You can now access the Toolbar and 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 ProgressBar in a separate XML-Layout file and include it in the action 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>