gosulove gosulove - 2 months ago 10
Android Question

Android how to make the ProgressBar(circle) to cover the full screen when pressing button?

I try to display a ProgessBar when clicking Submit Button. It will hide when the data finished loading. However, the progressBar didn't cover the full screen. Instead, it's cover by the Button. Please refer to the screenshot, its should be easier to understand what do i mean.

enter image description here

What I want to achieve is the bottom part of the screenshot.

Main4Activity.java

public class Main4Activity extends AppCompatActivity {

ProgressBar progressBar;

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

progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setVisibility(View.GONE);

final EditText username=(EditText)findViewById(R.id.username);
final EditText email=(EditText)findViewById(R.id.email);
final EditText password=(EditText)findViewById(R.id.password);

final Button submit=(Button)findViewById(R.id.submit);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {

progressBar.setVisibility(View.VISIBLE);

final String get_username=username.getText().toString();
final String get_email=email.getText().toString();
final String get_password=password.getText().toString();

Response.Listener<String> response_listener=new Response.Listener<String>() {
@Override
public void onResponse(String response) {
try{
JSONObject jsonObject=new JSONObject(response);
boolean result=jsonObject.getBoolean("register_result");
progressBar.setVisibility(View.GONE);
if(result){

AlertDialog.Builder builder=new AlertDialog.Builder(Main4Activity.this);

builder.setMessage("Registration Done!")
.setNegativeButton("Back",null)
.create()
.show();

}else{

AlertDialog.Builder builder=new AlertDialog.Builder(Main4Activity.this);
builder.setMessage("User already existed! Please try different Email")
.setNegativeButton("Back",null)
.create()
.show();
}

}catch(JSONException e){
e.printStackTrace();;

}
}
};
register_request register_request=new register_request(get_username,get_email,get_password,response_listener);
RequestQueue queue=Volley.newRequestQueue(Main4Activity.this);
queue.add(register_request);
}
});

TextView register=(TextView)findViewById(R.id.login);
register.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent=new Intent(Main4Activity.this,login_activity.class);
Main4Activity.this.startActivity(intent);
}
});
}


}

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.collection_tutorial.Main4Activity"
android:orientation="vertical">

<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/progressBar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:indeterminate="false"
android:layout_gravity="center" />

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

<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:layout_below="@+id/email"
android:layout_centerHorizontal="true"
android:hint="Password"
android:layout_margin="10dp" />

<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/username"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:hint="UserName / Restaurant Name"
android:layout_margin="10dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Existing User? Please Login here->"
android:id="@+id/login"
android:layout_below="@+id/submit"
android:layout_centerHorizontal="true"
android:layout_margin="10dp" />

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Submit Registration"
android:id="@+id/submit"
android:layout_below="@+id/password"
android:layout_centerHorizontal="true"
android:layout_margin="10dp" />

<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/email"
android:layout_below="@+id/username"
android:layout_centerHorizontal="true"
android:hint="Email "
android:layout_margin="10dp" />
</RelativeLayout>




I try to put the progressbar and 3 Edittext and button into same Relativelayout, it doesn't work either. Anyone can help?

Answer

First of all I'll assign an id to your inner RelativeLayout:

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/container"
  >

With that now I can reference in code the RelativeLayout, I'll add a new field:

ProgressBar progressBar;
RelativeLayout container;

Then onClick I'll hide your container:

  @Override public void onClick(View view) {

    progressBar.setVisibility(View.VISIBLE);
    container.setVisibility(View.GONE); ...

And make it visible when your task is done:

 @Override public void onResponse(String response) {
        try {
          JSONObject jsonObject = new JSONObject(response);
          boolean result = jsonObject.getBoolean("register_result");
          progressBar.setVisibility(View.GONE);
          container.setVisibility(View.VISIBLE);...

Hope it helps.

However, I'll not recommend that user experience in all the app. There are other mechanism to notify the user, check the material design guidelines:

https://material.google.com/components/progress-activity.html

Btw, I tested the code and it works the way you mentioned that you're expecting it. Here's a gist with the code, however it's better if you use the snippets because I renamed a couple of variables:

https://gist.github.com/moxi/396b073f9df063dc3c943579c93f1be9

See the result on this gif: https://giphy.com/gifs/uAAYE6j9hy6dy