3

I tried to place horizontal progress bar on the top of toolbar by having the following XML.

my_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <!-- Toolbar -->
        <include layout="@layout/toolbar"/>

        <!-- http://stackoverflow.com/questions/14171471/remove-vertical-padding-from-horizontal-progressbar -->
        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:id="@+id/progress_bar"
            android:layout_gravity="top"

            android:layout_marginBottom="0dp"
            android:layout_marginTop="-3dp"

            android:progress="2000"
            android:max="10000" />

    </FrameLayout>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:id="@+id/progress_bar2"
            android:layout_gravity="top"

            android:layout_marginBottom="0dp"
            android:layout_marginTop="-3dp"

            android:progress="2000"
            android:max="10000" />

    </FrameLayout>
</LinearLayout>

toolbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

    <!-- android:elevation="4dp" is used due to http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android- -->

</android.support.v7.widget.Toolbar>

This works absolutely fine under Android 4+. Here's the screenshot for Android 4+

enter image description here

However, when it comes to Android 5+, the horizontal progress bar is not visible on the top of toolbar.

enter image description here

If I remove line

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

I will get the following screenshot in Android 5+

enter image description here

It seems that the top progress bar is blocked by toolbar? But, I thought within FrameLayout, the progress bar is having higher z-order than toolbar?

May I know, how I can make horizontal progress bar visible if placed above toolbar, in Android 5+

Cheok Yan Cheng
  • 47,586
  • 132
  • 466
  • 875

2 Answers2

7

On Android 5.0+ devices, elevation is taken into account when determining the z-order of components - those with a higher elevation are visibly above those with a lower elevation, even if the higher elevation item is declared earlier in the XML file (normally causing it to be behind).

You can add an elevation to your ProgressBar, matching the elevation of the Toolbar - that will ensure that the same z-ordering works as in previous versions of Android.

ianhanniballake
  • 191,609
  • 30
  • 470
  • 443
  • That's a great tip! I had been spending quite some time to experiment various technique like `bringToFront` in order to raise the z-order of progress bar. They fail. Your suggestion works just fine. Thank you! – Cheok Yan Cheng Sep 09 '15 at 15:51
1

Try to use this:

<RelativeLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />

       // try to set your progress bar here
       // on top of the toolbar

    </RelativeLayout>
Mariano Zorrilla
  • 7,165
  • 2
  • 34
  • 52
  • But, I don't want progress bar to consume toolbar's space. i.e., top progress bar shouldn't "push down" toolbar. – Cheok Yan Cheng Sep 08 '15 at 18:32
  • But, LinearLayout will push the toolbar down. I don't want to push the toolbar down. I want progress bar to overlap with toolbar, with progress bar having higher z-order. – Cheok Yan Cheng Sep 08 '15 at 18:35
  • That's why I've post with a RelativeLayout. If your place your progressbar on top of the toolbar you will only need Visibility.GONE and Visibility.VISIBLE to be on top of the toolbar. RelativeLayout will not push down the toolbar – Mariano Zorrilla Sep 08 '15 at 18:37
  • What is the `RelativeLayout.LayoutParams` should be used? As I never came across RelativeLayout which allows stack overlapping. – Cheok Yan Cheng Sep 08 '15 at 18:41
  • You'll not need LayoutParams to this task. Place the progress bar right on the comment section of my code example. It'll work as you want. For a better look, put the progress bar with match width and a defined height (to make sure it doesn't mess with the toolbar in any way) – Mariano Zorrilla Sep 08 '15 at 18:49
  • I tested in Android 5. It won't work. Toolbar is still blocking the visibility of progress bar. – Cheok Yan Cheng Sep 08 '15 at 18:52
  • Are you using an ActionbarActivity? What theme are you using? Lollipop gives a huge importance to the toolbar. – Mariano Zorrilla Sep 08 '15 at 18:55
  • `AppCompatActivity` is being used. Theme `Theme.AppCompat.Light.NoActionBar` is being used. – Cheok Yan Cheng Sep 08 '15 at 18:57
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89097/discussion-between-mariano-zorrilla-and-cheok-yan-cheng). – Mariano Zorrilla Sep 08 '15 at 19:08