Unknown space on top of ProgressBar

Question

So I would like to achieve the same style as in the material guide in the following link (material.io)

So far I have tried this way:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

<ProgressBar
    android:indeterminate="true"
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    />

<LinearLayout
    android:elevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@color/white"
    android:orientation="vertical"
    android:paddingBottom="64dp"
    android:paddingLeft="64dp"
    android:paddingRight="64dp"
    android:paddingTop="32dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:paddingBottom="32dp"
        android:paddingTop="32dp"
        android:text="@string/patient_register"
        android:textSize="30sp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="@string/login_with_your_clinic"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:ems="10"
        android:hint="@string/email_address"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/editText6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="@string/login"
        android:textColor="@color/white"
        android:theme="@style/MyButton" />
</LinearLayout>

And this is the result:

Why is there that huge gap between the action bar and the progress bar? How can I achieve the result seen in google's material guide?

@FatihOzcan Why would I add bottom margin? I want to eliminate the gap top of the ProgressBar — Adam Varhegyi, Oct 18 '17 at 15:25
That's because that gap is still the ActionBar (it has some elevation). If you make a custom Toolbar without any elevation, you won't have any shadow between the ActionBar and the Progressbar. — JMedinilla, Oct 18 '17 at 15:27
I thought you are trying to achive that gap. You can check the width and height of the progressbar by changing it to a different color to be sure if progressBar is evenly placed. It may be as JMedinilla said. When you wish to see width and height of a view it's simple and useful solution to change it's color — Thracian, Oct 18 '17 at 15:28
Ok, I was wrong, but not on the problem, but the component. That space is from the Progressbar. You can check it placing the mouse on the preview layout to see how much space components take, like Faith Ozcan said: https://imgur.com/a/jgK5o — JMedinilla, Oct 18 '17 at 15:33
The problem is because of the layout of ProgressBar itself. Solutions at [this link](https://stackoverflow.com/questions/14171471/remove-vertical-padding-from-horizontal-progressbar) may help. — Mehmed, Oct 18 '17 at 15:52

JMedinilla · Answer 1 · 2018-09-19T23:52:53.593

1

[Edit 2018-09-20]: Don't follow this approach. It is an incorrect practice and therefore should not be used.

Add a negative marginTop to the ProgressBar component, so it goes up, next to the ActionBar.

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

edited Sep 19 '18 at 23:52

answered Oct 18 '17 at 15:38

JMedinilla

481
5
15

1

this is not the right way to go as it will have a different UI on different devices. – Simon Ninon Sep 07 '18 at 22:42
I know that. It's been almost a year since this answer. It no longer represents me or my Android aptitudes. – JMedinilla Sep 19 '18 at 23:50

score 0 · Answer 2 · answered Mar 04 '20 at 12:06

The Best Solution for remove the top white space in progress bar

 <ProgressBar
    android:id="@+id/webProgressbar"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_centerHorizontal="true"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    app:layout_constraintTop_toTopOf="parent" 
/>

Unknown space on top of ProgressBar

And this is the result:

Why is there that huge gap between the action bar and the progress bar? How can I achieve the result seen in google's material guide?

2 Answers2