skip to Main Content

I have a sign up activity that has a loading state.

This is what the activity looks like when it is not in its loading state:

enter image description here

When the activity is in its loading state, the progress bar appears:

enter image description here

The loading state consists of a View and ProgressBar widget.

The user can still interact with the activity and the button is still clearly visible when the activity is in the loading state. How can I prevent all user interaction and make the button appear behind the View widget?

Edit:

I was able to solve the above problem with the code below:

SignUp.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="fill_parent"
    android:layout_height="match_parent"
    android:background="@drawable/home_edit"
    android:fillViewport="true"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="1dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:textAlignment="gravity"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="cursive"
            android:text="Header"
            android:textColor="#FF0000"
            android:textSize="60sp"
            android:visibility="invisible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:layout_editor_absoluteY="10dp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="cursive"
            android:text="Subheader"
            android:textColor="#00B7FF"
            android:textSize="60sp"
            android:visibility="invisible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="30dp"
            android:fontFamily="sans-serif-medium"
            android:text="Sign Up"
            android:textColor="#FFFFFF"
            android:textSize="34sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView3" />

        <EditText
            android:id="@+id/username_sign_up"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Username"
            android:inputType="textPersonName"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView4" />

        <EditText
            android:id="@+id/name_sign_up"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Name"
            android:inputType="textPersonName"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/username_sign_up" />

        <EditText
            android:id="@+id/surname_sign_up3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Surname"
            android:inputType="textPersonName"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name_sign_up" />

        <Button
            android:id="@+id/register_sign_up"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="30dp"
            android:background="#00F7FF"
            android:onClick="SignUpButton"
            android:text="Register"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/password_confirm_sign_up"
            app:layout_constraintVertical_bias="0.0" />

        <EditText
            android:id="@+id/email_sign_up"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/surname_sign_up3" />

        <EditText
            android:id="@+id/password_sign_up"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/email_sign_up" />

        <EditText
            android:id="@+id/password_confirm_sign_up"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@android:drawable/editbox_background"
            android:ems="10"
            android:hint="Password Confirm"
            android:inputType="textPassword"
            android:paddingLeft="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/password_sign_up" />

        <View
            android:id="@+id/interaction_blocker_sign_up"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#CC000000"
            android:clickable="true"
            android:elevation="5dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ProgressBar
            android:id="@+id/loading_icon_sign_up"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="6dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/interaction_blocker_sign_up"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

SignUp.java:

public class SignUp extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_up);
    }

    public void SignUpButton(View view)
    {
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE);

        findViewById(R.id.interaction_blocker_sign_up).setVisibility(View.VISIBLE);
        findViewById(R.id.loading_icon_sign_up).setVisibility(View.VISIBLE);
    }
}

However, getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE); does not work as expected. I am still able to type text into an EditText after the loading widget appears. How can I remove focus from all widgets?

2

Answers


  1. For the button issue you just have to make sure that the view is after the button in the yourLayout.xml file

    for the interacting issue just add this method for showing/hiding the progress
    indecator

    private void loading (Boolean isLoading){
        if(isLoading){
            progressView.setVisibility(View.VISIBLE);
            container.setEnabled(false); // your container that contains your items that should be disabled
        }
        else{
            progressView.setVisibility(View.INVISIBLE);
            container.setEnabled(true); // your container that contains your items that should be disabled
        }
    }
    

    I think this would solve your problem , if you have any problem please post the code that has the issue to determine where the problem is because we did not get enough information about the problem.

    Login or Signup to reply.
  2. As I said earlier, you just need to put your ProgressBar in a layout (any) and set the clickable property of that layout to be true, as you see in the code:

    ...
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/progress_layout"
        android:layout_width="match_parent"
        android:visibility="gone"
        android:clickable="true"
        android:layout_height="match_parent">
        <ProgressBar
            android:id="@+id/loading_icon_sign_up"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="6dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    ...
    

    Setting up the clickable property in that view will consume all the click events when it’s visible and won’t let them pass to the widgets present behind it.

    Now, toggles the visibility of this layout named progress_layout whenever needed instead of the ProgressBar.

    I’ve already used this way a lot of times and it works flawlessly, you can add Fade in/out effect to make it appear better.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search