How to remove Progressbar margins?

Asked

Viewed 151 times

7

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:

ProgressBar

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>
  • but dude, if you remove the bar you want you are already using a custom component, ririririri

  • @Armandomarquessobrinho I don’t want to remove the bar, just reduce the size so it looks similar to Chrome, when I referred to the custom I speak of those with images and Assets, in case I don’t want a complete customization, I’m sure it’s possible to fix this without injecting a lot of things

  • He wants to leave only the part that carries, as if it were a line, roughly speaking, an example, imagine that you go for two bars one at the bottom of the other, these margins would disturb, I believe that this is his thinking, because he would also like this.

  • No reply pleased you @Guilhermenascimento?

  • 1

    @Florida technically both work, but it is a matter of testing to be able to affirm all factors, I usually leave open my questions for a while to give the opportunity to appear better answers than my own ;)

2 answers

5

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.

  • Would Dip or dp?

  • 2

    @Guilhermenascimento Creio indifferent. But on some systems Google uses Dip.

  • 1

    The first example does not work well, because "the effect" varies from place to place, layout to layout and resolution to resolution, I will test the second.

  • @Guilhermenascimento Yes, as I said may not work. The ideal is dr a deal with calmly in Supporting Multiple Screens to understand a little. There are other layout options, such as "force" the parent layout to overwrite this property.

  • 1

    I put an answer with the same purpose of inserting with negative margin, but with some more research I realized that it doesn’t really work on all devices. In Galaxy S6 for example, even with an upper margin -6dp, there is still white space above the progress bar. This thing of each company modify the Android OS gives it. =/

  • 1

    @Guilhermenascimento I read the documentation and is dp same, among the other standard units. I made the correction ma reply.

  • 2

    @Guillhermenascimento dip is the same as dp, can use any. However recommend using dp since the dip is no longer mentioned in the documentation.

  • 1

    @ramaral I thought it would be something like this, but as I didn’t find any reference in the documentation (I didn’t look at the previous releases), I preferred not to be sure. Thank you for enlightening me. xD

Show 3 more comments

4

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:

progressbar

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:

progressbar

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:

progressbar

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)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.