Remove vertical padding from horizontal ProgressBar

By default the ProgressBar has a certain padding above and below the bar itself. Is there a way to remove this padding so as to only have the bar in the end?

I use the following as a workaround for this issue.

android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

This is how I used Juozas's answer:

height of my ProgressBar is 4dp. So I created a FrameLayout with height 4dp and set the layout_gravity of ProgressBar to center. It's works like a charm.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="center"
        android:indeterminate="true" />
</FrameLayout>

Note: What a FrameLayout does is it clips away anything excess, so if you face the problem where the ProgressBar is still thin, just set the layout_height of the ProgressBar to some large number like 100dp. It'll fully cover the FrameLayout and will only show 4dp of it.

I ended up using a custom library to solve this issue. Most of the other solutions work but the results are not consistent across various devices.

> MaterialProgressBar > > - Consistent appearance on Android 4.0+. > - Correct tinting across platforms. > - Able to remove the intrinsic padding of framework ProgressBar. > - Able to hide the track of framework horizontal ProgressBar. > - Used as a drop-in replacement for framework ProgressBar.

To add as a gradle dependency:

compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'

To add a ProgressBar with no intrinsic padding to your layout:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="wrap_content"
    android:layout_height="4dp"
    android:indeterminate="true"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

app:mpb_useIntrinsicPadding="false" does the trick. For more details see the GitHub page.

If someone still needs help can try this:

<androidx.core.widget.ContentLoadingProgressBar
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    android:indeterminate="true"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline" />

Here, the progress bar is inside the ConstraintLayout, and the constraintTop_toTopOf and constraintBottom_toTopOf attributes must be applied to the same element (in this case, it is guideline).

*** COMPLETE SOLUTION:***

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="48dp">

    <View
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

To remove the vertial padding of ProgressBar, you can do by

• fix the height of ProgressBar
• Use scaleY="value" (value = height/4) (4 is default height of progress bar)

Example contains 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dp ProgressBar

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    android:layout_height="8dp"
    android:scaleY="2" />

It's possible to draw vertically centered ProgressBar inside a parent that would clip away the padding. Since ProgressBar cannot draw itself bigger than parent, we must create a big parent to place inside a clipping view.

<FrameLayout
    android:id="@+id/clippedProgressBar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    tools:ignore="UselessParent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:layout_gravity="center_vertical">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="true"/>

    </FrameLayout>

</FrameLayout>

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

1. Copied all the 8 indeterminate horizontal progressbar drawables
2. Edited the drawables using some image manipulator and remove unnecessary paddings
3. Copied the drawable XML named progress_indeterminate_horizontal_holo.xml from android platform
4. Copied the style Widget.ProgressBar.Horizontal and its parents
5. 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" />
</animation-list>

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

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:id="@+id/progress_loading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:indeterminate="true"
    app:indicatorColor="@color/colorAccent"
    app:layout_constraintTop_toBottomOf="@+id/app_bar_pdfview"/>

I am using this new progress bar using this

implementation 'com.google.android.material:material:1.3.0'

• trackThickness: the thickness of the indicator and track.
• indicatorColor: the color(s) of the indicator.
• trackColor: the color of the track.
• trackCornerRadius: the radius of the rounded corner of the indicator and track.
• indeterminateAnimationType: the type of indeterminate animation.
• indicatorDirectionLinear: the sweeping direction of the indicator.

I met the same problem while using progressbar with Horizontal style.

The root cause is that the default 9-patch drawable for progress bar: (progress_bg_holo_dark.9.png) has some vertical transparent pixels as padding.

The final Solution that worked for me: customize the progress drawable, my sample code as follow:

custom_horizontal_progressbar_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#33ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#ff9800" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#E91E63" />
            </shape>
        </clip>
    </item>
</layer-list>

layout snippet:

