Align ProgressBar horizontal to top (remove gap)

Question

I'm trying to put a horizontal progress bar at the top of my frame. But there seems to be padding that I simply have been unable to remove. Any help?

enter image description here

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
<ProgressBar android:id="@+id/flv_progress_bar"
             android:layout_width="fill_parent"
             style="@android:style/Widget.Holo.ProgressBar.Horizontal"
             android:indeterminateOnly="true"
             android:layout_height="wrap_content"
             android:layout_gravity="top"/>
</FrameLayout>

score 31 · Accepted Answer · answered Oct 24 '13 at 05:37

31

Pork'n'Bunny's answer worked API level 16 and up devices. This solution worked in all devices. Just push it by 6dp up in XML.

 <ProgressBar
        android:id="@+id/progressbar_Horizontal"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:layout_alignParentTop="true"
        android:layout_marginTop="-6dp" />

answered Oct 24 '13 at 05:37

bCliks

3,000
5
24
50

18

How robust would this be against changes in the default styles? Are they guaranteed to look and work the same for all eternity or could they theoretically replace them at any time with something where pushing it up 6 pixels would create problems (e.g. an invisible progress bar)? – Joey Nov 06 '13 at 14:46
7

This does not work on every device. On Galaxy S6, even with a `-6dp` top margin, white space above the progress bar is still visible. – Muhammad Abdul-Rahim Oct 12 '15 at 21:13
a better solution is – Xan Jun 15 '18 at 09:25

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

4

from the looks of it, I think its caused by the image used in the default styling

style="@android:style/Widget.Holo.ProgressBar.Horizontal"

(the image I'm referring to is this one: @android:drawable/progress_indeterminate_horizontal_holo and @android:drawable/progress_horizontal_holo_dark )

These images have a lot of canvas background; therefore its showing this gap.

My recommendation:

use a custom image to style you PregressBar. One which doesn't have much canvas spacing.

enter image description here

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 30 '13 at 06:58

Sathya

648
4
12

2

This is ultimately the right answer. I'll have to edit a version of all of the holo drawable (9 patches) to get rid of the padding. – Pork 'n' Bunny Aug 31 '13 at 01:19

score 4 · Answer 3 · answered Sep 16 '13 at 04:37

A complete solution to this problem would be as follows. Just in case if someone needs code fragments, this is what I did.

Copied all the 8 indeterminate horizontal progressbar drawables
Edited the drawables using some image manipulator and remove unnecessary paddings
Copied the drawable XML named progress_indeterminate_horizontal_holo.xml from android platform
Copied the style Widget.ProgressBar.Horizontal and its parents
Set the style and min_height manually in the layout

Here is the progress_indeterminate_horizontal_holo.xml

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
<item android:drawable="@drawable/progressbar_indeterminate_holo1" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo2" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo3" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo4" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo5" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo6" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo7" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo8" android:duration="50" />

Style resources copied to my local styles file.

<style name="Widget">
    <item name="android:textAppearance">@android:attr/textAppearance</item>
</style>

<style name="Widget.ProgressBar">
    <item name="android:indeterminateOnly">true</item>
    <item name="android:indeterminateBehavior">repeat</item>
    <item name="android:indeterminateDuration">3500</item>
</style>

<style name="Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
</style>

And finally, set min height to 4dp in my local layout file.

<ProgressBar
    android:id="@+id/pb_loading"
    style="@style/Widget.ProgressBar.Horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:indeterminate="true"
    android:minHeight="4dp"
    android:minWidth="48dp"
    android:progressDrawable="@drawable/progress_indeterminate_horizontal_holo" />

Thanks Subin! I hasn't actually set about doing this yet because I wasn't sure how much beyond editing the one drawable would it take to do, now we all know. Thanks for sharing. — Pork 'n' Bunny, Sep 16 '13 at 06:09
The question is about `?android:attr/progressBarStyleHorizontal` and not `@style/Widget.ProgressBar.Horizontal` — Muhammad Abdul-Rahim, Oct 13 '15 at 14:36

Pork 'n' Bunny · Answer 4 · 2013-10-09T03:29:28.160

2

Came up with another solution since the drawable is working as intended in the screenshot. Just push it by 6dp up.

    mProgress = (ProgressBar) view.findViewById(R.id.fwv_progress);
    mProgress.animate().withLayer().yBy(-6.0f*getResources().getDisplayMetrics().density).setDuration(0).start();

edited Oct 09 '13 at 03:29

answered Oct 08 '13 at 17:58

Pork 'n' Bunny

6,660
5
23
30

It works only API level 16 and up.. Is there any way to fix for API 8 and above ? – bCliks Oct 24 '13 at 05:27

score -2 · Answer 5 · answered Aug 30 '13 at 06:59

-2

I think the problem is with height attribute. try setting the layout height to some value

<ProgressBar
            android:id="@+id/progressBar"
            android:max="100"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            style="@android:style/Widget.ProgressBar.Horizontal"
            />

answered Aug 30 '13 at 06:59

Raghuram

95
5

If that is the case then you should change the drawables to customised ones in your styles file – Raghuram Aug 30 '13 at 07:48

Align ProgressBar horizontal to top (remove gap)

5 Answers5