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:
When the activity is in its loading state, the progress bar appears:
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
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
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.
As I said earlier, you just need to put your
ProgressBar
in a layout (any) and set theclickable
property of that layout to be true, as you see in the code: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 theProgressBar
.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.