Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Put a circular progress bar over my login form

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>
Tags:

3

Answers


  1. 0

    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();
    Login or Signup to reply.
  2. 0

    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()
    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search