CODEWITHSUNDEEP
androidandroid-toolbar
Cheok Yan Cheng
Cheok Yan Cheng

Reputation: 42786

How to let horizontal progress bar stay at the top of toolbar

Action Bar

Previously, when using Action Bar, it is very simple to have horizontal progress bar at the top of action bar. By having code

@Override
public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_PROGRESS);

We can have

enter image description here

Toolbar

Now, I wish to achieve the same look and feel by using AppCompat Toolbar. Without adding horizontal progress bar, my toolbar looks this way

enter image description here

After adding horizontal progress bar via the following layout.

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

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:id="@+id/progress"
        android:layout_gravity="top"
        android:gravity="top"
        android:max="100" android:progress="45"/>

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

However, this is what I get

enter image description here

  1. The horizontal progress bar is not at the top of toolbar, although I do specific top through layout_gravity and gravity.
  2. Toolbar title text is gone.

I was wondering, is there anything I had missed?

Upvotes: 3

Views: 2579

Answers (1)

Simon Marquis
Simon Marquis

Reputation: 7526

Use a vertical LinearLayout as a root instead:

<LinearLayout
    android:orientation="vertical"
    android:background="?attr/colorPrimary">

    <ProgressBar />

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

</LinearLayout>

Or as @CheokYanCheng said in the comment, you may want to use a FrameLayout to avoid the pushing effect.

<FrameLayout
    android:gravity="top"
    android:background="?attr/colorPrimary">

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

    <ProgressBar />

</FrameLayout>

Upvotes: 3

Related Questions