Remove vertical padding from horizontal ProgressBar

Question

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?

Answer 1

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

Answer 2

I use the following as a workaround for this issue.

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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>