How to remove Progressbar margins?

Question

I added a ProgressBar simple to a LinearLayout, however I noticed that it generates a margin above and another below, such as this in the image:

These two white tracks, I tried to remove anyway, the only ones that "seem eventually" work are the custom progressbar, but really I would like to just remove the margins without needing something fully customized.

How can I remove these margins?

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        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="match_parent"
        android:fitsSystemWindows="true"
        tools:context="foo.bar.guilherme.exemplo.MainActivity">

    <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

</android.support.design.widget.CoordinatorLayout>

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_main"
        tools:context="foo.bar.guilherme.exemplo.MainActivity">

    <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progress="50"
            android:id="@+id/siteProgress"/>

    <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/siteView"
            android:fadeScrollbars="true"/>

</LinearLayout>

Answer 1

By default, the progressBar has a fill above and below, which can be removed in some ways, as:

Margin:

You can set the margin to a negative value, thus removing the spacing. An example would be this:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="50"
        android:layout_marginTop="-6dp"
        android:layout_marginBottom="-6dp"
        android:id="@+id/siteProgress"/>

Another way would be to alter the Height, but specifically, the android:minHeight and the android:maxHeight, in this way:

<ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progress="50"
            android:minHeight="20dp"
            android:maxHeight="20dp"
            android:id="@+id/siteProgress"/>

Remembering that the values 20dp should be changed to your layout.

More details you can see in this question

The change of Margin or height may depend on the screen, IE, It may not work with the same values for all types of screens.

Another possible solution would be to change the color of your progressBar. This article explains better how to do something similar.

If it is for Android 4.0+, there is the Materialprogressbar that in addition to a layout inspired by Material Design, allows some more changes.

If you haven’t found any options to suit your purpose, you can always do your own customerProgressBar, which is usually the option of many people.

Answer 2

From what I understand after testing the ProgressBar is a part of "outside" (where the margins are) the blue bar would be like a sub-item, it does not count at the defined height of the layout_height, so I did a test, I set the time to 14dp and removed -7dp of the upper and lower margins, thus:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="14dp"
        android:layout_marginBottom="-7dp"
        android:layout_marginTop="-7dp"
        android:progress="50"
        android:id="@+id/siteProgress"/>

And it worked perfectly:

Note that set a much higher height like this:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:progress="50"
        android:id="@+id/siteProgress"/>

It’ll look something like:

Note that the blue bar does not change size, so if you do this:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_marginBottom="-22dp"
        android:layout_marginTop="-22dp"
        android:progress="50"
        android:id="@+id/siteProgress"/>

The result is the same as the first example:

In logic I could set the android:layout_height as 0dp or 1dp, but this affects the "sub-elements", but if I use negative margins it does not affect.

I’ll do some more tests and see the documentation to detail, but at first this seems to be the solution that works for all cases (at least the ones I was able to test)