CODEWITHSUNDEEP
android
Cheok Yan Cheng
Cheok Yan Cheng

Reputation: 42786

Horizontal progress bar is not visible if placed above toolbar (For Android 5)

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+

Upvotes: 3

Views: 1210

Answers (2)

ianhanniballake
ianhanniballake

Reputation: 200080

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.

Upvotes: 7

Mariano Zorrilla
Mariano Zorrilla

Reputation: 7686

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>

Upvotes: 1

Related Questions