Put a circular progress bar over my login form

Question

I've designed this login form simulating the facebook login page for movil. I use web services to do requests from the app to an API:

Login form design

What i want to do is putting a circular progress bar while the request is executing, i want to disable all the components, and put the cicular progress bar over the form and once the request has been attended, enable again all the components. This is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="#dfe1ee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    tools:context="com.example.abrahamarreola.facebooklogin.LoginScreen">

    <LinearLayout
        android:background="#3b5998"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:src="@drawable/facebook_logo"
            android:layout_width="match_parent"
            android:layout_height="50dp" />
    </LinearLayout>

    <LinearLayout
        android:background="#E3CE3B"
        android:paddingBottom="2dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:textColor="#8f8b59"
            android:textStyle="bold"
            android:background="#fffacd"
            android:textAlignment="center"
            android:textSize="16dp"
            android:text="Log in to use your Facebook account"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:paddingRight="20dp"
        android:paddingLeft="20dp"
        android:paddingBottom="20dp"
        android:paddingTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:background="@drawable/back1"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingRight="12dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="45dp"
                android:layout_height="40dp"
                android:src="@drawable/celphone_icon" />

            <TextView
                android:textStyle="bold"
                android:textSize="14dp"
                android:elegantTextHeight="true"
                android:textColor="#3b5998"
                android:layout_gravity="center_vertical"
                android:gravity="center"
                android:text="Use Facebook in your device everywhere."
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:paddingTop="8dp"
            android:orientation="vertical"
            android:background="@drawable/back2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/email_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/email_input"
                    android:singleLine="true"
                    android:paddingLeft="20dp"
                    android:hint="Email:"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/password_layout"
                app:passwordToggleEnabled="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/password_input"
                    android:inputType="textPassword"
                    android:singleLine="true"
                    android:paddingLeft="20dp"
                    android:paddingRight="20dp"
                    android:hint="Password:"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </android.support.design.widget.TextInputLayout>

            <LinearLayout
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/login_button"
                    android:textSize="16dp"
                    android:textColor="#ffff"
                    android:textStyle="bold"
                    android:text="Log In"
                    android:background="@drawable/button_login"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="vertical"
            android:paddingTop="20dp"
            android:paddingLeft="70dp"
            android:paddingRight="70dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/new_account_button"
                android:layout_gravity="center"
                android:textSize="16dp"
                android:textColor="#ffff"
                android:textStyle="bold"
                android:text="Create new account"
                android:background="@drawable/button_create_account"
                android:layout_width="200dp"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/help_label"
                android:textColor="#808cba"
                android:layout_gravity="center"
                android:paddingTop="10dp"
                android:text="Forgotten Password? - Help Centre"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:background="#ffff"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Facebook ©2019"
                android:textAlignment="center"
                android:textSize="16dp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Possible duplicate of [How to show progress dialog in Android?](https://stackoverflow.com/questions/10446125/how-to-show-progress-dialog-in-android) — Ashish, Jul 12 '19 at 05:58

Sumit Shukla · Accepted Answer · 2019-07-12T06:12:26.817

3

You can make use of ProgressDialog instead of ProgressBar for simple purposes.On the click of your register button use ProgressDialog like this:

 ProgressDialog dialog = new ProgressDialog(YourActivity.this);    
 dialog.setMessage("Registering...");
 dialog.setCancelable(false);
 dialog.setCanceledOnTouchOutside(false);
 dialog.show();

To dismiss dialog when you got success or failure response:

dialog.dismiss();

edited Jul 12 '19 at 06:12

answered Jul 12 '19 at 05:50

Sumit Shukla

4,116
5
38
57

yeah, this is the right way of doing it, as .setCancelable(false); will prevent the users from interacting with anything else – a_local_nobody Jul 12 '19 at 05:55

score 1 · Answer 2 · answered Jul 12 '19 at 05:52

1

you can show progress dialog

ProgressDialog pd = new ProgressDialog(yourActivity.this);
pd.setMessage("loading please wait..");
pd.show();

when api result success/fails use

pd.dismiss()

answered Jul 12 '19 at 05:52

Sahil Arora

495
1
3
11

Vladyslav Matviienko · Answer 3 · 2019-07-12T06:14:40.130

I don't like the way with dialogs, because they don't look like a part of the view. Here is way I use:
Put your entire layout inside another FrameLayout, then put some other layout with the ProgressBar in top of it:

(pseudo code)

<FrameLayout>
    <YourLayout/>
    <FrameLayout id="@+id/loading" width="match_parent" height="match_parent" visibility="gone">
        <ProgressBar gravity="center"/>
    <FrameLayout/>
<FrameLayout/>

Then wherever you need to show/hide loading:

View loading = findViewById(R.id.loading);
loading.setVisibility (View.VISIBLE); //to show
loading.setVisibility (View.GONE); //to hide

Put a circular progress bar over my login form

3 Answers3

Linked