<ProgressBar
    android:id="@+id/song_progress_normal"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_alignParentBottom="true"
    android:progressDrawable="@drawable/custom_horizontal_progressbar_drawable"
    android:progress="0"/>

One trick is to add negative margins to your progress bar.

Below is an example of the XML code, assuming it's on top of your screen:

<ProgressBar
    android:id="@+id/progressBar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-7dp"
    android:layout_marginBottom="-7dp"
    android:indeterminate="true" />

if someone still searching for a solution -- check this comment

set the minimum height to be 4 dp

   android:minHeight="4dp"

-

  <ProgressBar
    android:id="@+id/web_view_progress_bar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:min="0"
    android:progress="5"
    android:minHeight="4dp"
    android:progressTint="@color/vodafone_red"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:progress="60" />

Subin's answer seems to be the only one (currently) that isn't a fragile hack subject to breakage in future releases of the Android ProgressBar.

But rather than going through the trouble of breaking out the resources, modifying them, and maintaining them indefinitely, I've opted to use the MaterialProgressBar library, which does that for us:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:layout_gravity="bottom"
    custom:mpb_progressStyle="horizontal"
    custom:mpb_showTrack="false"
    custom:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>

In build.gradle:

// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.android.materialprogressbar:library:1.1.6'

That project has a nice demo that shows the differences between it and the built-in ProgressBar.

I use minHeight and maxHeigh. It helps for different Api versions.

<ProgressBar
    android:id="@+id/progress_bar"
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp" />

It needs to use both. Api 23 works nice with

android:layout_height="wrap_content"
android:minHeight="0dp"

But lower Api versions increase progress bar height to maxHeight in that case.

Try the following:

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progress="25"
    android:progressTint="@color/colorWhite"
    android:progressBackgroundTint="@color/colorPrimaryLight"
    android:layout_width="match_parent"
    android:layout_height="4dp" />

... and then configure the progress bar to your needs since it'll initially display a mid-sized bar with a yellow-colored progress tint with a grayish progress background tint. Also, notice that there's no vertical padding.

Use like this, inside Linearlayout

 <LinearLayout
     android:layout_width="match_parent"
     android:background="#efefef"
     android:layout_height="wrap_content">

     <ProgressBar
         android:id="@+id/progressBar"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:indeterminate="true"
         android:visibility="gone"
         android:layout_marginTop="-7dp"
         android:layout_marginBottom="-7dp"
         style="@style/Widget.AppCompat.ProgressBar.Horizontal" />
 </LinearLayout>

For me this is working. Progress bar is sharp. It fits perfectly. I tried with different heights of frame and progress.

<FrameLayout             
    android:layout_width="match_parent"             
    android:layout_height="4dp">    

   <ProgressBar
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="16dp"
       android:layout_gravity="center"
       android:indeterminate="true"/>
</FrameLayout>

preview

adding the android:progressDrawable to a layer-list defined in drawable fixed the issue for me. It works by masking the progess bar in a custom drawable

example implementation described at https://stackoverflow.com/a/4454450/1145905

I'm using style="@style/Widget.AppCompat.ProgressBar.Horizontal" and it was fairly easy to get rid of the margins. That style is:

    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>

I just overrode the min/max height:

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:indeterminate="true"
        android:minHeight="2dp"
        android:maxHeight="2dp" />

Not necessary to download any new module or even put a FrameLayout around your Progress Bar. These are all just hacks. Only 2 steps:

In your whatever.xml

<ProgressBar
	android:id="@+id/workoutSessionGlobalProgress"
	android:layout_width="match_parent"
	android:layout_height="YOUR_HEIGHT"
	android:progressDrawable="@drawable/progress_horizontal"
	android:progress="0"
    <!-- High value to make ValueAnimator smoother -->
	android:max="DURATION * 1000"
	android:indeterminate="false"
	style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>

progress_horizontal.xml, Change the values as you please.

Don't like the rounded corners?
Remove corner radius

