14

I have a progress bar that shows up when I click on the Login button. I made modifications to the layout by adding a Toolbar at the top and it seems this toolbar is now obscuring the progressbar.

How can I make this progress bar visible somewhere in the center of the screen?

Thank you very much for your help.

The layout xml code is as shown below:

activity_login.xml

<android.support.constraint.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="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:gravity="center"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginBottom="64dp"
    android:background="@android:color/white"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintBottom_toTopOf="@+id/edittext_username"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<EditText
    android:id="@+id/edittext_username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:drawablePadding="8dp"
    android:gravity="center_vertical"
    android:hint="@string/edittext_username"
    app:layout_constraintBottom_toTopOf="@+id/edittext_password"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/button_login" />

<EditText
    android:id="@+id/edittext_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:drawablePadding="8dp"
    android:gravity="center_vertical"
    android:hint="@string/edittext_password"
    android:inputType="textPassword"
    app:layout_constraintBottom_toTopOf="@+id/button_login"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:text="@string/button_login"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

<ProgressBar
    android:id="@+id/progressbar_login_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:visibility="gone" />

</android.support.constraint.ConstraintLayout>
2
  • Possible duplicate of How to center the elements in ConstraintLayout Feb 17, 2018 at 16:25
  • @user3875913, it is not an exact duplicate as the answer in your suggested question addresses using a guidline to center. My main question is about making my progress bar visible and placing it in the best location on the screen. Thank you very much.
    – sage
    Feb 17, 2018 at 17:58

3 Answers 3

22

Use next code to center your ProgressBar

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    >

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
1
  • 3
    Worked like a charm, had to add android:elevation="10dp" to bring the progress to the top. May 19, 2019 at 17:25
0

You don't have any constraints on your ProgressBar. If you want it below your toolbar you have to add a constraint for it to do so.

<ProgressBar
    android:id="@+id/progressbar_login_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@id/my_toolbar"
    android:visibility="gone" />
1
  • Thanks a lot @jack. This was a possible answer and worked but H D's solution seemed better due to the conventional center positions given to progress bars when they are visible.
    – sage
    Feb 17, 2018 at 18:02
0

Next code, it should be wordk for ProgressBar in ConstraintLayout

<ProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/progressBar"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.