Loading Indicator

Flow overview

When the user clicks the login button, we will perform a data validation flow. If the data is valid, proceed to:

1. Hide the login button to prevent a user from clicking the button
2. Disable the username and password input fields to prevent a user from changing the text

Layout update

To show the indeterminate loading indicator, we are going to use a ProgressBar view. Let’s make this view appear instead of the login button. To do so, we need to add constraints relative to the login button:

• app:layout_constraintBottom_toBottomOf="@+id/loginButton"
• app:layout_constraintEnd_toEndOf="@+id/loginButton"
• app:layout_constraintStart_toStartOf="@+id/loginButton"
• app:layout_constraintTop_toTopOf="@+id/loginButton"

The ProgressBar must be invisible by default, which can be done via the visibility attribute with the invisible parameter value.