Don't like the colors? Change the colors, etc. Done!

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

	<item android:id="@android:id/background">
		<shape>
			<corners android:radius="5dip" />
			<gradient
					android:startColor="#ff9d9e9d"
					android:centerColor="#ff5a5d5a"
					android:centerY="0.75"
					android:endColor="#ff747674"
					android:angle="270"
					/>
		</shape>
	</item>

	<item android:id="@android:id/secondaryProgress">
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient
						android:startColor="#80ffd300"
						android:centerColor="#80ffb600"
						android:centerY="0.75"
						android:endColor="#a0ffcb00"
						android:angle="270"
						/>
			</shape>
		</clip>
	</item>

	<item android:id="@android:id/progress">
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient
						android:startColor="#ffffd300"
						android:centerColor="#ffffb600"
						android:centerY="0.75"
						android:endColor="#ffffcb00"
						android:angle="270"
						/>
			</shape>
		</clip>
	</item>

</layer-list>

Generally, these are the steps to change the code of anything you don't like. Just find the source code and figure out what to change. If you follow the ProgressBar source code, you will find a file called progress_horizontal.xml that it references. Basically how I solve all my XML problems.

Just make use of Material ProgressIndicator which has no hidden margin.

<com.google.android.material.progressindicator.ProgressIndicator
        android:id="@+id/progressBar"
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorColor="@color/colorPrimary"
        app:trackColor="@color/colorAccent" />

 <ProgressBar
        android:layout_marginTop="-8dp"
        android:layout_marginLeft="-8dp"
        android:layout_marginRight="-8dp"
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:indeterminate="false"
        android:indeterminateTint="@color/white"
        android:max="100"
        android:paddingStart="8dp"
        android:paddingRight="0dp"
        android:progressDrawable="@drawable/progress_bg" />

<androidx.core.widget.ContentLoadingProgressBar
                    android:id="@+id/progressBar"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:indeterminate="true"
                    android:paddingTop="2dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

A simple no-tricks solution which is compatible with any version of Android and doesn't need external libraries is faking ProgressBar with two Views inside LinearLayout. This is what I ended up with. Looks pretty neat and this approach is quite flexible - you can animate it in funky ways, add text etc.

Layout:

<LinearLayout
    android:id="@+id/inventory_progress_layout"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/inventory_progress_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/inventory_progress_remaining"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Code:

public void setProgressValue(float percentage) {
    TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
    TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);

    LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    paramsValue.weight = (100 - percentage);
    paramsRemaining.weight = percentage;

    progressValue.setLayoutParams(paramsValue);
    progressRemaining.setLayoutParams(paramsRemaining);

}

Result (with some elevation added):

The best solution should be

android:minHeight="0dp"

No workaround and works like a charm.

One simple way to move the Progressbar up that does not require any additional views or fiddling with the margins is to use the attribute android:translationZ

That way you could either use it in the XML

<Progressbar
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 android:translateY="-6dp"
/>

or

use it from within a style

<style name="MyTheme.Progressbar.Horizontal" parent="Widget.AppCompat.Progressbar.Horizontal">
    <item name="android:translateY">-6dp</item>
</style>

and then reference it in the Layout like this

<Progressbar
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 style="@style/MyTheme.Progressbar.Horizontal"
 />

Make the size of the progressBar really big (i mean height) and then place it into a frameLayout of the size that you wish your progressBar needs to be.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="10dp">

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:backgroundTint="@android:color/transparent"
        android:indeterminate="true"
        android:indeterminateTint="@color/white" />

</FrameLayout>

Here's a simple material horizontal progress bar without adding a file, scaling, or changing the dimension

    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progressTint="Your Progress Color"
    android:progressTintMode="src_over"
    android:progressBackgroundTint="Your Background Color"
    android:backgroundTintMode="src_over"

This works by coloring over the progress or background color presented in Widget.ProgressBar.Horizontal